webgl-0001-basic.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WebGL</title>
  6. <style type="text/css">
  7. body { background-color: grey;}
  8. canvas { background-color: white;}
  9. </style>
  10. <script src="../../dist/skulpt.js" type="text/javascript"></script>
  11. <script src="../../dist/builtin.js" type="text/javascript"></script>
  12. </head>
  13. <body>
  14. <h1>WebGL</h1>
  15. <form>
  16. <textarea id="code" name="code" rows="40" cols="120">
  17. import webgl
  18. gl = webgl.Context("my-canvas")
  19. vs = gl.createShader(gl.VERTEX_SHADER)
  20. gl.shaderSource(vs, "attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); }")
  21. gl.compileShader(vs)
  22. print "Vertex shader COMPILE_STATUS: " + str(gl.getShaderParameter(vs, gl.COMPILE_STATUS))
  23. fs = gl.createShader(gl.FRAGMENT_SHADER)
  24. gl.shaderSource(fs, "void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }")
  25. gl.compileShader(fs)
  26. print "Fragment shader COMPILE_STATUS: " + str(gl.getShaderParameter(fs, gl.COMPILE_STATUS))
  27. program = gl.createProgram()
  28. gl.attachShader(program, vs)
  29. gl.attachShader(program, fs)
  30. gl.linkProgram(program)
  31. print "Program LINK_STATUS: " + str(gl.getProgramParameter(program, gl.LINK_STATUS))
  32. gl.useProgram(program)
  33. triangleVertices = [-0.5, 0.5, 0.0,
  34. 0.0, 0.0, 0.0,
  35. -0.5, -0.5, 0.0,
  36. 0.5, 0.5, 0.0,
  37. 0.0, 0.0, 0.0,
  38. 0.5, -0.5, 0.0]
  39. trianglesVerticeBuffer = gl.createBuffer()
  40. gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
  41. gl.bufferData(gl.ARRAY_BUFFER, webgl.Float32Array(triangleVertices), gl.STATIC_DRAW)
  42. vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition")
  43. gl.enableVertexAttribArray(vertexPositionAttribute)
  44. gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
  45. gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, False, 0, 0)
  46. gl.drawArrays(gl.TRIANGLES, 0, 6)
  47. </textarea>
  48. <button type="button" onclick="runit()">Run</button>
  49. </form>
  50. <canvas id="my-canvas" height="248" width="400">
  51. Your browser does not support the HTML5 canvas element.
  52. </canvas>
  53. <pre id="my-output" ></pre>
  54. <script>
  55. function outputHandler(text) {
  56. var output = document.getElementById("my-output");
  57. output.innerHTML = output.innerHTML + text.replace(/</g, '&lt;');
  58. }
  59. function builtinRead(x) {
  60. if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) {
  61. throw "File not found: '" + x + "'";
  62. }
  63. return Sk.builtinFiles["files"][x];
  64. }
  65. function runit() {
  66. var prog = document.getElementById("code").value;
  67. // Clear the output
  68. document.getElementById("my-output").innerHTML = '';
  69. Sk.canvas = "my-canvas";
  70. Sk.pre = "my-output";
  71. Sk.configure({"output":outputHandler, "read":builtinRead});
  72. try {
  73. eval(Sk.importMainWithBody("<stdin>", false, prog));
  74. }
  75. catch(e) {
  76. alert(e);
  77. }
  78. }
  79. </script>
  80. </body>
  81. </html>