12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>WebGL Viewport</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 Viewport</h1>
- <form>
- <textarea id="code" name="code" rows="40" cols="120">
- import webgl
- gl = webgl.Context("my-canvas")
- gl.viewport(0, 150, 200, 150)
- 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="300" 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>
|