这个例子还是由四个文件组成
html源文件清单
<html>
<head>
<!--
Date: 2018-3-19
Author: kagula
Description:
相对于上一个例子
[1]去掉了透视投影变换.
[2]添加了纹理显示
[3]添加了打印投影后的纹理数据.
Original:
[1]《利用WebGL2 实现Web前端的GPU计算》
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个顶点, 用来演示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://www.runoob.com/jsref/met-document-queryselector.html
const canvas = document.querySelector("#glCanvas");
// Initialize the GL context
//為了获取WebGL2上下文,getContext方法传入的参数是"webgl2"