html js画受控制的点,WebGL（画一个点）

什么是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文件

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;

}

上面这段代码很简单，就是创建一个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的感觉。哈哈，那就对了。运行成功后，应该是这个样子。

分步介绍

未完待续……