Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cube
# Playing around with the examples in Getting Started with WebGL.
#
# https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
#
vertices = [ -1.0, -1.0, 1.0, # Font Face
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, -1.0, # Back face
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
-1.0, 1.0, -1.0, # Top face
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
-1.0, -1.0, -1.0, # Bottom face
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
1.0, -1.0, -1.0, # Right face
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, -1.0, # Left face
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0 ]
triangles = [ 0, 1, 2, 0, 2, 3, # front
4, 5, 6, 4, 6, 7, # back
8, 9, 10, 8, 10, 11, # top
12, 13, 14, 12, 14, 15, # bottom
16, 17, 18, 16, 18, 19, # right
20, 21, 22, 20, 22, 23] # left
colours = [ [0.0, 1.0, 1.0, 1.0], # Front face: white
[1.0, 0.0, 0.0, 1.0], # Back face: red
[0.0, 1.0, 0.0, 1.0], # Top face: green
[0.0, 0.0, 1.0, 1.0], # Bottom face: blue
[1.0, 1.0, 0.0, 1.0], # Right face: yellow
[1.0, 0.0, 1.0, 1.0]] # Left face: purple
vertextScript = '''
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying lowp vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
'''
fragmentScript = '''
varying lowp vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
'''
class ShaderProgram
constructor: (@context) ->
compileShader: (script, type) ->
shader = @context.createShader type
@context.shaderSource shader, script
@context.compileShader shader
if not @context.getShaderParameter shader, @context.COMPILE_STATUS
console.log "An error occurred compiling the shaders: " + @context.getShaderInfoLog(shader)
return null
shader
class Shader extends ShaderProgram
constructor: ->
super
@program = @context.createProgram()
fragmentShader = @compileShader fragmentScript, @context.FRAGMENT_SHADER
vertextShader = @compileShader vertextScript, @context.VERTEX_SHADER
@context.attachShader(@program, fragmentShader)
@context.attachShader(@program, vertextShader)
@context.linkProgram(@program)
if not @context.getProgramParameter(@program, @context.LINK_STATUS)
alert("Unable to initialize the shader program.")
@context.useProgram @program
@positionAttribute = @context.getAttribLocation(@program, "aVertexPosition")
@context.enableVertexAttribArray(@positionAttribute)
@colourAttribute = @context.getAttribLocation(@program, "aVertexColor")
@context.enableVertexAttribArray(@colourAttribute)
class Buffers
constructor: (@context) ->
arrayBuffer: (data) ->
buffer = @context.createBuffer()
@context.bindBuffer(@context.ARRAY_BUFFER, buffer)
@context.bufferData(@context.ARRAY_BUFFER, new Float32Array(data), @context.STATIC_DRAW)
buffer
elementArrayBuffer: (data) ->
buffer = @context.createBuffer()
@context.bindBuffer(@context.ELEMENT_ARRAY_BUFFER, buffer)
@context.bufferData(@context.ELEMENT_ARRAY_BUFFER, new Uint16Array(data), @context.STATIC_DRAW)
buffer
class Cube extends Buffers
constructor: ->
super
@shader = new Shader @context
@rotation = 0
@colourBuffer = @arrayBuffer generateColours()
@verticesBuffer = @arrayBuffer vertices
@triangleBuffer = @elementArrayBuffer triangles
setMatrixUniforms: (matrix,perspectiveMatrix) ->
pUniform = @context.getUniformLocation(@shader.program, "uPMatrix")
@context.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()))
mvUniform = @context.getUniformLocation(@shader.program, "uMVMatrix")
@context.uniformMatrix4fv(mvUniform, false, new Float32Array(matrix.flatten()))
draw: ->
@context.clear(@context.COLOR_BUFFER_BIT | @context.DEPTH_BUFFER_BIT)
m = Matrix.I(4)
translation = Matrix.Translation($V([-0.0, 0.5, -6.0])).ensure4x4()
rotation = Matrix.Rotation(@rotation, $V([1,0,1])).ensure4x4()
m = m.x(translation)
m = m.x(rotation)
@context.bindBuffer(@context.ARRAY_BUFFER, @verticesBuffer)
@context.vertexAttribPointer(@shader.positionAttribute, 3, @context.FLOAT, false, 0, 0)
@context.bindBuffer(@context.ARRAY_BUFFER, @colourBuffer)
@context.vertexAttribPointer(@shader.colourAttribute, 4, @context.FLOAT, false, 0, 0)
@context.bindBuffer(@context.ELEMENT_ARRAY_BUFFER, @triangleBuffer)
perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0)
@setMatrixUniforms m, perspectiveMatrix
@context.drawElements(@context.TRIANGLES, 36, @context.UNSIGNED_SHORT, 0)
generateColours = ->
generatedColours = []
for side in [0..5]
colour = colours[side]
for rgba in [0..3]
generatedColours = generatedColours.concat(colour)
generatedColours
contextSettings = (context) ->
context.clearColor(0.0, 0.0, 0.0, 1.0) # Set clear color to black, fully opaque
context.clearDepth(1.0) # Clear everything
context.enable(context.DEPTH_TEST) # Enable depth testing
context.depthFunc(context.LEQUAL) # Near things obscure far things
context.clear(context.COLOR_BUFFER_BIT|context.DEPTH_BUFFER_BIT) # Clear the color as well as the depth buffer.
demo = (context) ->
contextSettings(context)
cube = new Cube context
frame = ->
cube.draw()
cube.rotation += 0.01
setTimeout(frame,20)
frame()
initWebGL = (canvas) ->
try
context = canvas.getContext "experimental-webgl"
context
window.onload = ->
canvas = document.getElementById "canvas"
context = initWebGL canvas
if context
demo context
else
canvas.style.display = 'none'
document.getElementById("notsupported").style.display = 'block'
alert "Your browser does not appear to support WebGL"
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="sylvester.js" type="text/javascript"></script>
<script src="glUtils.js" type="text/javascript"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment