webGL，主要通过 vertex shader （顶点着色器），fragment shader （片元着色器）来进行渲染。
渲染流程
- 通过 createProgram() 创建了 program 对象
- 通过 createShader() 创建 sharder 对象，
并通过 shaderSource() 绑定原始的 sharder 程序，这个后续有介绍，
绑定完成之后执行 complieShader() 完成 sharder 对象的创建 - 通过 attachShader 将 shader 绑定到 project 上
- 链接、使用、绘制
渲染流程
完整示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个WebGL尝试</title>
<script src="webgl-utils.js"></script>
</head>
<body>
<div>
<!--WebGL 是JavaScript API， 内容都写在HTML5 的<canvas> 标签底下-->
<canvas id="canvas" width="300" height="300"></canvas>
</div>
<script type="text/javascript">
function initShaders(gl){
var glProgram = gl.createProgram();
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//顶点着色器程序
var VSHADER_SOURCE =
"void main() {" +
//设置坐标
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//设置尺寸
"gl_PointSize = 100.0; " +
"} ";
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
gl.shaderSource(vertexShader,VSHADER_SOURCE);
gl.shaderSource(fragmentShader,FSHADER_SOURCE);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
gl.attachShader(glProgram,vertexShader);
gl.attachShader(glProgram,fragmentShader);
gl.linkProgram(glProgram);
gl.useProgram(glProgram);
gl.drawArrays(gl.POINTS,0,1);
}
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if(!gl){
console.log("该浏览器不支持WEBGL");
}else{
initShaders(gl);
}
</script>
</body>
</html>
效果如下：
显示一个小红块
下面我们来具体分析一下代码：
代码着色器部分：
var VSHADER_SOURCE =
"void main() {" +
//设置坐标
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//设置尺寸
"gl_PointSize = 100.0; " +
"} ";
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
vertex shader 顶点着色器
顾名思义，顶点着色器主要负责定义图形的顶点坐标，大小等位置相关的信息。
在main函数中，我们将位置信息赋给gl_Position，将顶点大小赋值给gl_PointSize.
fragment shader 片元着色器
片元着色器主要是定义颜色等属性。
这里我们简单的通过 gl_FragColor 告诉着色器点的颜色为 vec4(1.0, 0.0, 0.0, 1.0)
然后我们进行渲染
第一步，创建和初始化一个WebGLProgram对象。
var glProgram = gl.createProgram();
第二步，创建着色器对象，并绑定到项目对象上。
2.1 创建Shader对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
2.2 设置 shader 着色器的GLSL代码
gl.shaderSource(vertexShader,VSHADER_SOURCE);
gl.shaderSource(fragmentShader,FSHADER_SOURCE);
2.3 编译 shader ，使其成为为二进制数据，然后就可以被WebGLProgram对象所使用.
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
2.4 添加一个片段或者顶点着色器到WebGLProgram对象上
gl.attachShader(glProgram,vertexShader);
gl.attachShader(glProgram,fragmentShader);
2.5 链接一个创建好的WebGLProgram对象
gl.linkProgram(glProgram);
2.6 把定义好的WebGLProgram对象添加到当前渲染状态中。
gl.useProgram(glProgram);
第三步，绘制
这样我们就完成了一个简单的webGL的渲染流程。
网友评论