Hello GLSL
此 WebGL 示例演示了一個非常基礎的 GLSL 著色器程式，它繪製了一個純色正方形。
注意： 此示例很可能在所有現代桌面瀏覽器中都能正常工作。但它可能在某些移動瀏覽器或舊版瀏覽器中無法正常工作。如果畫布保持空白，您可以檢視下一個示例的輸出，它繪製的內容完全相同。但在繼續下一個示例之前，請記住仔細閱讀本頁上的解釋和程式碼。
GLSL 中的 Hello World 程式
一個非常簡單的第一個著色器程式。
html
<script type="x-shader/x-vertex" id="vertex-shader">
#version 100
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
gl_PointSize = 64.0;
}
</script>
html
<script type="x-shader/x-fragment" id="fragment-shader">
#version 100
void main() {
gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
}
</script>
js
const canvas = document.querySelector("canvas");
const gl = getRenderingContext();
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);
const 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}`;
throw new Error("Program failed to link");
}
let buffer;
initializeAttributes();
gl.useProgram(program);
gl.drawArrays(gl.POINTS, 0, 1);
cleanup();
function getRenderingContext() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const gl = canvas.getContext("webgl");
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;
}
function initializeAttributes() {
gl.enableVertexAttribArray(0);
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
}
function cleanup() {
gl.useProgram(null);
if (buffer) {
gl.deleteBuffer(buffer);
}
if (program) {
gl.deleteProgram(program);
}
}
此示例的原始碼也可在 GitHub 上找到。