|
13
|
1 <html>
|
|
|
2 <head>
|
|
|
3 <title>Earth and Mars</title>
|
|
|
4 <script src="resources/SceneGraphRoot.js"></script>
|
|
|
5 <script src="resources/SceneGraph.js"></script>
|
|
|
6 <script src="resources/jkl-parsexml.js"></script>
|
|
|
7 <script src="resources/Image_xml.js"></script>
|
|
|
8 <script src="resources/keybord.js"></script>
|
|
|
9 <script src="resources/walk.js"></script>
|
|
|
10 <script src="resources/bullet.js"></script>
|
|
|
11 <script src="resources/pants.js"></script>
|
|
|
12 <script src="resources/J3DI.js"> </script>
|
|
|
13 <script src="resources/J3DIMath.js" type="text/javascript"> </script>
|
|
|
14
|
|
|
15 <script id="vshader" type="x-shader/x-vertex">
|
|
|
16 uniform mat4 u_modelViewProjMatrix;
|
|
|
17 uniform mat4 u_normalMatrix;
|
|
|
18 uniform vec3 lightDir;
|
|
|
19
|
|
|
20 attribute vec3 vNormal;
|
|
|
21 attribute vec4 vTexCoord;
|
|
|
22 attribute vec4 vPosition;
|
|
|
23
|
|
|
24 varying float v_Dot;
|
|
|
25 varying vec2 v_texCoord;
|
|
|
26
|
|
|
27 void main()
|
|
|
28 {
|
|
|
29 gl_Position = u_modelViewProjMatrix * vPosition;
|
|
|
30 v_texCoord = vTexCoord.st;
|
|
|
31 vec4 transNormal = (u_normalMatrix) * vec4(vNormal,1);
|
|
|
32 v_Dot = max(dot(transNormal.xyz, lightDir), 1.0);
|
|
|
33 }
|
|
|
34 </script>
|
|
|
35
|
|
|
36 <script id="fshader" type="x-shader/x-fragment">
|
|
|
37 #ifdef GL_ES
|
|
|
38 precision mediump float;
|
|
|
39 #endif
|
|
|
40
|
|
|
41 uniform sampler2D sampler2d;
|
|
|
42
|
|
|
43 varying float v_Dot;
|
|
|
44 varying vec2 v_texCoord;
|
|
|
45
|
|
|
46 void main()
|
|
|
47 {
|
|
|
48 vec4 color = texture2D(sampler2d,v_texCoord);
|
|
|
49 /* 光源の色を設定 */
|
|
|
50 color += vec4(0.1,0.1,0.1,1);
|
|
|
51 gl_FragColor = vec4(color.xyz * v_Dot, color.a);
|
|
|
52 }
|
|
|
53 </script>
|
|
|
54
|
|
|
55 <script>
|
|
|
56 function init(w, h)
|
|
|
57 {
|
|
|
58 var gl = initWebGL("example", "vshader", "fshader",
|
|
|
59 [ "vNormal", "vTexCoord", "vPosition"],
|
|
|
60 [ 0, 0, 0, 1 ], 10000);
|
|
|
61
|
|
|
62 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
|
|
|
63 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
|
|
|
64
|
|
|
65 gl.enable(gl.TEXTURE_2D);
|
|
|
66
|
|
|
67 gl.sgroot = new SceneGraphRoot()
|
|
|
68 walk_init(gl, gl.sgroot, w, h)
|
|
|
69
|
|
|
70 return gl;
|
|
|
71 }
|
|
|
72
|
|
|
73 width = 1;
|
|
|
74 height = -1;
|
|
|
75
|
|
|
76 function reshape(ctx)
|
|
|
77 {
|
|
|
78 var canvas = document.getElementById('example');
|
|
|
79 if (canvas.width == width && canvas.width == height)
|
|
|
80 return;
|
|
|
81
|
|
|
82 width = canvas.width
|
|
|
83 height = canvas.height
|
|
|
84 // 画面の調節はいまだ手作業
|
|
|
85
|
|
|
86 ctx.viewport(0, 0, width, height);
|
|
|
87 ctx.perspectiveMatrix = new J3DIMatrix4();
|
|
|
88
|
|
|
89
|
|
|
90 ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
|
|
|
91 ctx.perspectiveMatrix.rotate(cameraAngle_xyz[0],0,1,0)
|
|
|
92 ctx.perspectiveMatrix.rotate(cameraAngle_xyz[1], angleRate_xyz[0], 0, angleRate_xyz[2])
|
|
|
93 //ctx.perspectiveMatrix.rotate(cameraAngle_xyz[1], -1, 0, 1)
|
|
|
94
|
|
|
95
|
|
|
96 ctx.perspectiveMatrix.lookat(position_xyz[0],position_xyz[1],position_xyz[2], aim_xyz[0], aim_xyz[1], aim_xyz[2], 0, -1, 0);
|
|
|
97 // ctx.perspectiveMatrix.lookat(0, 0, -500, 0, 0, 0, 0, -1, 0);
|
|
|
98
|
|
|
99 }
|
|
|
100
|
|
|
101 function drawObject(ctx, angle, xyz, scale, glObj)
|
|
|
102 {
|
|
|
103 // setup VBOs
|
|
|
104 ctx.enableVertexAttribArray(0);
|
|
|
105 ctx.enableVertexAttribArray(1);
|
|
|
106 ctx.enableVertexAttribArray(2);
|
|
|
107
|
|
|
108 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.vertexObject);
|
|
|
109 ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);
|
|
|
110
|
|
|
111 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.normalObject);
|
|
|
112 ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);
|
|
|
113
|
|
|
114 ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.texCoordObject);
|
|
|
115 ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);
|
|
|
116
|
|
|
117 ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, glObj.indexObject);
|
|
|
118
|
|
|
119 // generate the model-view matrix
|
|
|
120 var mvMatrix = new J3DIMatrix4();
|
|
|
121 mvMatrix.translate(xyz[0],xyz[1],xyz[2]);
|
|
|
122 mvMatrix.rotate(angle[0],0,1,0);
|
|
|
123 mvMatrix.rotate(angle[1],1,0,0);
|
|
|
124 mvMatrix.rotate(angle[2],0,0,1);
|
|
|
125 mvMatrix.scale(scale, scale, scale);
|
|
|
126
|
|
|
127 // construct the normal matrix from the model-view matrix
|
|
|
128 var normalMatrix = new J3DIMatrix4(mvMatrix);
|
|
|
129 normalMatrix.invert();
|
|
|
130 normalMatrix.transpose();
|
|
|
131 normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
|
|
|
132
|
|
|
133 // construct the model-view * projection matrix
|
|
|
134 var mvpMatrix = new J3DIMatrix4(ctx.perspectiveMatrix);
|
|
|
135 mvpMatrix.multiply(mvMatrix);
|
|
|
136 mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
|
|
|
137
|
|
|
138 ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
|
|
|
139 ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
|
|
|
140 }
|
|
|
141
|
|
|
142 function drawPicture(ctx,sgroot,w,h)
|
|
|
143 {
|
|
|
144 reshape(ctx);
|
|
|
145 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
|
|
|
146
|
|
|
147 MainLoop(ctx,sgroot,w,h)
|
|
|
148
|
|
|
149 ctx.flush();
|
|
|
150
|
|
|
151 framerate.snapshot();
|
|
|
152
|
|
|
153 currentAngle += incAngle;
|
|
|
154 if (currentAngle > 360){
|
|
|
155 currentAngle -= 360;
|
|
|
156 }
|
|
|
157 }
|
|
|
158
|
|
|
159 function start()
|
|
|
160 {
|
|
|
161 var c = document.getElementById("example");
|
|
|
162 var w = Math.floor(window.innerWidth * 0.9);
|
|
|
163 var h = Math.floor(window.innerHeight * 0.9);
|
|
|
164
|
|
|
165 c.width = w;
|
|
|
166 c.height = h;
|
|
|
167 theta = 90
|
|
|
168 theta1 = 90
|
|
|
169 cameraAngle_xyz = new Array(0,0,0)
|
|
|
170
|
|
|
171 var ctx = init(w, h);
|
|
|
172
|
|
|
173 document.onkeydown = HandleKeyDown;
|
|
|
174 document.onkeyup = HandleKeyUp;
|
|
|
175
|
|
|
176 currentAngle = 0;
|
|
|
177 incAngle = 2.0;
|
|
|
178
|
|
|
179 var f = function() { drawPicture(ctx,ctx.sgroot,w,h) };
|
|
|
180 setInterval(f, 10);
|
|
|
181 framerate = new Framerate("framerate");
|
|
|
182
|
|
|
183 }
|
|
|
184 </script>
|
|
|
185 <style type="text/css">
|
|
|
186 canvas {
|
|
|
187 border: 2px solid black;
|
|
|
188 }
|
|
|
189 </style>
|
|
|
190 </head>
|
|
|
191 <body onload="start()">
|
|
|
192 <canvas id="example">
|
|
|
193 There is supposed to be an example drawing here, but it's not important.
|
|
|
194 </canvas>
|
|
|
195 <div id="framerate"></div>
|
|
|
196 <div id="console"></div>
|
|
|
197 </body>
|
|
|
198 </html>
|
