<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
void main(void) {gl_Position = vec4(v3Position, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
void main(void) {gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0);
}
</script>
<script>
var canvas = document.getElementById('canvas');
var webgl = canvas.getContext('webgl');
var v3PositionIndex = 0;
// 用来设置视口
webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
// 创建 shader
var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
// 指定 shader 数据
webgl.shaderSource(vertexShaderObject, document.getElementById("shader-vs").innerText);
webgl.shaderSource(fragmentShaderObject, document.getElementById("shader-fs").innerText);
// 编译 shader
webgl.compileShader(vertexShaderObject);
webgl.compileShader(fragmentShaderObject);
if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) {alert("error: vertexShaderObject");
}
if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) {alert("error: fragmentShaderObject");
}
// 创建 program
var programObject = webgl.createProgram();
// 连接 shader
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
// 为 v3Position 赋值
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
webgl.linkProgram(programObject);
if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) {alert("error: programObject");
}
webgl.useProgram(programObject);
var jsArrayData = [
-0.5, 0.5, 0.0, 0.0, 0.0, 0.0,
0.5, 0.5, -0.0, 0.0, 0.0, 0.0,
0.5, -0.5, 0.0, 0.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 0.0, 0.0, 0.0
];
// 索引坐标
var indexDatas = [
0, 1, 2,
0, 2, 3
];
// 创建缓冲区对象
var traingleBuffer = webgl.createBuffer();
// 绑定缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER, traingleBuffer);
// 顶点数组 data 数据传入缓冲区
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
// 创建索引缓冲区
var indexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexDatas), webgl.STATIC_DRAW);
webgl.enableVertexAttribArray(v3PositionIndex);
// 缓冲区中的数据按照一定的规律传递给位置变量 apos
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4 * 6, 0);
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0)
</script>
</body>
</html>