webgl是一种3D绘图协议，衍生于 OpenGL ES2.0，可以结合HtmI5和JavaScript 在网页上绘制和渲染二/三维图形

webgl开源框架

• 1.Three.js : JavaScript 3D WebGL库
• 2.Babylonjs:Web3D图形引擎
• 3.KickJs:Web的开源图形和游戏引擎
• 4.ClayGL:构建可扩展的Web3D应用程序
• 5PlayCanvas:网络游戏和3D图形引擎
• 6.WebGLStudiojs和Litescenejs:开源Web 3D图形编辑器和创建器
• 7.Luma:Uber的3D WebGL可视化库
• 8A-Frame是用于构建VR(虚拟现实)体验的Web框架

初始化着色器流程

• 创建着色器对象(gl.createShader())
• 向着色器对象中填充着色器程序的源代码(gl.shaderSource())
• 编译着色器(gl.compileShader())
• 创建程序对象(gl.createProgram)
• 为程序对象分配着色器(gl.attachShader)
• 链接程序对象(gl.linkProgram)
• 使用程序对象(gl.useProgram)

demo案例：

此浏览器不支持canvas

封装的initShader方法：

function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {const vertexShader = gl.createShader(gl.VERTEX_SHADER);const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) // 指定顶点着色器的源码gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE) // 指定片元着色器的源码// 编译着色器gl.compileShader(vertexShader)gl.compileShader(fragmentShader)// 创建一个程序对象const program = gl.createProgram();gl.attachShader(program, vertexShader)gl.attachShader(program, fragmentShader)gl.linkProgram(program)gl.useProgram(program)return program;
}