[variables] WebGL에서 속성, 균일 및 가변 변수의 차이점은 무엇입니까?

WebGL에서 속성, 균일 및 가변 변수의 차이점은 무엇입니까?

OpenGL에서 “프로그램”은 파이프 라인에서 서로 연결된 “셰이더”(작은 프로그램)의 모음입니다.

// "program" contains a shader pipeline:
//   vertex shader -> other shaders -> fragment shader
//
const program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);

셰이더는 3D 모델을 래스터 화하는 데 필요한 정점 (정점 셰이더), 도형 (지오메트리 셰이더), 테셀레이션 (테셀레이션 셰이더), 조각 (픽셀 셰이더) 및 기타 일괄 처리 작업 (계산 셰이더)을 처리합니다.

OpenGL (WebGL) 셰이더는 GLSL (GPU에서 컴파일 된 텍스트 기반 셰이더 언어)로 작성됩니다.

// Note: As of 2017, WebGL only supports Vertex and Fragment shaders

<!-- Vertex Shader -->
<script id="shader-vs" type="x-shader/x-vertex">

  // <-- Receive from WebGL application
  uniform vec3 vertexVariableA;

  // attribute is supported in Vertex Shader only
  attribute vec3 vertexVariableB;

  // --> Pass to Fragment Shader
  varying vec3 variableC;

</script>

<!-- Fragment Shader -->
<script id="shader-fs" type="x-shader/x-fragment">

  // <-- Receive from WebGL application
  uniform vec3 fragmentVariableA;

  // <-- Receive from Vertex Shader
  varying vec3 variableC;

</script>

다음 개념을 염두에 두십시오.

셰이더는 파이프 라인의 다음 셰이더 ( out, inout)로 데이터를 전달할 수 있으며 WebGL 애플리케이션 또는 이전 셰이더 ( in)의 데이터를받을 수도 있습니다 .

• Vertex 및 Fragment 셰이더 (실제로 모든 셰이더)는 uniform변수를 사용 하여 WebGL 응용 프로그램에서 데이터를받을 수 있습니다 .

  // Pass data from WebGL application to shader
  const uniformHandle = gl.glGetUniformLocation(program, "vertexVariableA");
  gl.glUniformMatrix4fv(uniformHandle, 1, false, [0.1, 0.2, 0.3], 0);
  

• Vertex Shader는 attribute필요에 따라 활성화 또는 비활성화 할 수있는 변수를 사용하여 WebGL 애플리케이션에서 데이터를 수신 할 수도 있습니다.

  // Pass data from WebGL application to Vertex Shader
  const attributeHandle = gl.glGetAttribLocation(mProgram, "vertexVariableB");
  gl.glEnableVertexAttribArray(attributeHandle);
  gl.glVertexAttribPointer(attributeHandle, 3, gl.FLOAT, false, 0, 0);
  

• Vertex Shader는 varying변수를 사용하여 데이터를 Fragment Shader에 전달할 수 있습니다 . 위의 GLSL 코드 ( varying vec3 variableC;)를 참조하십시오 .