|
0
|
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 }
|
|
|
55 </script>
|
|
|
56
|
|
|
57 <script id="fshader" type="x-shader/x-fragment">
|
|
|
58 uniform sampler2D sampler2d;
|
|
|
59
|
|
|
60 varying float v_Dot;
|
|
|
61 varying vec2 v_texCoord;
|
|
|
62
|
|
|
63 void main()
|
|
|
64 {
|
|
|
65 vec4 color = texture2D(sampler2d,v_texCoord);
|
|
|
66 color += vec4(0.1,0.1,0.1,1);
|
|
|
67 gl_FragColor = vec4(color.xyz * v_Dot, color.a);
|
|
|
68 }
|
|
|
69 </script>
|
|
|
70
|
|
|
71 <script>
|
|
|
72 function init()
|
|
|
73 {
|
|
|
74 var gl = initWebGL("example", "vshader", "fshader",
|
|
|
75 [ "vNormal", "vTexCoord", "vPosition"],
|
|
|
76 [ 0, 0, 0, 1 ], 10000);
|
|
|
77
|
|
|
78 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
|
|
|
79 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
|
|
|
80
|
|
|
81 gl.enable(gl.TEXTURE_2D);
|
|
|
82 gl.obj = new Object();
|
|
|
83 for (var name in xmlObj) {
|
|
|
84 gl.obj[name] = makeXmlObj(gl, xmlObj[name]);
|
|
|
85 }
|
|
|
86
|
|
|
87 // get the images
|
|
|
88 earthTexture = loadImageTexture(gl, "resources/earthmap1k.jpg");
|
|
|
89 marsTexture = loadImageTexture(gl, "resources/mars500x250.png");
|
|
|
90
|
|
|
91
|
|
|
92 testTexture = loadImageTexture(gl, testImage);
|
|
|
93
|
|
|
94 return gl;
|
|
|
95 }
|
|
|
96
|
|
|
97 width = -1;
|
|
|
98 height = -1;
|
|
|
99
|
|
|
100 function reshape(ctx)
|
|
|
101 {
|
|
|
102 var canvas = document.getElementById('example');
|
|
|
103 if (canvas.width == width && canvas.width == height)
|
|
|
104 return;
|
|
|
105
|
|
|
106 width = canvas.width;
|
|
|
107 height = canvas.height;
|
|
|
108
|
|
|
109 ctx.viewport(0, 0, width, height);
|
|
|
110
|
|
|
111 ctx.perspectiveMatrix = new CanvasMatrix4();
|
|
|
112 ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
|
|
|
113 ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
|
|
|
114 }
|
|
|
115
|
|
|
116 function drawOne(ctx, glObj, angle, x, y, z, scale, texture)
|
|
|
117 {
|
|
|
118 // setup VBOs
|
|
|
119 ctx.enableVertexAttribArray(0);
|
|
|
120 ctx.enableVertexAttribArray(1);
|
|
|
121 ctx.enableVertexAttribArray(2);
|
|
|
122
|
|
|
123 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.vertexObject);
|
|
|
124 ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);
|
|
|
125
|
|
|
126 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.normalObject);
|
|
|
127 ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);
|
|
|
128
|
|
|
129 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.texCoordObject);
|
|
|
130 ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);
|
|
|
131
|
|
|
132 ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, glObj.indexObject);
|
|
|
133
|
|
|
134 // generate the model-view matrix
|
|
|
135 var mvMatrix = new CanvasMatrix4();
|
|
|
136 mvMatrix.scale(scale, scale, scale);
|
|
|
137 mvMatrix.rotate(angle, 0,1,0);
|
|
|
138 mvMatrix.rotate(30, 1,0,0);
|
|
|
139 mvMatrix.translate(x,y,z);
|
|
|
140
|
|
|
141 // construct the normal matrix from the model-view matrix
|
|
|
142 var normalMatrix = new CanvasMatrix4(mvMatrix);
|
|
|
143 normalMatrix.invert();
|
|
|
144 normalMatrix.transpose();
|
|
|
145 ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
|
|
|
146
|
|
|
147 // construct the model-view * projection matrix
|
|
|
148 var mvpMatrix = new CanvasMatrix4(mvMatrix);
|
|
|
149 mvpMatrix.multRight(ctx.perspectiveMatrix);
|
|
|
150 ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
|
|
|
151
|
|
|
152 ctx.bindTexture(ctx.TEXTURE_2D, texture);
|
|
|
153 ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
|
|
|
154 }
|
|
|
155
|
|
|
156 function drawPicture(ctx)
|
|
|
157 {
|
|
|
158 reshape(ctx);
|
|
|
159 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
|
|
|
160
|
|
|
161 for (var name in ctx.obj) {
|
|
|
162 // drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 0, 0.005, testTexture);
|
|
|
163 drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 0, 0.005, marsTexture);
|
|
|
164 }
|
|
|
165
|
|
|
166 ctx.flush();
|
|
|
167
|
|
|
168 framerate.snapshot();
|
|
|
169
|
|
|
170 currentAngle += incAngle;
|
|
|
171 if (currentAngle > 360)
|
|
|
172 currentAngle -= 360;
|
|
|
173 }
|
|
|
174
|
|
|
175 function start()
|
|
|
176 {
|
|
|
177 //xmlファイル読み込み
|
|
|
178 xmlObj = parseXml("./xml/Companioncube.xml");
|
|
|
179
|
|
|
180 var url = "./xml/Companioncube.xml";
|
|
|
181 var http = new JKL.ParseXML( url );
|
|
|
182 var data = http.parse();
|
|
|
183 xmlObjImage = data["OBJECT-3D"]["surface"]["image"];
|
|
|
184 testImage = 'data:image/png;base64,'+xmlObjImage["#text"];
|
|
|
185
|
|
|
186 document.getElementById("test").src=testImage;
|
|
|
187
|
|
|
188 var c = document.getElementById("example");
|
|
|
189 var w = Math.floor(window.innerWidth * 0.9);
|
|
|
190 var h = Math.floor(window.innerHeight * 0.9);
|
|
|
191
|
|
|
192 c.width = w;
|
|
|
193 c.height = h;
|
|
|
194
|
|
|
195 var ctx = init();
|
|
|
196 currentAngle = 0;
|
|
|
197 incAngle = 0.2;
|
|
|
198 var f = function() { drawPicture(ctx) };
|
|
|
199 setInterval(f, 10);
|
|
|
200 framerate = new Framerate("framerate");
|
|
|
201 }
|
|
|
202 </script>
|
|
|
203 <style type="text/css">
|
|
|
204 canvas {
|
|
|
205 border: 2px solid black;
|
|
|
206 }
|
|
|
207 </style>
|
|
|
208 </head>
|
|
|
209 <body onload="start()">
|
|
|
210 <canvas id="example">
|
|
|
211 There is supposed to be an example drawing here, but it's not important.
|
|
|
212 </canvas>
|
|
|
213 <div id="framerate"></div>
|
|
|
214 <div id="console"></div>
|
|
|
215
|
|
|
216 <img id="test" style="border:1px solid red">
|
|
|
217
|
|
|
218 </body>
|
|
|
219 </html>
|
