<!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, '<');
}
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>