WebGL - Ölçeklendirme

Bu bölümde, WebGL kullanarak bir üçgenin ölçeğini nasıl değiştireceğimizi göstermek için bir örnek alacağız.

Ölçeklendirme

Ölçeklendirme, bir nesnenin boyutunu büyütmekten veya küçültmekten başka bir şey değildir. Örneğin, bir üçgenin [a, b, c] boyutunda köşeleri varsa, [2a, 2b, 2c] köşeli üçgen, boyutunun iki katı olacaktır. Bu nedenle, bir üçgeni ölçeklemek için, her bir köşeyi ölçekleme faktörüyle çarpmanız gerekir. Ayrıca belirli bir tepe noktasını ölçekleyebilirsiniz.

Bir üçgeni ölçeklemek için, programın köşe gölgelendiricisinde, tek tip bir matris oluşturup koordinat değerlerini bu matrisle çarpıyoruz. Daha sonra çapraz konumlarda (son köşegen konum 1) x, y, z koordinatlarının ölçeklendirme faktörlerine sahip 4 × 4 diyagonal bir matrisi geçiyoruz.

Gerekli Adımlar

Bir üçgeni ölçeklemek için bir WebGL uygulaması oluşturmak için aşağıdaki adımlar gereklidir.

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

Bu adımda, WebGL Rendering bağlam nesnesini kullanarak elde ederiz. getContext().

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

Bir üçgen çizdiğimiz için, üçgenin üç köşesini geçmeli ve bunları tamponlarda saklamalıyız.

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

Bu adımda, köşe gölgelendiricisi ve parça gölgelendirici programlarını yazmanız, bunları derlemeniz ve bu iki programı birbirine bağlayarak birleşik bir program oluşturmanız gerekir.

Vertex Shader- Programın köşe gölgelendiricisinde, 3B koordinatları depolamak için bir vektör niteliği tanımlarız. Bununla birlikte, ölçeklendirme faktörlerini depolamak için tek tip bir matris tanımlıyoruz ve son olarak bu iki değeri çarpıp,gl_position köşelerin son konumunu tutan.

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

Fragment Shader - Parça gölgelendiricide, parça rengini basitçe gl_FragColor değişken.

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

Step 4 − Associate the Shader Programs with the Buffer Objects

Bu adımda tampon nesnelerini gölgelendirici programı ile ilişkilendiriyoruz.

Step 5 − Drawing the Required Object

Üçgeni indisler kullanarak çizdiğimiz için, drawArrays()yöntem. Bu yönteme, dikkate alınacak köşe / eleman sayısını iletmeliyiz. Üçgen çizdiğimiz için parametre olarak 3'ü geçeceğiz.

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

Örnek - Üçgeni Ölçekleme

Aşağıdaki örnek bir üçgenin nasıl ölçekleneceğini gösterir -

<!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>

Bu örneği çalıştırırsanız, aşağıdaki çıktıyı üretir -