WebGL - Örnek Uygulama

WebGL ve WebGL ardışık düzeninin (Grafik uygulamalarını işlemek için izlenen bir prosedür) temellerini tartıştık. Bu bölümde, WebGL'yi kullanarak bir üçgen oluşturmak için örnek bir uygulama alacağız ve uygulamada izlenen adımları izleyeceğiz.

WebGL Uygulamasının Yapısı

WebGL uygulama kodu, JavaScript ve OpenGL Shader Language kombinasyonudur.

CPU ile iletişim kurmak için JavaScript gereklidir
GPU ile iletişim kurmak için OpenGL Shader Language gereklidir.

Örnek Uygulama

Şimdi, 2B koordinatlarla basit bir üçgen çizmek için WebGL'nin nasıl kullanılacağını öğrenmek için basit bir örnek alalım.

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

Aşağıdaki sonucu verecektir -

Yukarıdaki programı dikkatlice gözlemlerseniz, WebGL kullanarak basit bir üçgen çizmek için ardışık beş adımı izledik. Adımlar aşağıdaki gibidir -

Step 1 − Prepare the canvas and get WebGL rendering context

Mevcut HTML canvas nesnesini alıyoruz ve WebGL oluşturma bağlamını elde ediyoruz.

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

Köşeler, indeksler, renk vb. Geometrinin niteliklerini tanımlıyor ve bunları JavaScript dizilerinde saklıyoruz. Ardından, bir veya daha fazla tampon nesnesi oluştururuz ve verileri içeren dizileri ilgili tampon nesnesine geçiririz. Örnekte, üçgenin köşelerini bir JavaScript dizisinde saklıyoruz ve bu diziyi bir köşe tampon nesnesine geçiriyoruz.

Step 3 − Create and compile Shader programs

Vertex shader ve fragment shader programları yazıyor, derliyor ve bu iki programı birbirine bağlayarak kombine bir program oluşturuyoruz.

Step 4 − Associate the shader programs with buffer objects

Tampon nesnelerini ve birleşik gölgelendirici programını ilişkilendiriyoruz.

Step 5 − Drawing the required object (triangle)

Bu adım, rengi temizleme, arabellek bitini temizleme, derinlik testini etkinleştirme, görünüm bağlantı noktasını ayarlama vb. Gibi işlemleri içerir. Son olarak, yöntemlerden birini kullanarak gerekli temelleri çizmeniz gerekir - drawArrays() veya drawElements().

Tüm bu adımlar bu öğreticide daha ayrıntılı açıklanmıştır.