webGL 마지막정리

webGL

web Graphics Library

• 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 Javascript API
• webGL은 컴퓨터에 있는 GPU에서 실행된다.
  • GPU에서 실행가능 한 코드를 함수 쌍 형태로 제공해야한다. vertexShader, fragmentShader라고 불리고 GLSL(openGL shading Language)로 작성되어있고 이 두개를 합쳐서 program이라고 부른다.
• webGL은 rasterization engine
  • rasterization? Vector graphics를 pixel pattern으로 변환하는 것

개념

• webGLBuffer : opaque buffer object storing data such as vertices or colors. (vertices,colors와 같은 값들을 가지고 있는 object)
• webGLProgram : 컴파일된 webGLShader의 조합(vertexShader+fragmentShader)
• webGLTexture : opaque texture object providing storage and state for texturing operations. (texture 작업을 위한 상태와 저장소 제공)
• vertex shader : vertex위치를 계산
• fragment shader: 현재 그려지는 primitive 화소의 색상을 계산

기존 Position 변경 연산에서 Matrix 연산으로 바꾸어 연산

gl context에서 program을 불러오고 uniform으로 Matrix를 넘기기 전에

modelView matrix를 조작함으로써 matrix 연산 효과를 적용시킬 수 있음

mat4.scale(modelViewMatrix, modelViewMatrix, [scaleX, scaleY, 1.0]);

this.gl.useProgram(programInfo.program);

this.gl.uniformMatrix4fv(
	programInfo.uniformLocations.projectionMatrix,
    false,
    projectionMatrix
);

this.gl.uniformMatrix4fv(
    programInfo.uniformLocations.modelViewMatrix,
    false,
    modelViewMatrix
);

mat4 연산 종류

• mat4.scale( targetMatrix, originMatrix, [ scaleX, scaleY, scaleZ ] )

  • scaelX, Y, Z 를 통하여 scale연산을 할 수 있다
  • 기본값은 1.0 이며 -1.0 일 경우 반전, 0.5일 경우 1/2배로 축소, 2.0 일 경우 2배 확대 등이 가능하다.

• mat4.translate( targetMatrix, originMatrix, [ translateX, translateY, translateZ ] )

  • translateX, Y, Z 를 통하여 translate연산을 할 수 있다

  • 기본값은 0.0 이며 viewPort에서 설정한 만큼을 기준으로 translate을 할 수 있다.

    예를들어 viewPort가 X, Y, Z 축( -1, -1, -1 ) ~ ( 1, 1, 1) 사이의 좌표일 경우 중심 ( 0, 0, 0 )을 기준으로

    이동할 수 있다.

• mat4.rotate( targetMatrix, originMatrix, degree, [ xAxis, yAxis, zAxis] )

  • 설정한 xAxis, yAxis, zAxis를 기준으로 degree만큼 rotate가 가능하다.

  • degree의 기본값은 0.0이며 라디안으로 변환하여 대입해줘야 한다

    ex) 90 도 회전 -> degree = ( 90 / 180 ) * Math.PI

  • xAxis, yAxis, zAxis 의 기본값은 0.0이며 0.0 ~ 1.0 사이의 값을 선택하여 사용한다.

    ex ) x축 회전일 경우 xAxis = 1.0, yAxis = 0.0, zAxis = 0.0으로 설정한다

  • 여러 축을 기준으로 회전도 가능하다

    ex ) xAxis = 1.0, yAxis = 1.0, zAxis = 0.0 일 경우 x축과 y축 가운데에 y = x 선을 기준으로 회전을 한다.

여러 모델에서의 matrix 연산

다른 모델을 그릴경우 기존에 적용시켰던 modelViewMatrix에 대한 matrix연산 초기화가 필요하다

초기화에는 두가지 방법을 생각해볼 수 있다.

1. modelViewMatrix의 초기상태를 저장해놓고 필요할 경우 불러와 초기화
2. 필요한 만큼 기존에 적용됬던 연산들을 역으로 연산

shader가 데이터를 받는 방법

1. Attribute & buffer buffer는 GPU에 올리는 2진 데이터 배열로 위치,법선,texture좌표, vertex 등을 가지고 있다. attribute는 buffer에서 데이터를 가져오고 vertex shader에 제공하는 방법을 지정하는데 사용 buffer는 vertex shader가 지정한 횟수만큼 실행이되고 실행될 때마다 지정된 각 buffer에서 다음 값을 가져와서 attribute에 할당한다.
2. Uniform uniform은 shader program을 실행하기 전에 설정하는 사실상 전역 변수
3. Texture texture는 shader program에서 무작위로 접근할 수 있는 데이터 배열
4. Varying vertex shader가 fragment shader에 데이터를 넘기는 방법 렌더링되는 점,선,삼각형에 따라서 vertex shader에 의해 설정된 varying 값은 fragment shader를 실행하는 동안 보간된다.

기본

clip space좌표는 canvas의 크기에 상관없이 항상 -1 ~ +1

필터기능

fragment shader의 값을 조정하여 필터효과를 나타냈다.

precision mediump float;

float의 값의 정확도를 중간정도로 설정(highp,lowp존재)

gl_FragColor.r = weightColor.r * chroma[0] + luminance;
      gl_FragColor.g = weightColor.g * chroma[1] + luminance;
      gl_FragColor.b = weightColor.b * chroma[2] + luminance;

• R,G,B 조절 r,g,b의 값에 chroma의 값을 곱함으로써 조절 *chroma : 채도
• 밝기조절 r,g,b의 값에 luminance의 값을 더함으로써 조절 r,g,b값에 일정한 값을 더하면 밝기 조절이 가능하다.

 gl_FragColor.r = (weightColor.r + weightColor.g + weightColor.b) / 3.0 + luminance;
      gl_FragColor.g = (weightColor.r + weightColor.g + weightColor.b) / 3.0 + luminance;
      gl_FragColor.b = (weightColor.r + weightColor.g + weightColor.b) / 3.0 + luminance;

• 흑백처리 r,g,b값을 더해서 3으로 나눈값을 r,g,b에 준다.

ec2 onePixel = vec2(7.0, 7.0) / u_textureSize;
// texture 좌표의 1픽셀 계산 -> 한 개의 픽셀의 크기를 키우면 blur값이 강하게 나온다.

    vec4 colorSum =
      texture2D(uSampler, vTextureCoord + onePixel * vec2(-1, -1)) * u_kernel[0] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2( 0, -1)) * u_kernel[1] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2( 1, -1)) * u_kernel[2] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2(-1,  0)) * u_kernel[3] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2( 0,  0)) * u_kernel[4] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2( 1,  0)) * u_kernel[5] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2(-1,  1)) * u_kernel[6] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2( 0,  1)) * u_kernel[7] +
      texture2D(uSampler, vTextureCoord + onePixel * vec2( 1,  1)) * u_kernel[8] ;
      
    vec4 weightColor = colorSum / u_kernelWeight;
    // u_kernelWeight : kernel의 가중치(kernel에 있는 모든 값의 합 또는 1.0)

• blur 처리 onePixel의 값을 크게주어 블러효과를 크게 해준다.

참고

MDN https://developer.mozilla.org/ko/docs/Web/API/WebGL_API WebGL Fundamentals https://webglfundamentals.org/webgl/lessons/ko/webgl-image-processing.html