Introduction aux attributs de vertex
====================================

* « Précédent
* Suivant »

Avec cet exemple, on voit comment combiner la programmation des *shaders* et les interactions utilisateurs grâce aux attributs des *vertex*.

### Un *Hello World* en GLSL

Voici comment envoyer des données saisies à un programme de manipulation des *shaders* en utilisant la mémoire GPU.
```

<p>
  Voici le premier exemple où on manipule des attributs et où on envoie des
  données au GPU. Cliquez sur le canevas pour modifier la position horizontale
  du carré.
</p>
<canvas
 >Il semblerait que votre navigateur ne supporte pas l'élément HTML5
  canvas.</canvas
>
```


```
body {
  text-align: center;
}
canvas {
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}
```



```html
<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>
```



```html
<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>
```


```
;(function(){
```



```js
"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);
}
```


```
function getRenderingContext() {
  var canvas = document.querySelector("canvas");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  var gl =
    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  if (!gl) {
    var paragraph = document.querySelector("p");
    paragraph.innerHTML =
      "Failed to get WebGL context." +
      "Your browser or device may not support WebGL.";
    return null;
  }
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR\_BUFFER\_BIT);
  return gl;
}
```


```
})();
```


Le code source de cet exemple est également disponible sur GitHub.

* « Précédent
* Suivant »