WebGL - Çizim Noktaları

Daha önce (Bölüm 5'te) bir ilkel çizmek için adım adım bir sürecin nasıl izleneceğini tartışmıştık. Süreci beş adımda anlattık. Her yeni şekil çizdiğinizde bu adımları tekrarlamanız gerekir. Bu bölüm WebGL'de 3B koordinatlarla nasıl nokta çizileceğini açıklar. Daha ileri gitmeden önce, beş adıma yeniden bakalım.

Gerekli Adımlar

Nokta çizecek 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, yöntemi kullanarak WebGL Rendering bağlam nesnesini elde ediyoruz. getContext().

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

Üç nokta çizdiğimiz için, 3 boyutlu koordinatlarla üç köşe tanımlıyor ve bunları tamponlarda saklıyoruz.

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

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

Vertex Shader - Verilen örneğin köşe gölgelendiricisinde, 3B koordinatları depolamak için bir vektör niteliği tanımlıyoruz ve bunu gl_position değişken.
gl_pointsizenoktaya bir boyut atamak için kullanılan değişkendir. Punto boyutunu 10 olarak belirledik.

var vertCode = 'attribute vec3 coordinates;' +

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

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 to Buffer Objects

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

Step 5 − Drawing the Required Object

Yöntemi kullanıyoruz drawArrays()puan çizmek için. Çizmek istediğimiz nokta sayısı üç olduğu için sayma değeri 3'tür.

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

Örnek - WebGL kullanarak Üç Nokta çizin

İşte üç noktayı çizmek için eksiksiz WebGL programı -

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

Aşağıdaki sonucu verecektir -