Pengenalan kepada WebGL: Bina aplikasi grafik 3D dengan JavaScript-tutorial js-php.cn

Pengenalan kepada WebGL: Bina aplikasi grafik 3D dengan JavaScript

王林

Lepaskan： 2023-08-30 18:29:13

ke hadapan

1383 orang telah melayarinya

WebGL 简介：使用 JavaScript 构建 3D 图形应用程序

WebGL (Perpustakaan Grafik Web) ialah API JavaScript yang membolehkan pembangun mencipta dan menghasilkan grafik 3D interaktif dalam penyemak imbas web. Ia merapatkan jurang antara bahasa pengaturcaraan JavaScript dan perkakasan grafik yang mendasari, membolehkan penciptaan aplikasi web yang mengasyikkan dan visual yang menakjubkan. Dalam artikel ini, kami akan meneroka asas WebGL dan menunjukkan cara membina aplikasi grafik 3D yang mudah menggunakan JavaScript.

Asas WebGL

WebGL adalah berdasarkan standard OpenGL ES (Sistem Terbenam), yang digunakan secara meluas dalam industri permainan dan aplikasi intensif grafik yang lain. Ia memanfaatkan kuasa GPU (unit pemprosesan grafik) komputer anda untuk melaksanakan tugas pemaparan yang kompleks, membolehkan anda mencipta grafik 3D berprestasi tinggi dalam persekitaran penyemak imbas.

Untuk mula menggunakan WebGL, kita perlu memasukkan konteks WebGL dalam elemen kanvas HTML. Elemen kanvas bertindak sebagai bekas untuk memaparkan grafik. Berikut ialah contoh cara menyediakan persekitaran WebGL asas.

Contoh

<!DOCTYPE html>
<html>
   <head>
      <title>WebGL Example</title>
      <style>
         body {
            margin: 0;
            overflow: hidden;
         }
         canvas {
            display: block;
         }
      </style>
   </head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         const canvas = document.getElementById("myCanvas");
         const gl = canvas.getContext("webgl");
         if (!gl) {
            alert("Unable to initialise WebGL. Your browser may not support it.");
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Penerangan

Dalam kod di atas, kami mula-mula mencipta elemen kanvas dengan id "myCanvas". Kami kemudian menggunakan JavaScript untuk mendapatkan rujukan kepada elemen kanvas dan meminta konteks WebGL dengan memanggil kaedah getContext dengan parameter "webgl". Jika penyemak imbas menyokong WebGL, kaedah getContext akan mengembalikan objek WebGLRenderingContext, yang boleh kami simpan dalam pembolehubah gl. Jika WebGL tidak disokong, mesej amaran dipaparkan.

Merender Grafik 3D

Setelah kami mempunyai konteks WebGL, kami boleh mula memaparkan grafik 3D pada kanvas. WebGL berfungsi dengan melaksanakan satu siri program peneduh OpenGL ES pada GPU, yang melakukan pengiraan yang diperlukan untuk mengubah dan menjadikan bucu dan piksel pemandangan 3D.

Program shader ialah satu set arahan yang dijalankan pada GPU. Terdapat dua jenis shader dalam WebGL: vertex shader dan fragment shaders. Pelorek bucu memproses setiap bucu objek 3D, mengubah kedudukan, warna dan sifatnya yang lain. Pewarna serpihan, sebaliknya, menentukan warna setiap piksel dalam geometri.

Untuk menghasilkan objek 3D yang mudah kita perlu mentakrifkan geometrinya dan menentukan atur cara shader yang akan digunakan. Contoh berikut menunjukkan cara untuk membuat kiub berputar menggunakan WebGL.

Contoh

<!DOCTYPE html>
<html>
   <head>
      <title>WebGL Example</title>
      <style>
         body {
            margin: 0;
            overflow: hidden;
         }
         canvas {
            display: block;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>
   </head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         const canvas = document.getElementById("myCanvas");
         const gl = canvas.getContext("webgl");
         if (!gl) {
            alert("Unable to initialise WebGL. Your browser may not support it.");
         }

         // Define the vertex shader
         const vertexShaderSource = `
         attribute vec3 aPosition;
         uniform mat4 uModelViewMatrix;
         uniform mat4 uProjectionMatrix;

         void main() {
            gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
         }
         `;

         // Define the fragment shader
         const fragmentShaderSource = `
         precision mediump float;

         void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
         }
         `;

         // Create the vertex shader
         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertexShader, vertexShaderSource);
         gl.compileShader(vertexShader);

         // Create the fragment shader
         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragmentShader, fragmentShaderSource);
         gl.compileShader(fragmentShader);

         // Create the shader program
         const shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertexShader);
         gl.attachShader(shaderProgram, fragmentShader);
         gl.linkProgram(shaderProgram);
         gl.useProgram(shaderProgram);

         // Set up the geometry
         const positions = [
            -1.0, -1.0, -1.0,
            1.0, -1.0, -1.0,
            1.0, 1.0, -1.0,
            -1.0, 1.0, -1.0,
            -1.0, -1.0, 1.0,
            1.0, -1.0, 1.0,
            1.0, 1.0, 1.0,
            -1.0, 1.0, 1.0
         ];
         const vertexBuffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
         const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "aPosition");
         gl.enableVertexAttribArray(positionAttributeLocation);
         gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

         // Set up the transformation matrices
         const modelViewMatrixLocation = gl.getUniformLocation(shaderProgram, "uModelViewMatrix");
         const projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "uProjectionMatrix");
         const modelViewMatrix = mat4.create();
         const projectionMatrix = mat4.create();
         mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);
         mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100.0);
         gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
         gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

         // Render the cube
         gl.drawArrays(gl.LINE_LOOP, 0, 4);
         gl.drawArrays(gl.LINE_LOOP, 4, 4);
         gl.drawArrays(gl.LINES, 0, 2);
         gl.drawArrays(gl.LINES, 2, 2);
         gl.drawArrays(gl.LINES, 4, 2);
         gl.drawArrays(gl.LINES, 6, 2);
      </script>
   </body>
</html>

Salin selepas log masuk

Penerangan

Kod yang ditunjukkan di atas menunjukkan struktur asas program WebGL. Pertama, tentukan pelorek puncak dan pelorek serpihan, yang mengawal kedudukan dan warna setiap puncak dan piksel masing-masing. Shader kemudiannya disusun dan dilampirkan pada program shader.

Seterusnya, takrifkan geometri dengan mencipta susunan kedudukan bucu kubus. Buat objek penimbal puncak (VBO) dan isikannya dengan data puncak. Atribut kedudukan didayakan dan dikonfigurasikan untuk membaca data puncak daripada penimbal.

Tetapkan matriks transformasi (pandangan model dan unjuran) untuk mengawal kedudukan dan perspektif objek 3D. Matriks ini dihantar ke shader menggunakan pembolehubah seragam.

Akhir sekali, kubus diterangkan dengan memanggil fungsi gl.drawArrays dengan parameter yang sesuai untuk menentukan mod pemaparan (contohnya, gelung garisan atau garisan) dan bilangan bucu yang akan dilukis.

KESIMPULAN

WebGL ialah API berkuasa yang membawa grafik 3D ke web. Ia membolehkan pembangun mencipta aplikasi interaktif yang menakjubkan secara visual dan menjalankannya terus dalam penyemak imbas. Dalam artikel ini, kami memperkenalkan asas WebGL dan menunjukkan cara membina aplikasi grafik 3D yang mudah menggunakan JavaScript.

Atas ialah kandungan terperinci Pengenalan kepada WebGL: Bina aplikasi grafik 3D dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!