WebGL 소개

16143 단어 webdevprogrammingjavascriptbeginners
WebGL이란?
WebGL은 웹 브라우저에서 3D 그래픽을 작성하는 데 사용되는 플랫폼 간 무료 API입니다.기초OpenGL ES 2.0로 WebGL은 OpenGL 음영처리 언어GLSL를 사용하며 표준 OpenGL API에 대한 친숙도를 제공합니다.
WebGL의 주요 기능은 다음과 같습니다.
  • 플랫폼 및 브라우저 간
  • GPU 3D 가속
  • GLSL 지원 네이티브 API
  • 캔버스 안에서 작업
  • DOM 인터페이스 통합
    • 작업 원리
    일부 도형을 보여주기 위해서, 우리는 무엇이 Rendering Pipeline 이고, 그것이 어떻게 작동하는지 알아야 한다.
    렌더 파이프는 3D 도면을 렌더링할 때 WebGL이 취하는 일련의 단계입니다.GPU는 고도로 병렬된 프로세서이기 때문에 이런 렌더링 모델은 파이프급이 GPU 처리 단원에서 동시에 운행하는 데 매우 적합하다.
    다음 그림에서는 렌더링 파이프의 각 단계를 볼 수 있습니다.

    한 단계의 출력은 다음 단계의 입력으로 사용된다.Vertex Shader과Fragment Shader단계는 프로그래밍이 가능하기 때문에 우리는 스스로 프로그래밍을 할 수 있다.
    정점 착색기 처리 도형의 정점 처리.이 단계에서 우리는 반드시 정점을 가진 흐름을 제공해야 한다.그리고 정점 착색기는 이 흐름에서 하나의 정점을 받아들여 출력 정점 흐름의 단일 정점을 생성한다.입력 정점에서 출력 정점까지 1:1의 매핑이 있어야 합니다.이것은 회전, 변환 또는 배율 조정과 같은 교점 변환을 적용할 수 있는 단계입니다.
    세션 착색기는 Fragment 단계에서 생성된 Rasterization 색을 한 그룹의 색과 깊이값으로 처리합니다.이것은 기본체가 격자화된 후의 단계이다(격자화 단계에서 기하학적 기본체는 픽셀 구역과 관련된 부분으로 전환된다).primitive 덮어쓴 모든 픽셀 샘플에 대해 "세션"을 생성합니다.모든 세션에는 하나 Window Space position 와 몇 개의 다른 값이 있으며, 마지막 Vertex Processing 단계의 모든 정점 삽입값 출력 값을 포함한다.이것은 우리가 도형에 색깔이나 무늬를 적용할 수 있는 단계이다.
    다음 절에서 우리는 간단한 삼각형을 어떻게 과장하는지 예로 볼 것이다.이를 위해, 우리는 정점 착색기와 Fragmend 착색기를 프로그래밍할 것이다.
    WebGL에서 삼각형 그리기
    앞서 설명한 대로 그래픽을 표현하기 위해 캔버스를 정의해야 하므로 다음과 같은 간단한 HTML 템플릿을 만들 것입니다.
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>WebGL Sample Triangle</title>
    <meta name="author" content="Martín Lamas" />
    <meta name="description" content="WebGL Triangle" />
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
      // We will put our WebGL code here
    </script>
</body>

</html>
    캔버스의 width와 height 속성은 뷰포트 크기를 정의하지만 WebGL은 우리가 원하는 모든 정점이 매번 정점 착색기가 실행될 때마다 표준화된 장치 좌표에 있기를 바란다.즉, 각 정점의x,y과z 좌표는 -1.0과1.0 사이에 있어야 한다.이 범위를 벗어난 좌표는 보이지 않습니다.이러한 표준화된 장치 좌표와 뷰포트의 크기는 나중에 래스터에 제공되어 화면에서 2D 좌표/픽셀로 변환되므로 뷰포트의 크기와 종횡비를 고려해야 합니다.
    우리는 사각형 화포를 사용하여 이 예시를 더욱 간단하게 할 것이다.다음 그림과 같이 세 개의 정점을 정의하여 삼각형을 만들어야 합니다.

    스크립트 섹션에서는 먼저 정점 배열을 설명합니다.
    const vertices = new Float32Array([
   0.0,  0.5, 0.0, // First vertex
  -0.5, -0.5, 0.0, // Second vertex
   0.5, -0.5, 0.0  // Third vertex
]);
    우리는 2차원에서 그렸기 때문에 z 좌표를 건너뛰어야 한다.
    그런 다음 컨텍스트를 초기화하고 교점 셰이더를 먼저 정의합니다.
    const gl = document.getElementById("canvas").getContext("webgl");

// Vertex shader
const vertexShader = `
    attribute vec4 position;
    void main() {
        gl_Position = position;
    }`;
    우리가 이전에 알고 있는 바와 같이, 정점 착색기는 모든 입력 정점을 운행하고, 출력으로 새로운 정점을 생성한다.이 예에서 우리는 position 속성을 입력으로 사용한다(속성은 버퍼에서 데이터를 얻는 정점 착색기의 입력이고 잠시 후에 상세하게 설명할 것이다). 그리고 출력을 gl_Position 변수에 배치한다(내장gl_Position 변수는 출력 정점을 정점 착색기에 저장한다).변환이 수행되지 않으므로 출력 정점은 입력 정점과 동일합니다.잠시 후 입력 정점 그룹을 사용하여 버퍼를 초기화하는 방법을 볼 수 있습니다.
    이제 세그먼트 셰이더를 정의합니다.
    // Fragment shader
