Skip to content
Snippets Groups Projects
Commit 9b7781e3 authored by David Holmes's avatar David Holmes
Browse files

Basic WebGL with example.

parent 2121e18b
Branches
Tags
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
example/webgl/webgl-0001-basic.html 0 → 100644
+ 91
− 0
View file @ 9b7781e3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL</title>
<style type="text/css">
body { background-color: grey;}
canvas { background-color: white;}
</style>
<script src="../../dist/skulpt.js" type="text/javascript"></script>
<script src="../../dist/builtin.js" type="text/javascript"></script>
</head>
<body>
<h1>WebGL</h1>
<form>
<textarea id="code" name="code" rows="40" cols="120">
import webgl
gl = webgl.Context("my-canvas")
vs = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vs, "attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); }")
gl.compileShader(vs)
print "Vertex shader COMPILE_STATUS: " + str(gl.getShaderParameter(vs, gl.COMPILE_STATUS))
fs = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fs, "void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }")
gl.compileShader(fs)
print "Fragment shader COMPILE_STATUS: " + str(gl.getShaderParameter(fs, gl.COMPILE_STATUS))
program = gl.createProgram()
gl.attachShader(program, vs)
gl.attachShader(program, fs)
gl.linkProgram(program)
print "Program LINK_STATUS: " + str(gl.getProgramParameter(program, gl.LINK_STATUS))
gl.useProgram(program)
triangleVertices = [-0.5, 0.5, 0.0,
0.0, 0.0, 0.0,
-0.5, -0.5, 0.0,
0.5, 0.5, 0.0,
0.0, 0.0, 0.0,
0.5, -0.5, 0.0]
trianglesVerticeBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
gl.bufferData(gl.ARRAY_BUFFER, webgl.Float32Array(triangleVertices), gl.STATIC_DRAW)
vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition")
gl.enableVertexAttribArray(vertexPositionAttribute)
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, False, 0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 6)
</textarea>
<button type="button" onclick="runit()">Run</button>
</form>
<canvas id="my-canvas" height="248" width="400">
Your browser does not support the HTML5 canvas element.
</canvas>
<pre id="my-output" ></pre>
<script>
function outputHandler(text) {
var output = document.getElementById("my-output");
output.innerHTML = output.innerHTML + text.replace(/</g, '&lt;');
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) {
throw "File not found: '" + x + "'";
}
return Sk.builtinFiles["files"][x];
}
function runit() {
var prog = document.getElementById("code").value;
// Clear the output
document.getElementById("my-output").innerHTML = '';
Sk.canvas = "my-canvas";
Sk.pre = "my-output";
Sk.configure({"output":outputHandler, "read":builtinRead});
try {
eval(Sk.importMainWithBody("<stdin>", false, prog));
}
catch(e) {
alert(e);
}
}
</script>
</body>
</html>
src/lib/webgl/__init__.js
+ 188
− 380
View file @ 9b7781e3
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment