OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 div { | |
5 width:200px; | |
6 height:200px; | |
7 border:2px solid black; | |
8 content: -webkit-canvas(triangle); | |
9 } | |
10 </style> | |
11 | |
12 <script id="vertexShader" type="x-shader/x-vertex"> | |
13 attribute vec4 vPosition; | |
14 | |
15 void main() { | |
16 gl_Position = vPosition; | |
17 } | |
18 </script> | |
19 | |
20 <script id="fragmentShader" type="x-shader/x-fragment"> | |
21 void main() { | |
22 gl_FragColor = vec4(0.8, 0.7, 0, 1.0); | |
23 } | |
24 </script> | |
25 | |
26 <script type="application/x-javascript"> | |
27 function getFragmentShader() | |
28 { | |
29 var shaderNode = document.getElementById("fragmentShader"); // f
ragmentShader has been defined at the top | |
30 var shaderSource = getShaderSource(shaderNode); | |
31 | |
32 var shader = gl.createShader(gl.FRAGMENT_SHADER); | |
33 gl.shaderSource(shader, shaderSource); | |
34 gl.compileShader(shader); | |
35 | |
36 return shader; | |
37 } | |
38 | |
39 function getShaderSource(shaderNode) | |
40 { | |
41 var shaderSource = ""; | |
42 var node = shaderNode.firstChild; | |
43 while (node) { | |
44 if (node.nodeType == 3) // Node.TEXT_NODE | |
45 shaderSource += node.textContent; | |
46 node = node.nextSibling; | |
47 } | |
48 | |
49 return shaderSource; | |
50 } | |
51 | |
52 function getVertexShader() | |
53 { | |
54 var shaderNode = document.getElementById("vertexShader"); | |
55 var shaderSource = getShaderSource(shaderNode); | |
56 | |
57 var shader = gl.createShader(gl.VERTEX_SHADER); | |
58 gl.shaderSource(shader, shaderSource); | |
59 gl.compileShader(shader); | |
60 | |
61 return shader; | |
62 } | |
63 | |
64 function initialize() | |
65 { | |
66 gl = document.getCSSCanvasContext("webgl", "triangle", 200, 200)
; | |
67 | |
68 var vertexShader = getVertexShader(); | |
69 var fragmentShader = getFragmentShader(); | |
70 | |
71 var shaderProgram = gl.createProgram(); | |
72 gl.attachShader(shaderProgram, vertexShader); | |
73 gl.attachShader(shaderProgram, fragmentShader); | |
74 gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPositi
on has been defined at the top | |
75 gl.linkProgram(shaderProgram); | |
76 | |
77 gl.useProgram(shaderProgram); | |
78 | |
79 var buffer = gl.createBuffer(); | |
80 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); | |
81 } | |
82 | |
83 function draw(r, g, b) | |
84 { | |
85 var vertices = [ 0.0, 0.8, 0.0, | |
86 -0.8, -0.8, 0.0, | |
87 0.8, -0.8, 0.0 ]; | |
88 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.ST
ATIC_DRAW); | |
89 | |
90 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the
vertex data | |
91 gl.enableVertexAttribArray(0); | |
92 gl.clearColor(r, g, b, 1); | |
93 gl.clear(gl.COLOR_BUFFER_BIT); | |
94 gl.drawArrays(gl.TRIANGLES, 0, 3); | |
95 } | |
96 | |
97 if (window.testRunner) { | |
98 testRunner.waitUntilDone(); | |
99 testRunner.overridePreference("WebKitWebGLEnabled", "1"); | |
100 } | |
101 | |
102 initialize(); | |
103 | |
104 setTimeout(function() { | |
105 draw(0.7, 0, 0); | |
106 setTimeout(function() { | |
107 draw(0, 0.5, 0); | |
108 if (window.testRunner) | |
109 testRunner.notifyDone(); | |
110 }, 100); | |
111 }, 100); | |
112 </script> | |
113 </head> | |
114 <body> | |
115 <div></div> | |
116 </body> | |
117 </html> | |
OLD | NEW |