在前一篇的基础上做了以下修改
[1]shader改为从url中获取
[2]去掉了四个顶点颜色的输入,改为根据顶点同左下角的距离在fragment shader中计算着色.
现在有四个源文件组成这个demo
html文件
<html>
<head>
<!--
Date: 2018-3-19
Author: kagula
Prologue:
WebGL2的例子
Prologue:
Description:
显示一个左下角红色,右上角白色的rectangle.
Original:
[1]https://my.oschina.net/thesadabc/blog/1592866
測試環境
[1]Chrome 65.0.3325.162
[2]nginx 1.12.2
-->
<title>第二个Webgl2程序</title>
<meta charset="utf-8">
<!-- gl-matrix version 2.4.0 from http://glmatrix.net/ -->
<script type="text/javascript" src="/gl-matrix-min.js"></script>
<script type="text/javascript" src="/kagula/webgl2_helper.js"></script>
</head>
<body>
<canvas id="glCanvas" width="320" height="200"></canvas>
</body>
</html>
<script>
main();
//弄4个顶点, 4個顔色, 用来演示render流程!
function initBuffers(gl) {
// Create a buffer for the square's positions.
const positionBuffer = gl.createBuffer();
// Select the positionBuffer as the one to apply buffer
// operations to from here out.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the square.
//WebGL最后会把计算好的图像信息投影到左下角{-1,-1},右上角{1,1}的区域中。
const positions = [
1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
-1.0, -1.0,
];
// Now pass the list of positions into WebGL to build the
// shape. We do this by creating a Float32Array from the
// JavaScript array, then use it to fill the current buffer.
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(positions),
gl.STATIC_DRAW);
return {
position: positionBuffer
};
}
async function main() {
//选择器的使用
//http