共计 1942 个字符,预计需要花费 5 分钟才能阅读完成。
咱们在画布的核心绘制一个正方形,你能够先看看最终的成果:
代码
上面是残缺的代码,咱们后续将对外面的内容进行解说阐明:
<canvas width=200 height=200 style="outline:1px solid gray;">
十分道歉,您的浏览器不反对 canvas!
</canvas>
<!-- 顶点着色器 -->
<script type='x-shader/x-vertex' id='vs'>
void main(){gl_Position=vec4(0.0,0.0,0.0,1.0);
gl_PointSize=100.0;
}
</script>
<!-- 片段着色器 -->
<script type='x-shader/x-fragment' id='fs'>
void main(){gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
</script>
<script>
// 先获取 gl
var gl = document.getElementsByTagName('canvas')[0].getContext('webgl');
// 定义一个把着色器字符串加载成着色器对象的函数
var loadShader = function (type, source) {
// 创立着色器对象
var shader = gl.createShader(type);
// 绑定资源
gl.shaderSource(shader, source);
// 编译着色器
gl.compileShader(shader);
return shader;
};
// 别离加载顶点着色器对象和片段着色器对象
var vertexShader = loadShader(gl.VERTEX_SHADER, document.getElementById('vs').innerHTML),
fragmentShader = loadShader(gl.FRAGMENT_SHADER, document.getElementById('fs').innerHTML);
// 创立一个着色器程序
var glProgram = gl.createProgram();
// 把后面创立的两个着色器对象增加到着色器程序中
gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
// 把着色器程序链接成一个残缺的程序
gl.linkProgram(glProgram);
// 应用这个残缺的程序
gl.useProgram(glProgram);
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
</script>
绘制流程
下面的流程看起来是不是很简略,无论是简略的 3D 还是简单的 3D,须要且须要依照下面的流程进行(当然,在细节上会有一些不同)。
记住这个流程,后续的阐明也依照这个思路进行。
着色器
绘制的第一步,就是筹备好两个着色器:顶点着色器
和 片段着色器
。前者用于形容绘制的图形的点的地位,后者用于形容每个点的色彩。
可能这样说你会无奈了解,其实简略的说就是:咱们在绘图的时候,会一次性的把数据都传递给 GPU,传递给 GPU 的数据须要一些 ” 整顿 ” 后再应用,而着色器就是驻留在 GPU 上的这段 ” 整顿程序 ”。
咱们传递的数据是什么?不就是点的地位和点的色彩吗。所以,着色器就分为了顶点着色器和片段着色器(有时候也叫片元着色器),前者解决点,后者解决色彩。
定义着色器
所以,让咱们先看看这里的顶点着色器的具体代码:
void main(){gl_Position=vec4(0.0,0.0,0.0,1.0);
gl_PointSize=100.0;
}
内置变量 gl_Position 示意点的地位,gl_PointSize 示意点的大小。
咱们这里为了简略,点的地位和大小是写死的,理论能够有更丰盛的形式进行设置,这里先不阐明了。
那么,点的色彩在哪里设置?没错,在片段着色器,看看具体代码:
void main(){gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
同样的存在一个内置变量,这里叫 gl_FragColor,其就示意点的色彩。
着色器失效
目前为止,下面的两个着色器只是两段字符串,还需调用 webgl 的办法失效(这里的代码比拟固定,查看例子即可)。
数据
因为咱们这里把数据写死了,因而不须要传递,就先不再赘述了。
绘制
咱们这里写死的数据就一个点,由此间接:
gl.drawArrays(gl.POINTS, 0, 1);
这样,一个点就进去了。
除了绘制点,咱们还能够绘制线和三角形,当然,绘制多个点、线或三角形的时候,也有更丰盛的办法,此外,除了惯例绘制办法,还有对应的更高效的索引绘制办法。