Mercurial > hg > Members > e085711

comparison webGL/dandy/dandy1.html~ @ 3:10344afb38a6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
upload dandy
author NOBUYASU Oshiro
date Mon, 07 Jun 2010 17:58:31 +0900
parents
children 7f615f5f5220
comparison
equal deleted inserted replaced
2:be36da713ffd 3:10344afb38a6
1 <!DOCTYPE html>
2 <!--
3 /*
4 * Copyright (C) 2009 Apple Inc. All Rights Reserved.
5 *
6 * Redistribution and use in source and binary forms, with or without
7 * modification, are permitted provided that the following conditions
8 * are met:
9 * 1. Redistributions of source code must retain the above copyright
10 * notice, this list of conditions and the following disclaimer.
11 * 2. Redistributions in binary form must reproduce the above copyright
12 * notice, this list of conditions and the following disclaimer in the
13 * documentation and/or other materials provided with the distribution.
14 *
15 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
16 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
17 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
18 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
19 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
20 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
21 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
22 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
23 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
24 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 */
27 -->
28 <html>
29 <head>
30 <title>Earth and Mars</title>
31 <script src="resources/CanvasMatrix.js"> </script>
32 <script src="resources/utils3d.js"> </script>
33 <script src="resources/jkl-parsexml.js"> </script>
34 <script src="resources/makeXmlObj.js"> </script>
35
36 <script id="vshader" type="x-shader/x-vertex">
37 uniform mat4 u_modelViewProjMatrix;
38 uniform mat4 u_normalMatrix;
39 uniform vec3 lightDir;
40
41 attribute vec3 vNormal;
42 attribute vec4 vTexCoord;
43 attribute vec4 vPosition;
44
45 varying float v_Dot;
46 varying vec2 v_texCoord;
47
48 void main()
49 {
50 gl_Position = u_modelViewProjMatrix * vPosition;
51 v_texCoord = vTexCoord.st;
52 vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
53 v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
54 // v_Dot = min(dot(transNormal.xyz, lightDir), 1.0);
55 }
56 </script>
57
58 <script id="fshader" type="x-shader/x-fragment">
59 uniform sampler2D sampler2d;
60
61 varying float v_Dot;
62 varying vec2 v_texCoord;
63
64 void main()
65 {
66 vec4 color = texture2D(sampler2d,v_texCoord);
67 color += vec4(0.1,0.1,0.1,1);
68 gl_FragColor = vec4(color.xyz * v_Dot, color.a);
69 }
70 </script>
71
72 <script>
73 function init()
74 {
75 var gl = initWebGL("example", "vshader", "fshader",
76 [ "vNormal", "vTexCoord", "vPosition"],
77 [ 0, 0, 0, 1 ], 10000);
78
79 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
80 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
81
82 gl.enable(gl.TEXTURE_2D);
83 gl.obj = new Object();
84 for (var name in xmlObj) {
85 gl.obj[name] = makeXmlObj(gl, xmlObj[name]);
86 gl.obj[name].texture = loadImageTexture(gl, xmlObj[name].image);
87 }
88
89
90 // get the images
91 earthTexture = loadImageTexture(gl, "resources/earthmap1k.jpg");
92 marsTexture = loadImageTexture(gl, "resources/mars500x250.png");
93
94
95 return gl;
96 }
97
98 width = -1;
99 height = -1;
100
101 function reshape(ctx)
102 {
103 var canvas = document.getElementById('example');
104 if (canvas.width == width && canvas.width == height)
105 return;
106
107 width = canvas.width;
108 height = canvas.height;
109
110 ctx.viewport(0, 0, width, height);
111
112 ctx.perspectiveMatrix = new CanvasMatrix4();
113 ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
114 ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
115 // ctx.perspectiveMatrix.ortho(10, 10, 10, 10, 1, 10000);
116
117 }
118
119 function drawOne(ctx, glObj, angle, x, y, z, scale)
120 {
121 // setup VBOs
122 ctx.enableVertexAttribArray(0);
123 ctx.enableVertexAttribArray(1);
124 ctx.enableVertexAttribArray(2);
125
126 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.vertexObject);
127 ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);
128
129 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.normalObject);
130 ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);
131
132 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.texCoordObject);
133 ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);
134
135 ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, glObj.indexObject);
136
137 // generate the model-view matrix
138 var mvMatrix = new CanvasMatrix4();
139 mvMatrix.scale(scale, scale, scale);
140 // mvMatrix.rotate(angle, 0,1,0);
141 // mvMatrix.rotate(30, 1,0,0);
142 mvMatrix.translate(x,y,z);
143 /*
144 var mvNormalMatrix = new CanvasMatrix4();
145 mvMatrix.rotate(angle, 0,1,0);
146 mvMatrix.rotate(30, 1,0,0);
147 mvMatrix.translate(x,y,z);
148 */
149 // construct the normal matrix from the model-view matrix
150 var normalMatrix = new CanvasMatrix4(mvMatrix);
151 normalMatrix.invert();
152 normalMatrix.transpose();
153 ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
154
155 // construct the model-view * projection matrix
156 var mvpMatrix = new CanvasMatrix4(mvMatrix);
157 mvpMatrix.multRight(ctx.perspectiveMatrix);
158 ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
159
160 // ctx.bindTexture(ctx.TEXTURE_2D, texture);
161 ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
162 ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
163 }
164
165 function drawPicture(ctx)
166 {
167 reshape(ctx);
168 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
169
170 for (var name in ctx.obj) {
171 drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 0, 0.005);
172 // drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, -300, 0.8);
173 }
174
175 ctx.flush();
176
177 framerate.snapshot();
178
179 currentAngle += incAngle;
180 if (currentAngle > 360)
181 currentAngle -= 360;
182 }
183
184 function start()
185 {
186 //xmlファイル読み込み
187 // xmlObj = parseXml("./xml/Companioncube.xml");
188 // xmlObj = parseXml("./xml/head.xml");
189 xmlObj = parseXml("./xml/dandy/boss.xml");
190
191
192 for (var name in xmlObj ){
193 document.getElementById("test").src=xmlObj[name].image;
194 }
195 var c = document.getElementById("example");
196 var w = Math.floor(window.innerWidth * 0.9);
197 var h = Math.floor(window.innerHeight * 0.9);
198
199 c.width = w;
200 c.height = h;
201
202 var ctx = init();
203 currentAngle = 0;
204 incAngle = 0.2;
205 var f = function() { drawPicture(ctx) };
206 setInterval(f, 10);
207 framerate = new Framerate("framerate");
208 }
209 </script>
210 <style type="text/css">
211 canvas {
212 border: 2px solid black;
213 }
214 </style>
215 </head>
216 <body onload="start()">
217 <canvas id="example">
218 There is supposed to be an example drawing here, but it's not important.
219 </canvas>
220 <div id="framerate"></div>
221 <div id="console"></div>
222
223 <img id="test" style="border:1px solid red">
224
225 </body>
226 </html>