Hello vertex attributes
Dieses WebGL-Beispiel zeigt, wie Shader-Programmierung und Benutzereingaben kombiniert werden können, indem Benutzereingaben über Vertex-Attribute an den Shader gesendet werden.
Hello World-Programm in GLSL
Anleitung zum Senden von Eingaben an ein Shader-Programm durch Speichern von Daten im GPU-Speicher.
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>
js
window.addEventListener("load", setupWebGL, false);
let gl;
let program;
function setupWebGL(evt) {
window.removeEventListener(evt.type, setupWebGL, false);
if (!(gl = getRenderingContext())) return;
let source = document.querySelector("#vertex-shader").innerHTML;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, source);
gl.compileShader(vertexShader);
source = document.querySelector("#fragment-shader").innerHTML;
const 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)) {
const linkErrLog = gl.getProgramInfoLog(program);
cleanup();
document.querySelector("p").textContent =
`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",
(evt) => {
const clickXRelativeToCanvas = evt.pageX - evt.target.offsetLeft;
const 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,
);
}
let 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);
}
}
Der Quellcode dieses Beispiels ist auch auf GitHub verfügbar.