Gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title></title> | |
<script type="text/javascript"> | |
var fragShaderSource = "\ | |
precision highp float;\ | |
uniform vec4 u_color;\ | |
void main(void) {\ | |
gl_FragColor = u_color;\ | |
}\ | |
"; | |
var vtxShaderSource = "\ | |
attribute vec3 a_position;\ | |
uniform vec4 u_color;\ | |
uniform mat4 u_mvMatrix;\ | |
uniform mat4 u_pMatrix;\ | |
void main(void) {\ | |
gl_Position = u_pMatrix * u_mvMatrix * vec4(a_position, 1.0);\ | |
}\ | |
"; | |
function get_shader(type, source) { | |
var shader = gl.createShader(type); | |
gl.shaderSource(shader, source); | |
gl.compileShader(shader); | |
return shader; | |
} | |
var gl, pMatrix, mvMatrix, nMatrix, vbuf, tbuf, nbuf, ibuf; | |
function onready() { | |
var canvas = document.getElementsByTagName('canvas')[0]; | |
gl = canvas.getContext("experimental-webgl", {antialias : true}); | |
gl.viewport(0, 0, canvas.width, canvas.height); | |
var vertexShader = get_shader(gl.VERTEX_SHADER, (vtxShaderSource)); | |
var fragmentShader = get_shader(gl.FRAGMENT_SHADER, (fragShaderSource)); | |
shaderProgram = gl.createProgram(); | |
gl.attachShader(shaderProgram, vertexShader); | |
gl.attachShader(shaderProgram, fragmentShader); | |
gl.linkProgram(shaderProgram); | |
gl.useProgram(shaderProgram); | |
shaderProgram.aposAttrib = gl.getAttribLocation(shaderProgram, "a_position"); | |
gl.enableVertexAttribArray(shaderProgram.aposAttrib); | |
shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "u_color"); | |
shaderProgram.pMUniform = gl.getUniformLocation(shaderProgram, "u_pMatrix"); | |
shaderProgram.mvMUniform = gl.getUniformLocation(shaderProgram, "u_mvMatrix"); | |
gl.clearColor(1.0, 1.0, 1.0, 1.0); | |
mvMatrix = [0.9701425001453319, -0.18712029714127995, 0.1543033499620919, 0, 0, 0.6362090102803518, 0.7715167498104596, 0, -0.24253562503633297, -0.7484811885651198, 0.6172133998483676, 0, 0, 0, -12.96148139681572, 1]; | |
pMatrix = [1.2990381056766582, 0, 0, 0, 0, 1.7320508075688776, 0, 0, 0, 0, -1.002002002002002, -1, 0, 0, -0.20020020020020018, 0]; | |
var vtx = new Float32Array([-5.0,-5.0,-5.0,5.0,5.0,5.0]); | |
var idx = new Uint16Array([0, 1]); | |
vbuf = gl.createBuffer(); | |
gl.bindBuffer(gl.ARRAY_BUFFER, vbuf); | |
gl.bufferData(gl.ARRAY_BUFFER, vtx, gl.STATIC_DRAW); | |
gl.bindBuffer(gl.ARRAY_BUFFER, null); | |
ibuf = gl.createBuffer(); | |
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf); | |
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW); | |
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); | |
gl.clearColor(0.0, 0.0, 0.0, 0.0); | |
gl.enable(gl.DEPTH_TEST); | |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
gl.lineWidth(3.0); | |
gl.bindBuffer(gl.ARRAY_BUFFER, vbuf); | |
gl.vertexAttribPointer(shaderProgram.aposAttrib, 3, gl.FLOAT, false, 0, 0); | |
gl.uniform4f(shaderProgram.colorUniform, 0/255.0, 0/255.0, 0/255.0, 1.0); | |
gl.uniformMatrix4fv(shaderProgram.pMUniform, false, new Float32Array(pMatrix)); | |
gl.uniformMatrix4fv(shaderProgram.mvMUniform, false, new Float32Array(mvMatrix)); | |
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuf); | |
gl.drawElements(gl.LINES, 2, gl.UNSIGNED_SHORT, 0); | |
gl.bindBuffer(gl.ARRAY_BUFFER, null); | |
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); | |
} | |
</script> | |
</head> | |
<body onload="onready();"> | |
<canvas width="400" height="300"></canvas> | |
</body> | |
</html> |
[Do not confuse OpenGL ES with OpenGL. It might be possible to write a shorter program to do this task in OpenGL, but in OpenGL ES you need to use shaders even for the shortest of programs]
1 comment:
Could be really shorter.
Post a Comment