写在前面
-
WebGl(全称:Web Graphics Library : web图形库) 是基于OpenGL ES 2.0的3D绘图协议。
-
WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。
绘图一个点的步骤
- 创建HTML5 canvas
<canvas width="200px" height="200px"></canvas>
- 获取画布canvas的Id
var canvas = document.getElementById('canvas');
- 获取画布webgl的上下文
var gl = canvas.getContext('webgl');
- 编写存储着色器程序
- 顶点着色器 :指定了点的位置和尺寸
//顶点着色器程序 var VSHADER_SOURCE = "void main() {" + //设置坐标 "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " + //设置尺寸 "gl_PointSize = 10.0; " + "} ";
- 片元着色器 :指定了点的颜色
//片元着色器程序 var FSHADER_SOURCE = "void main() {" + //设置颜色 "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" + "}";
- 编译着色器。三步曲
- 创建Shader(着色器)对象
Object createShader (enum type) type 两种选择 : gl.VERTEX_SHADER创建顶点着色器 , gl.FRAGMENT_SHADER 创建片段着色器。
- 将前面的着色器程序绑定到Shader对象上
shaderSource(Object shader, string source) shader :着色器对象 source :着色器程序
- 编译程序
compileShader(Object shader)
- 合并程序:将顶点着色器和片元着色器合并,并链接到程序中。四步走
- 创建一个程序对象
createProgram();
- 附件着色器
attachShader(Object program, Object shader);
- 链接着色器
linkProgram(shaderProgram);
- 使用程序
useProgram(shaderProgram);
- 绘图
gl.drawArrays(gl.POINTS, 0, 1);
附上代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="200px" height="200px"></canvas>
</body>
</html>
javascript
<script>
window.onload = function () {
//顶点着色器程序
var VSHADER_SOURCE =
"void main() {" +
//设置坐标
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//设置尺寸
"gl_PointSize = 10.0; " +
"} ";
//片元着色器程序
var FSHADER_SOURCE =
"void main() {" +
//设置颜色
"gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
"}";
//获取canvas元素
var canvas = document.getElementById('canvas');
//获取绘制webgl绘图上下文
var gl = canvas.getContext('webgl');
if (!gl) {
console.log("Failed");
return;
}
//编译着色器
// (1)创建Shader(着色器)对象
// (2)将着色器程序附加到Shader上
// (3)编译程序
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, VSHADER_SOURCE);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, FSHADER_SOURCE);
gl.compileShader(fragShader);
//合并程序
// (1)创建一个程序对象
// (2)附加着色器
// (3)链接着色器
// (4)使用程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
//绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
</script>
参考文献
- webgl API