WebGL-확장

이 장에서는 WebGL을 사용하여 삼각형의 배율을 수정하는 방법을 보여주는 예제를 사용합니다.

스케일링

크기 조정은 객체의 크기를 늘리거나 줄이는 것입니다. 예를 들어 삼각형에 [a, b, c] 크기의 정점이있는 경우 정점 [2a, 2b, 2c]가있는 삼각형은 크기가 두 배가됩니다. 따라서 삼각형의 배율을 조정하려면 각 정점에 배율 인수를 곱해야합니다. 특정 정점의 크기를 조정할 수도 있습니다.

삼각형의 크기를 조정하기 위해 프로그램의 정점 셰이더에서 균일 한 행렬을 만들고이 행렬과 좌표 값을 곱합니다. 나중에 대각선 위치 (마지막 대각선 위치 1)에서 x, y, z 좌표의 배율 인수를 갖는 4x4 대각 행렬을 전달합니다.

필수 단계

삼각형의 크기를 조정하는 WebGL 응용 프로그램을 만들려면 다음 단계가 필요합니다.

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

이 단계에서는 다음을 사용하여 WebGL 렌더링 컨텍스트 객체를 얻습니다. getContext().

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

삼각형을 그리기 때문에 삼각형의 세 꼭지점을 전달하고 버퍼에 저장해야합니다.

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

이 단계에서는 정점 셰이더 및 조각 셰이더 프로그램을 작성하고 컴파일 한 다음이 두 프로그램을 연결하여 결합 된 프로그램을 만들어야합니다.

Vertex Shader− 프로그램의 버텍스 쉐이더에서 3D 좌표를 저장할 벡터 속성을 정의합니다. 이와 함께 스케일링 계수를 저장할 균일 행렬을 정의하고 마지막으로이 두 값을 곱하여gl_position 정점의 최종 위치를 유지합니다.

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

Fragment Shader − 프래그먼트 셰이더에서 간단히 프래그먼트 색상을 gl_FragColor 변하기 쉬운.

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

Step 4 − Associate the Shader Programs with the Buffer Objects

이 단계에서는 버퍼 개체를 셰이더 프로그램과 연결합니다.

Step 5 − Drawing the Required Object

인덱스를 사용하여 삼각형을 그리기 때문에 drawArrays()방법. 이 방법에는 고려할 정점 / 요소의 수를 전달해야합니다. 삼각형을 그리므로 3을 매개 변수로 전달합니다.

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

예 – 삼각형 크기 조정

다음 예는 삼각형의 크기를 조정하는 방법을 보여줍니다.

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

이 예제를 실행하면 다음 출력이 생성됩니다.