写在前面
-
WebGl（全称：Web Graphics Library ： web图形库） 是基于OpenGL ES 2.0的3D绘图协议。
-
WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
绘图一个点的步骤
- 创建HTML5 canvas
<canvas id="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 id="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
写在最后