SOURCE

console 命令行工具 X clear

                    
>
console
var triangleBuffer = null;

function makeBuffer() {
  var triangle = [
    0.0, 0.5, 0.0, -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
  ];
  buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangle), gl.STATIC_DRAW);
  return buffer;
}

window.onWebGLLoad = function () {
  triangleBuffer = makeBuffer();
}

window.onWebGLRender = function render(deltaTime, elapesdTime) {
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.useProgram(program);
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  positionLoc = gl.getAttribLocation(program, 'position');
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 4 * 3, 0);

  elapsedTimeUniformLoc = gl.getUniformLocation(program, 'elapsedTime');
  gl.uniform1f(elapsedTimeUniformLoc, elapesdTime);

  var rotateMatrix = mat4.create();
  mat4.rotate(rotateMatrix, rotateMatrix, elapesdTime / 1000.0, vec3.fromValues(1, 1, 1));

  var scale = 0.1 * (Math.sin(elapesdTime / 1000.0) + 1.0) + 0.4;
  var scaleMatrix = mat4.create();
  mat4.scale(scaleMatrix, scaleMatrix, vec3.fromValues(scale, scale, scale));

  var xoffset = Math.sin(elapesdTime / 1000.0);
  var translateMatrix = mat4.create();
  mat4.translate(translateMatrix, translateMatrix, vec3.fromValues(xoffset, 0, 0));

  var transform = mat4.create();
  mat4.multiply(transform, rotateMatrix, scaleMatrix);
  mat4.multiply(transform, transform, translateMatrix);

  transformUniformLoc = gl.getUniformLocation(program, 'transform');
  gl.uniformMatrix4fv(transformUniformLoc, false, transform);

  gl.drawArrays(gl.TRIANGLES, 0, 3);
}
<script type="x-shader/vertex-shader" id="shader-vs">
            attribute vec4 position;
            varying vec4 fragColor;
            uniform float elapsedTime;
            uniform mat4 transform;
            void main() {
                fragColor = position * 0.5 + 0.5;
                gl_Position = transform * position;
                gl_PointSize = 20.0;
            }
</script>
<script type="x-shader/fragment-shader" id="shader-fs">
						varying mediump vec4 fragColor;
            void main() {
                gl_FragColor = fragColor;
            }
</script>
<div style="width: 100%; height: 300px; position:relative; background:rgba(0,0,0,0);">
  <canvas id="glCanvas" width="400" height="300">
    Your browser doesn't appear to support the 
    <code>&lt;canvas&gt;</code> element.
  </canvas>
  <div id="glInfo" style=""></div>
</div>
* {
  margin: 0px;
  padding: 0px;
}
#glInfo {
  font-size: 13px;
  color: #ffffff;
  position:absolute;
  top:8px; 
  left:10px;
}

#modeSelection {
  position:absolute;
  right: 10px;
  top: 8px;
}

本项目引用的自定义外部资源