MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

Hello vertex attributes

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

쉐이더 프로그래밍과 유저 인터페이스를 정점 속성을 이용하여 합치기.

Hello World program in GLSL

어떻게 GPU 메모리에 데이터를 저장함으로써 쉐이더 프로그램에 입력 값을 넣을 수 있을까? 

<script type="x-shader/x-vertex" id="vertex-shader">
#version 100
precision highp float;

attribute float position;

void main() {
  gl_Position = vec4(position, 0.0, 0.0, 1.0);
  gl_PointSize = 64.0;
}
</script>
<script type="x-shader/x-fragment" id="fragment-shader">
#version 100
precision mediump float;
void main() {
  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
}
</script>
"use strict"
window.addEventListener("load", setupWebGL, false);
var gl,
  program;
function setupWebGL (evt) {
  window.removeEventListener(evt.type, setupWebGL, false);
  if (!(gl = getRenderingContext()))
    return;

  var source = document.querySelector("#vertex-shader").innerHTML;
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader,source);
  gl.compileShader(vertexShader);
  source = document.querySelector("#fragment-shader").innerHTML
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader,source);
  gl.compileShader(fragmentShader);
  program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.detachShader(program, vertexShader);
  gl.detachShader(program, fragmentShader);
  gl.deleteShader(vertexShader);
  gl.deleteShader(fragmentShader);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    var linkErrLog = gl.getProgramInfoLog(program);
    cleanup();
    document.querySelector("p").innerHTML =
      "Shader program did not link successfully. "
      + "Error log: " + linkErrLog;
    return;
  }
   
  initializeAttributes();
  gl.useProgram(program);
  gl.drawArrays(gl.POINTS, 0, 1);
   
  document.querySelector("canvas").addEventListener("click",
    function (evt) {
      var clickXrelativToCanvas =
          evt.pageX - evt.target.offsetLeft;
      var clickXinWebGLCoords =
          2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2)
          / gl.drawingBufferWidth;
      gl.bufferData(gl.ARRAY_BUFFER,
        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
      gl.drawArrays(gl.POINTS, 0, 1);
    }, false);
}

var buffer;
function initializeAttributes() {
  gl.enableVertexAttribArray(0);
  buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
}

window.addEventListener("beforeunload", cleanup, true);
function cleanup() {
  gl.useProgram(null);
  if (buffer)
    gl.deleteBuffer(buffer);
  if (program)
    gl.deleteProgram(program);
}

The source code of this example is also available on GitHub.

문서 태그 및 공헌자

 이 페이지의 공헌자: woojin.jo
 최종 변경: woojin.jo,