WebGL - Ứng dụng Mẫu

Chúng ta đã thảo luận về những điều cơ bản của WebGL và đường dẫn WebGL (một quy trình sau để hiển thị các ứng dụng Đồ họa). Trong chương này, chúng ta sẽ sử dụng một ứng dụng mẫu để tạo một hình tam giác bằng cách sử dụng WebGL và quan sát các bước tiếp theo trong ứng dụng.

Cấu trúc của ứng dụng WebGL

Mã ứng dụng WebGL là sự kết hợp của JavaScript và OpenGL Shader Language.

JavaScript được yêu cầu để giao tiếp với CPU
Ngôn ngữ OpenGL Shader là bắt buộc để giao tiếp với GPU.

Ứng dụng mẫu

Bây giờ chúng ta hãy lấy một ví dụ đơn giản để tìm hiểu cách sử dụng WebGL để vẽ một tam giác đơn giản với tọa độ 2D.

<!doctype html>
<html>
   <body>
      <canvas width = "300" height = "300" id = "my_Canvas"></canvas>
		
      <script>
         /* Step1: Prepare the canvas and get WebGL context */

         var canvas = document.getElementById('my_Canvas');
         var gl = canvas.getContext('experimental-webgl');

         /* Step2: Define the geometry and store it in buffer objects */

         var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];

         // Create a new buffer object
         var vertex_buffer = gl.createBuffer();

         // Bind an empty array buffer to it
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         
         // Pass the vertices data to the buffer
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         // Unbind the buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, null);

         /* Step3: Create and compile Shader programs */

         // Vertex shader source code
         var vertCode =
            'attribute vec2 coordinates;' + 
            'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';

         //Create a vertex shader object
         var vertShader = gl.createShader(gl.VERTEX_SHADER);

         //Attach vertex shader source code
         gl.shaderSource(vertShader, vertCode);

         //Compile the vertex shader
         gl.compileShader(vertShader);

         //Fragment shader source code
         var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';

         // Create fragment shader object
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

         // Attach fragment shader source code
         gl.shaderSource(fragShader, fragCode);

         // Compile the fragment shader
         gl.compileShader(fragShader);

         // Create a shader program object to store combined shader program
         var shaderProgram = gl.createProgram();

         // Attach a vertex shader
         gl.attachShader(shaderProgram, vertShader); 
         
         // Attach a fragment shader
         gl.attachShader(shaderProgram, fragShader);

         // Link both programs
         gl.linkProgram(shaderProgram);

         // Use the combined shader program object
         gl.useProgram(shaderProgram);

         /* Step 4: Associate the shader programs to buffer objects */

         //Bind vertex buffer object
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

         //Get the attribute location
         var coord = gl.getAttribLocation(shaderProgram, "coordinates");

         //point an attribute to the currently bound VBO
         gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);

         //Enable the attribute
         gl.enableVertexAttribArray(coord);

         /* Step5: Drawing the required object (triangle) */

         // Clear the canvas
         gl.clearColor(0.5, 0.5, 0.5, 0.9);

         // Enable the depth test
         gl.enable(gl.DEPTH_TEST); 
         
         // Clear the color buffer bit
         gl.clear(gl.COLOR_BUFFER_BIT);

         // Set the view port
         gl.viewport(0,0,canvas.width,canvas.height);

         // Draw the triangle
         gl.drawArrays(gl.TRIANGLES, 0, 3);
      </script>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Nếu bạn quan sát chương trình trên cẩn thận, chúng ta đã làm theo năm bước tuần tự để vẽ một hình tam giác đơn giản bằng cách sử dụng WebGL. Các bước như sau:

Step 1 − Prepare the canvas and get WebGL rendering context

Chúng tôi lấy đối tượng canvas HTML hiện tại và lấy ngữ cảnh kết xuất WebGL của nó.

Step 2 − Define the geometry and store it in buffer objects

Chúng tôi xác định các thuộc tính của hình học như đỉnh, chỉ số, màu, v.v. và lưu trữ chúng trong các mảng JavaScript. Sau đó, chúng ta tạo một hoặc nhiều đối tượng đệm và truyền các mảng chứa dữ liệu vào đối tượng đệm tương ứng. Trong ví dụ này, chúng tôi lưu trữ các đỉnh của tam giác trong một mảng JavaScript và chuyển mảng này tới một đối tượng bộ đệm đỉnh.

Step 3 − Create and compile Shader programs

Chúng tôi viết các chương trình đổ bóng đỉnh và đổ bóng phân mảnh, biên dịch chúng và tạo một chương trình kết hợp bằng cách liên kết hai chương trình này.

Step 4 − Associate the shader programs with buffer objects

Chúng tôi liên kết các đối tượng đệm và chương trình đổ bóng kết hợp.

Step 5 − Drawing the required object (triangle)

Bước này bao gồm các thao tác như xóa màu, xóa bit đệm, kích hoạt kiểm tra độ sâu, thiết lập cổng xem, v.v. Cuối cùng, bạn cần vẽ các nguyên thủy cần thiết bằng một trong các phương pháp - drawArrays() hoặc là drawElements().

Tất cả các bước này được giải thích thêm trong hướng dẫn này.