WebGL2 기초부터 천천히

아래의 내용은 ChatGPT의 내용으로 작성했습니다.

 

먼저 WebGL2를 알기 전에 WebGL에 대해서 알아 봅시다

 

WebGL은 웹 브라우저에서 3D 그래픽을 렌더링하기 위한 JavaScript API입니다. 이 기술은 웹 브라우저를 통해 강력한 3D 그래픽을 제공하므로, 게임, 시각화, 교육 등 다양한 분야에서 사용됩니다.

 

WebGL은 OpenGL ES 2.0을 기반으로 합니다. 이 API를 사용하면, HTML5 캔버스 요소를 사용하여 3D 콘텐츠를 렌더링할 수 있습니다. WebGL은 GPU를 이용하여 처리를 수행하므로, 더욱 빠른 속도와 더 나은 성능을 제공합니다. 또한, WebGL은 다양한 표준 라이브러리를 사용하여 개발을 용이하게 할 수 있습니다.

 

WebGL을 사용하여 3D 그래픽을 렌더링하는 과정은 다음과 같습니다.

 

1. WebGL 초기화: WebGL을 초기화하고 사용할 수 있도록 합니다.

    const canvas = document.getElementById('canvas');
    const gl = canvas.getContext('webgl');

2. 그래픽 요소 정의: 렌더링할 그래픽 요소를 정의합니다.

 const vertices = [
      // 앞면
      -1, -1,  1,
       1, -1,  1,
       1,  1,  1,
      -1,  1,  1,
      // 뒷면
      -1, -1, -1,
       1, -1, -1,
       1,  1, -1,
      -1,  1, -1
    ];
    const indices = [
      // 앞면
      0, 1, 2,
      0, 2, 3,
      // 뒷면
      4, 5, 6,
      4, 6, 7,
      // 왼쪽면
      0, 3, 7,
      0, 7, 4,
      // 오른쪽면
      1, 2, 6,
      1, 6, 5,
      // 위쪽면
      3, 2, 6,
      3, 6, 7,
      // 아래쪽면
      0, 1, 5,
      0, 5, 4
    ];

3. 쉐이더 작성: 쉐이더는 GPU에서 실행되는 프로그램으로, 그래픽 요소의 색상, 위치, 텍스처 등을 정의합니다.

const vertexShaderSource = `
      attribute vec3 position;

      uniform mat4 modelViewMatrix;
      uniform mat4 projectionMatrix;

      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `;
    const fragmentShaderSource = `
      precision mediump float;

      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;

4. 쉐이더 컴파일: 쉐이더 코드를 컴파일하여 GPU에서 실행 가능한 형태로 만듭니다.

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

5. 프로그램 작성: 쉐이더와 그래픽 요소를 결합하여 WebGL 프로그램을 작성합니다.

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

6. 렌더링: 프로그램을 실행하여 3D 그래픽을 렌더링합니다.

const positionAttributeLocation = gl.getAttribLocation(program, 'position');
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);

WebGL을 사용하여 다양한 3D 콘텐츠를 만들 수 있습니다. 이를 위해서는 JavaScript, HTML, CSS 등 웹 기술과 OpenGL ES 2.0의 기본 지식이 필요합니다. 또한, WebGL을 사용하여 3D 콘텐츠를 만들기 위해서는 다양한 라이브러리와 프레임워크를 사용할 수 있습니다. 예를 들어, Three.js, Babylon.js, A-Frame 등의 라이브러리를 사용하면 더욱 쉽고 간편하게 3D 콘텐츠를 만들 수 있습니다.

 

WebGL은 브라우저에서 3D 그래픽을 렌더링하는 강력한 기술입니다. 이를 사용하여 다양한 분야에서 3D 콘텐츠를 만들고 활용할 수 있습니다.

 

이번에 WebGL2가 되면서 많은? 변화가 생겼습니다.

 

1. Vertex Array Objects이 항상 사용 가능합니다.

2. 텍스처의 크기를 셰이더에서 사용할 수 있습니다.

3. 직접적인 텍셀 조회

4. 셰이더의 반복문 제한 사라짐

5. Uniform Buffer Objects ... 등 여러가지 다양하게 추가되었습니다.

아래의 링크를 확인하시면 됩니다.

https://webgl2fundamentals.org/webgl/lessons/ko/webgl2-whats-new.html

WebGL2 새로운 기능

 

WebGL2 튜토리얼

https://webgl2fundamentals.org/webgl/lessons/ko/

WebGL2 Fundamentals