实现效果

实现代码
<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><meta name="description" content="Render voxel primitives with different shape types." /><meta name="cesium-sandcastle-labels" content="Showcases, WEBGL" /><title>WEBGL Demo</title>
</head><body><canvas id="myCanvas" style="border: 1px solid red;" width='600' height='600'></canvas><script type="text/plain" id="VSHADER_SOURCE">attribute vec3 v3Position;void main(void){gl_Position = vec4(v3Position, 1.0);}</script><script type="text/plain" id="FSHADER_SOURCE">void main(void){gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0);}</script><script id="cesium_sandcastle_script">"use strict";function Init() {var webgl = null;var VSHADER_SOURCE = document.getElementById("VSHADER_SOURCE").textContent;var FSHADER_SOURCE = document.getElementById("FSHADER_SOURCE").textContent;var canvas = document.getElementById('myCanvas');webgl = canvas.getContext("webgl");webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vertexShaderObject,VSHADER_SOURCE);webgl.shaderSource(fragmentShaderObject,FSHADER_SOURCE);webgl.compileShader(vertexShaderObject);webgl.compileShader(fragmentShaderObject);if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) { alert("error:vertexShaderObject");return; }if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)){ alert("error:fragmentShaderObject");return;}var programObject = webgl.createProgram();webgl.attachShader(programObject, vertexShaderObject);webgl.attachShader(programObject, fragmentShaderObject);var v3PositionIndex = 0;webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");webgl.linkProgram(programObject);if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) { alert("error:programObject"); return; }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 triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);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.clearColor(0.0, 0.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT);webgl.enableVertexAttribArray(v3PositionIndex);webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4 * 6, 0 );webgl.drawElements(webgl.TRIANGLES,6, webgl.UNSIGNED_SHORT, 0 );}window.onload = function() {Sandcastle.finishedLoading();Init()}</script>
</body></html>