WebGL - Terjemahan

Sejauh ini, kita telah membahas cara menggambar berbagai bentuk dan menerapkan warna di dalamnya menggunakan WebGL. Di sini, di bab ini, kita akan mengambil contoh untuk menunjukkan bagaimana menerjemahkan segitiga.

Terjemahan

Terjemahan adalah salah satunya affine transformationsdisediakan oleh WebGL. Menggunakan terjemahan, kita bisa memindahkan segitiga (benda apa pun) pada bidang xyz. Misalkan kita memiliki segitiga [a, b, c] dan kita ingin memindahkan segitiga ke posisi 5 unit ke arah sumbu X positif dan 3 unit ke arah sumbu Y positif. Maka simpul baru akan menjadi [a + 5, b + 3, c + 0]. Artinya, untuk menerjemahkan segitiga, kita perlu menambahkan jarak terjemahan, katakanlah, tx, ty, tz ke setiap simpul.

Karena itu adalah per-vertex operation, kita bisa membawanya dalam program shader vertex.

Di vertex shader, bersama dengan atributnya, coordinates(yang memegang posisi puncak), kami mendefinisikan variabel seragam yang memegang jarak terjemahan (x, y, z). Kemudian, kami menambahkan variabel seragam ini ke variabel koordinat dan menetapkan hasilnya kegl_Position variabel.

Note - Karena shader simpul akan dijalankan pada setiap simpul, semua simpul dari segitiga akan diterjemahkan.

Langkah-langkah untuk Menerjemahkan Segitiga

Langkah-langkah berikut diperlukan untuk membuat aplikasi WebGL menggambar segitiga dan kemudian menerjemahkannya ke posisi baru.

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

Pada langkah ini, kita mendapatkan objek konteks Rendering WebGL menggunakan getContext().

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

Karena kita menggambar segitiga, kita harus melewati tiga simpul segitiga, dan menyimpannya dalam buffer.

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

Pada langkah ini, Anda perlu menulis program shader vertex dan shader fragmen, mengompilasinya, dan membuat program gabungan dengan menautkan kedua program ini.

Vertex Shader- Di vertex shader program, kami mendefinisikan atribut vektor untuk menyimpan koordinat 3D. Bersamaan dengan itu, kami mendefinisikan variabel seragam untuk menyimpan jarak terjemahan, dan akhirnya, kami menambahkan dua nilai ini dan menetapkannyagl_position yang memegang posisi akhir dari simpul.

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

Fragment Shader - Di shader fragmen, kita cukup menetapkan warna fragmen ke variabel gl_FragColor.

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

Step 4 − Associate the Shader Programs to the Buffer Objects

Pada langkah ini, kami mengaitkan objek buffer dengan program shader.

Step 5 − Drawing the Required Object

Karena kita menggambar segitiga menggunakan indeks, kita akan menggunakan metode ini drawArrays(). Untuk metode ini, kita harus melewatkan jumlah simpul / elemen untuk dipertimbangkan. Karena kita menggambar segitiga, kita akan melewatkan 3 sebagai parameter.

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

Contoh - Terjemahkan Segitiga

Contoh berikut menunjukkan cara menerjemahkan segitiga pada bidang xyz.

<!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(); 
			
         //Create a new buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);   
			
         //bind it to the current buffer			
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
			
         // Pass the buffer data
         gl.bindBuffer(gl.ARRAY_BUFFER, null);  
            
         /*========================Shaders============================*/
            
         //vertex shader source code 
         var vertCode =
            'attribute vec4 coordinates;' + 
            'uniform vec4 translation;'+
            'void main(void) {' +
               '  gl_Position = coordinates + translation;' +
            '}';
            
         //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);
   
         /* ===========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); 
   
         /* ==========translation======================================*/
         var Tx = 0.5, Ty = 0.5, Tz = 0.0;
         var translation = gl.getUniformLocation(shaderProgram, 'translation');
         gl.uniform4f(translation, Tx, Ty, Tz, 0.0);
 
         /*=================Drawing the riangle and transforming it========================*/ 

         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>

Jika Anda menjalankan contoh ini, itu akan menghasilkan keluaran berikut -