|
1 <!-- Any copyright is dedicated to the Public Domain. |
|
2 http://creativecommons.org/publicdomain/zero/1.0/ --> |
|
3 <!doctype html> |
|
4 |
|
5 <html> |
|
6 <head> |
|
7 <meta charset="utf-8"/> |
|
8 <title>WebGL editor test page</title> |
|
9 |
|
10 <script id="shader-vs" type="x-shader/x-vertex"> |
|
11 precision lowp float; |
|
12 |
|
13 void main(void) { |
|
14 gl_Position = vec4(0, 0, 0, 1); // I'm a vertex shader! |
|
15 } |
|
16 </script> |
|
17 |
|
18 <script id="shader-fs" type="x-shader/x-fragment"> |
|
19 precision lowp float; |
|
20 varying vec3 vFragmentColor; |
|
21 |
|
22 void main(void) { |
|
23 gl_FragColor = vec4(1, 0, 0, 1); // I'm a fragment shader! |
|
24 } |
|
25 </script> |
|
26 </head> |
|
27 |
|
28 <body> |
|
29 <canvas width="512" height="512"></canvas> |
|
30 |
|
31 <script type="text/javascript;version=1.8"> |
|
32 "use strict"; |
|
33 |
|
34 let canvas, gl; |
|
35 |
|
36 window.onload = function() { |
|
37 canvas = document.querySelector("canvas"); |
|
38 gl = canvas.getContext("webgl", { preserveDrawingBuffer: true }); |
|
39 |
|
40 let shaderProgram = gl.createProgram(); |
|
41 let vertexShader, fragmentShader; |
|
42 |
|
43 // Compile and attach the shaders in a random order. The test will |
|
44 // ensure that the correct vertex and fragment source is retrieved |
|
45 // regardless of this crazyness. |
|
46 if (Math.random() > 0.5) { |
|
47 vertexShader = getShader(gl, "shader-vs"); |
|
48 fragmentShader = getShader(gl, "shader-fs"); |
|
49 } else { |
|
50 fragmentShader = getShader(gl, "shader-fs"); |
|
51 vertexShader = getShader(gl, "shader-vs"); |
|
52 } |
|
53 if (Math.random() > 0.5) { |
|
54 gl.attachShader(shaderProgram, vertexShader); |
|
55 gl.attachShader(shaderProgram, fragmentShader); |
|
56 } else { |
|
57 gl.attachShader(shaderProgram, fragmentShader); |
|
58 gl.attachShader(shaderProgram, vertexShader); |
|
59 } |
|
60 |
|
61 gl.linkProgram(shaderProgram); |
|
62 } |
|
63 |
|
64 function getShader(gl, id) { |
|
65 let script = document.getElementById(id); |
|
66 let source = script.textContent; |
|
67 let shader; |
|
68 |
|
69 if (script.type == "x-shader/x-fragment") { |
|
70 shader = gl.createShader(gl.FRAGMENT_SHADER); |
|
71 } else if (script.type == "x-shader/x-vertex") { |
|
72 shader = gl.createShader(gl.VERTEX_SHADER); |
|
73 } |
|
74 |
|
75 gl.shaderSource(shader, source); |
|
76 gl.compileShader(shader); |
|
77 |
|
78 return shader; |
|
79 } |
|
80 </script> |
|
81 </body> |
|
82 |
|
83 </html> |