<!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">
precision lowp float;
attribute vec3 v3Position;
attribute vec4 inColor;
varying vec4 outColor;
void main(void) {
outColor = inColor;
gl_Position = vec4(v3Position, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision lowp float;
varying vec4 outColor;
void main(void) {gl_FragColor = outColor;}
</script>
<script>
var canvas = document.getElementById('canvas');
var webgl = canvas.getContext('webgl');
var v3PositionIndex = 0;
var inColor = 1;
// 用来设置视口
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.bindAttribLocation(programObject, inColor, "inColor");
webgl.linkProgram(programObject);
if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) {alert("error: programObject");
}
webgl.useProgram(programObject);
var jsArrayData = [// x, y, z, r, g, b, a
-0.5, 0.5, 0.0, 1.0, 0.0, 0.0, 1.0,
0.5, 0.5, -0.0, 0.0, 1.0, 0.0, 1.0,
0.5, -0.5, 0.0, 0.0, 0.0, 1.0, 1.0,
-0.5, -0.5, 0.0, 1.0, 1.0, 0.0, 1.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);
webgl.enableVertexAttribArray(inColor);
// 缓冲区中的数据按照一定的规律传递给位置变量 apos
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4 * 7, 0);
webgl.vertexAttribPointer(inColor, 4, webgl.FLOAT, false, 4 * 7, 12);
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0)
</script>
</body>
</html>