dom / latest / webgl_api / by_example / hello_vertex_attributes.html /

Hello vertex attributes

This WebGL example demonstrates how to combine shader programming and user interaction by sending user input to the shader using vertex attributes.

Hello World program in GLSL

How to send input to a shader program by saving data in GPU memory.

<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 clickXRelativeToCanvas =
          evt.pageX - evt.target.offsetLeft;
      var clickXinWebGLCoords =
          2.0 * (clickXRelativeToCanvas- 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.

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Hello_vertex_attributes