webgl-0002-viewport.html 3.1 KB

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