WebGL - Điểm vẽ

Chúng ta đã thảo luận trước đó (trong Chương 5) cách làm theo quy trình từng bước để vẽ một nguyên thủy. Chúng tôi đã giải thích quy trình trong năm bước. Bạn cần lặp lại các bước này mỗi khi vẽ một hình mới. Chương này giải thích cách vẽ điểm với tọa độ 3D trong WebGL. Trước khi đi xa hơn, chúng ta hãy xem xét năm bước.

Các bước bắt buộc

Các bước sau là bắt buộc để tạo một ứng dụng WebGL để vẽ điểm.

Step 1 − Prepare the Canvas and Get the WebGL Rendering Context

Trong bước này, chúng ta có được đối tượng ngữ cảnh Kết xuất WebGL bằng phương pháp getContext().

Step 2 − Define the Geometry and Store it in the Buffer Objects

Vì chúng tôi đang vẽ ba điểm, chúng tôi xác định ba đỉnh với tọa độ 3D và lưu trữ chúng trong bộ đệm.

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

Step 3 − Create and Compile the Shader Programs

Trong bước này, bạn cần viết 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.

Vertex Shader - Trong bộ đổ bóng đỉnh của ví dụ đã cho, chúng tôi xác định thuộc tính vectơ để lưu trữ tọa độ 3D và gán nó cho gl_position Biến đổi.
gl_pointsizelà biến được sử dụng để gán kích thước cho điểm. Chúng tôi chỉ định kích thước điểm là 10.

var vertCode = 'attribute vec3 coordinates;' +

   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
      'gl_PointSize = 10.0;'+
   '}';

Fragment Shader - Trong trình đổ bóng phân mảnh, chúng ta chỉ cần gán màu phân mảnh cho gl_FragColor Biến đổi

var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';

Step 4 − Associate the Shader Programs to Buffer Objects

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

Step 5 − Drawing the Required Object

Chúng tôi sử dụng phương pháp drawArrays()để vẽ điểm. Vì số điểm chúng ta muốn vẽ là ba nên giá trị đếm là 3.

gl.drawArrays(gl.POINTS, 0, 3)

Ví dụ - Vẽ ba điểm bằng cách sử dụng WebGL

Đây là chương trình WebGL hoàn chỉnh để rút ra ba điểm -

<!doctype html>
<html>
   <body>
      <canvas width = "570" height = "570" id = "my_Canvas"></canvas>

      <script>
         /*================Creating a canvas=================*/
         var canvas = document.getElementById('my_Canvas');
         gl = canvas.getContext('experimental-webgl'); 

         /*==========Defining and storing the geometry=======*/

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

         // Create an empty buffer object to store the vertex buffer
         var vertex_buffer = gl.createBuffer();

         //Bind appropriate array buffer to it
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

         // Pass the vertex data to the buffer
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

         /*=========================Shaders========================*/

         // vertex shader source code
         var vertCode =
            'attribute vec3 coordinates;' +

            'void main(void) {' +
               ' gl_Position = vec4(coordinates, 1.0);' +
               'gl_PointSize = 10.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 fragmentt shader
         gl.compileShader(fragShader);
         
         // Create a shader program object to store
         // the 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);

         /*======== Associating shaders 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, 3, gl.FLOAT, false, 0, 0);

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

         /*============= Drawing the primitive ===============*/

         // 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.POINTS, 0, 3);
      </script>
   </body>
</html>

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