WebGL - Chia tỷ lệ

Trong chương này, chúng tôi sẽ lấy một ví dụ để chứng minh cách sửa đổi tỷ lệ của một tam giác bằng cách sử dụng WebGL.

Mở rộng quy mô

Chia tỷ lệ không là gì khác ngoài việc tăng hoặc giảm kích thước của một đối tượng. Ví dụ, nếu một tam giác có các đỉnh có kích thước là [a, b, c], thì tam giác có các đỉnh [2a, 2b, 2c] sẽ có kích thước gấp đôi kích thước của nó. Do đó, để chia tỷ lệ một tam giác, bạn phải nhân mỗi đỉnh với hệ số tỷ lệ. Bạn cũng có thể chia tỷ lệ một đỉnh cụ thể.

Để chia tỷ lệ một tam giác, trong bộ đổ bóng đỉnh của chương trình, chúng ta tạo một ma trận đồng nhất và nhân các giá trị tọa độ với ma trận này. Sau đó, chúng ta chuyển một ma trận đường chéo 4 × 4 có hệ số tỷ lệ của tọa độ x, y, z ở các vị trí đường chéo (vị trí đường chéo cuối cùng 1).

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 để chia tỷ lệ một tam giác.

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

Trong bước này, chúng tôi lấy đối tượng ngữ cảnh Kết xuất WebGL bằng cách sử dụng getContext().

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

Vì chúng ta đang vẽ một tam giác, chúng ta phải đi qua ba đỉnh của tam giác và lưu chúng trong bộ đệm.

var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,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 tô bóng đỉnh và tô 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 phần đổ bóng đỉnh của chương trình, chúng ta xác định một thuộc tính vector để lưu trữ tọa độ 3D. Cùng với nó, chúng tôi xác định một ma trận thống nhất để lưu trữ các hệ số tỷ lệ và cuối cùng, chúng tôi nhân hai giá trị này và gán nó chogl_position mà giữ vị trí cuối cùng của các đỉnh.

var vertCode =
   'attribute vec4 coordinates;' +
   'uniform mat4 u_xformMatrix;' +
   'void main(void) {' +
      ' gl_Position = u_xformMatrix * coordinates;' +
   '}';

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 with the 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

Vì chúng tôi đang vẽ tam giác bằng cách sử dụng các chỉ số, chúng tôi sử dụng drawArrays()phương pháp. Đối với phương pháp này, chúng ta phải truyền số lượng đỉnh / phần tử được xem xét. Vì chúng ta đang vẽ một tam giác, chúng ta sẽ chuyển 3 làm tham số.

gl.drawArrays(gl.TRIANGLES, 0, 3);

Ví dụ - Quy mô hình tam giác

Ví dụ sau đây cho thấy cách chia tỷ lệ một tam giác:

<!doctype html>
<html>
   <body>
      <canvas width = "300" height = "300" 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.5,-0.5,0.0, 	
            0.5,-0.5,0.0,   
         ];

         //Create an empty buffer object and store vertex data

         var vertex_buffer = gl.createBuffer();                                                     
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);                                                
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);           
         gl.bindBuffer(gl.ARRAY_BUFFER, null);  

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

         //Vertex shader source code
         var vertCode =
            'attribute vec4 coordinates;' + 
            'uniform mat4 u_xformMatrix;' +
            'void main(void) {' +
               '  gl_Position = u_xformMatrix * coordinates;' +
            '}';

         //Create a vertex shader program object and compile it                
         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.compileShader(vertShader);

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

         //Create a fragment shader program object and compile it 
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(fragShader);

         //Create and use combiened shader program
         var shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertShader);
         gl.attachShader(shaderProgram, fragShader);
         gl.linkProgram(shaderProgram);

         gl.useProgram(shaderProgram); 

         /*===================scaling==========================*/

         var Sx = 1.0, Sy = 1.5, Sz = 1.0;
         var xformMatrix = new Float32Array([
            Sx,   0.0,  0.0,  0.0,
            0.0,  Sy,   0.0,  0.0,
            0.0,  0.0,  Sz,   0.0,
            0.0,  0.0,  0.0,  1.0  
         ]);

         var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix');
         gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

         /* ===========Associating shaders to buffer objects============*/
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);   

         var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates"); 
         gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);  
         gl.enableVertexAttribArray(coordinatesVar);

         /*=================Drawing the Quad========================*/ 
         gl.clearColor(0.5, 0.5, 0.5, 0.9);
         gl.enable(gl.DEPTH_TEST);

         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.viewport(0,0,canvas.width,canvas.height);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
      </script>
   </body>
</html>

Nếu bạn chạy ví dụ này, nó sẽ tạo ra kết quả sau: