写在前面
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
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle>
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
