设置 WebGL 渲染上下文的样板代码
到目前为止，您已经很习惯于看到重复的 HTML、CSS 和 JavaScript 代码片段。因此，我们从现在开始将隐藏它们。这将使我们能够专注于与学习 WebGL 最相关的有趣代码片段。
具体来说，HTML 有一个包含页面描述性文本的 <p> 元素，它也可能包含错误消息；一个 <canvas> 元素；以及一个可选的 <button>。CSS 包含针对 body、canvas 和 button 的规则。任何额外的非平凡 CSS 和 HTML 将显示在具体示例的页面上。
在后续示例中，我们将使用一个 JavaScript 帮助函数 getRenderingContext() 来初始化 WebGL 渲染上下文。到目前为止，您应该能够理解该函数的作用。基本上，它从 canvas 元素获取 WebGL 渲染上下文，初始化绘图缓冲区，将其清空为黑色，并返回初始化后的上下文。如果出现错误，它会显示一条错误消息并返回 null。
最后，所有 JavaScript 代码都将在一个立即函数中运行，这是一种常见的 JavaScript 技术（请参阅 函数）。函数的声明和调用也将被隐藏。
HTML
html
<p>[ Some descriptive text about the example. ]</p>
<button>[ Optional button element. ]</button>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
CSS
css
body {
text-align: center;
}
canvas {
display: block;
width: 280px;
height: 210px;
margin: auto;
padding: 0;
border: none;
background-color: black;
}
button {
display: block;
font-size: inherit;
margin: auto;
padding: 0.6em;
}
JavaScript
js
function getRenderingContext() {
const canvas = document.querySelector("canvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const gl =
canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl) {
const paragraph = document.querySelector("p");
paragraph.textContent =
"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;
}
此示例的源代码也可在 GitHub 上获取。