const fragmentShader = `
    precision mediump float;
    uniform vec4 color;
    void main() {
        gl_FragColor = color;
    }`;
    여기서, 우리는 세션 색상의 일치성을 저장합니다. (일치성은 한 그림에서 호출된 모든 정점에 대해 변하지 않는 값입니다.)정점 착색기와 마찬가지로 내장gl_FragColor 변수는 착색기의 출력 색을 저장합니다.보시다시피 색상 변환은 이루어지지 않았습니다.
    마지막으로 GPU에서 실행할 수 있도록 이러한 착색기를 컴파일하고 WebGL 프로그램을 정의하여 이러한 착색기를 첨부합니다.
    // Compile vertex shader
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShader);
gl.compileShader(vs);

// Compile fragment shader
const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fragmentShader);
gl.compileShader(fs);

// Create and initialize the WebGL program
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);
    일단 우리가 이 착색기를 정의하고 컴파일하면, 우리는 반드시 삼각형의 입력 데이터를 제공해야 한다.
    우선, 우리는 그룹 버퍼를 만들고, 정점 좌표로 그것을 채울 것이다.우리가 이전에 정의한 정점 착색기는 position 속성을 통해 이 버퍼를 입력으로 사용할 것이다.이를 위해, 우리는 gl.createBuffer 방법으로 버퍼를 만들고, 이를 gl.ARRAY_BUFFER 형식으로 귀속시킵니다.그리고 우리는 gl.bufferData 방법으로 데이터로 이 버퍼를 채운다.마지막으로, 우리는position 속성을 버퍼 구역을 가리키며, 각각 gl.vertexAttribPointer와 gl.enableVertexAttribArray 방법으로 그것을 귀속시킬 것이다.
    // Shader attribute variable for position
const position = gl.getAttribLocation(program, "position");

// Create the GPU array buffer with the vertices
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(
  position, // Target
  3,        // Chunk size (send the values 3 by 3)
  gl.FLOAT, // Type
  false,    // Normalize
  0,        // Stride
  0         // Offset
);
gl.enableVertexAttribArray(position);
    이제 gl.uniform4f 방법을 사용하여 색상을 정의하고 색상 균일성을 통해 세그먼트 셰이더에 전달합니다.
    // Shader uniform variable for color (read-only)
const color = gl.getUniformLocation(program, "color");

// Set color        R  G  B  A
gl.uniform4f(color, 0, 1, 0, 1);
    색상 좌표는 표준화된 장치 좌표 정의를 사용해야 하므로 각 좌표는 다음 공식을 사용하여 계산됩니다RGBA normalized coordinate = RGBA coordinate / 255.
    이제 우리는 삼각형을 그리는 데 필요한 모든 것이 생겼다.그런 다음 캔버스 배경을 지우고 gl.drawArrays 방법을 사용하여 삼각형을 렌더링합니다.
    // Set the clear color
gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Clear canvas
gl.clear(gl.COLOR_BUFFER_BIT);

// Render
gl.drawArrays(
  gl.TRIANGLES, // Mode
  0,            // Start
  3             // Count
);
    gl.drawArrays 방법은 유계수 그룹 버퍼를 입력 데이터로 사용한다.이 예에서 세 개의 정점은 버퍼에서 추출하고 gl.TRIANGLES 모드의 렌더링 모양을 선택합니다.WebGL에서는 다음 형태를 사용할 수 있습니다.

    보시다시피, 우리는 삼각형의 테두리를 간단하게 gl.LINE_LOOP 값 교체 모드로 렌더링할 수 있습니다.
    마지막으로, 우리는 삼각형이 웹 브라우저에서 템플릿을 열 수 있는 것을 볼 수 있다.다음과 같습니다.

    총결산
    현재 대부분의 웹 브라우저에서 WebGL API를 사용할 수 있습니다.웹 응용 프로그램에서 가속화된 2D 및 3D 그래픽을 렌더링하는 데 사용할 수 있습니다.일부 고급 라이브러리는 WebGL API 위에 구축되어 프로그래머의 작업을 더욱 쉽게 합니다.그러나 기본 WebGL API와 렌더링 파이프의 작동 원리를 이해하는 것은 흥미롭다.
    미래의 글에서 우리는 3D 모양을 어떻게 과장하고 회전이나 평이와 같은 변환을 어떻게 응용하는지 보게 될 것이다.또한 텍스쳐를 적용하는 방법과 WebGL에서 작업하는 흥미로운 라이브러리도 알아봅니다.
    WEBGL 프로젝트를 구축하고 있습니다!그중 일부는
    트위터:-
    Instagram:-
    학점-
    노마드코더 / 타입스크립트 이론
    html 현재 초점이 있는 컨트롤 획득

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage