什么是WebGL
WebGL使得在支持HTML的canvas标签的浏览器中，不需要安装任何插件，便可以使用基于OpenGL ES 2.0的API在canvas中进行3D渲染。WebGL程序包括用JavaScript写的控制代码，以及在图形处理单元（GPU）中执行的特效代码（shader code）。WebGL元素可以和其他 HTML元素混合使用，并且可以和网页其他部分或者网页背景结合起来。—— MDN
虽然WebGL也是利用HTML的canvas元素，但是比2D难以驾驭多了。下面先从画一个点开始，进入WebGL的世界。
准备一个html文件
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
canvas {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 1px solid #999;
}
</style>
</head>
<body>
<canvas width="1000" height="500"></canvas>
<!--引入js路径-->
<script src="gl.js" charset="utf-8"></script>
</body>
</html>
上面这段代码很简单，就是创建一个html文件里面包含一个canvas元素，并设置一下相关样式。
创建gl.js文件
const gl = document.querySelector('canvas').getContext('webgl')
if (!gl) alert('Failed to get webgl')
// 着色器源代码
const VSHADER_SRC = `
void main() {
gl_Position = vec4(.0, .0, .0, 1.0);
gl_PointSize = 10.0;
}
`
const FSHADER_SRC = `
void main() {
gl_FragColor = vec4(.0, .0, 1.0, 1.0);
}
`
gl.clearColor(1.0, .0, .0, .2)
gl.clear(gl.COLOR_BUFFER_BIT)
// 创建着色器对象
const fShader = gl.createShader(gl.FRAGMENT_SHADER)
const vShader = gl.createShader(gl.VERTEX_SHADER)
// 将着色器源码写入对象
gl.shaderSource(vShader, VSHADER_SRC)
gl.shaderSource(fShader, FSHADER_SRC)
// 编译着色器
gl.compileShader(vShader)
gl.compileShader(fShader)
// 创建程序
const program = gl.createProgram()
// 程序绑定着色器
gl.attachShader(program, vShader)
gl.attachShader(program, fShader)
// 链接程序
gl.linkProgram(program)
// 使用程序
gl.useProgram(program)
// 绘制点
gl.drawArrays(gl.POINTS, 0, 1)
如果你没有研究过WebGL一定对上面的代码很陌生，是不是没有一点JavaScript的感觉。哈哈，那就对了。运行成功后，应该是这个样子。
分步介绍
未完待续……
网友评论