comparison webGL/test/TestXml3.html @ 1:94c790cbd930

update TestXml3.html
author NOBUYASU Oshiro
date Mon, 31 May 2010 03:24:30 +0900
parents b67b790dcf4f
children 10344afb38a6
comparison
equal deleted inserted replaced
0:b67b790dcf4f 1:94c790cbd930
48 void main() 48 void main()
49 { 49 {
50 gl_Position = u_modelViewProjMatrix * vPosition; 50 gl_Position = u_modelViewProjMatrix * vPosition;
51 v_texCoord = vTexCoord.st; 51 v_texCoord = vTexCoord.st;
52 vec4 transNormal = u_normalMatrix * vec4(vNormal,1); 52 vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
53 v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); 53 // v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
54 v_Dot = min(dot(transNormal.xyz, lightDir), 1.0);
54 } 55 }
55 </script> 56 </script>
56 57
57 <script id="fshader" type="x-shader/x-fragment"> 58 <script id="fshader" type="x-shader/x-fragment">
58 uniform sampler2D sampler2d; 59 uniform sampler2D sampler2d;
80 81
81 gl.enable(gl.TEXTURE_2D); 82 gl.enable(gl.TEXTURE_2D);
82 gl.obj = new Object(); 83 gl.obj = new Object();
83 for (var name in xmlObj) { 84 for (var name in xmlObj) {
84 gl.obj[name] = makeXmlObj(gl, xmlObj[name]); 85 gl.obj[name] = makeXmlObj(gl, xmlObj[name]);
85 } 86 gl.obj[name].texture = loadImageTexture(gl, xmlObj[name].image);
86 87 }
88
89
87 // get the images 90 // get the images
88 earthTexture = loadImageTexture(gl, "resources/earthmap1k.jpg"); 91 earthTexture = loadImageTexture(gl, "resources/earthmap1k.jpg");
89 marsTexture = loadImageTexture(gl, "resources/mars500x250.png"); 92 marsTexture = loadImageTexture(gl, "resources/mars500x250.png");
90 93
91 94
92 testTexture = loadImageTexture(gl, testImage);
93
94 return gl; 95 return gl;
95 } 96 }
96 97
97 width = -1; 98 width = -1;
98 height = -1; 99 height = -1;
111 ctx.perspectiveMatrix = new CanvasMatrix4(); 112 ctx.perspectiveMatrix = new CanvasMatrix4();
112 ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0); 113 ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
113 ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000); 114 ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
114 } 115 }
115 116
116 function drawOne(ctx, glObj, angle, x, y, z, scale, texture) 117 function drawOne(ctx, glObj, angle, x, y, z, scale)
117 { 118 {
118 // setup VBOs 119 // setup VBOs
119 ctx.enableVertexAttribArray(0); 120 ctx.enableVertexAttribArray(0);
120 ctx.enableVertexAttribArray(1); 121 ctx.enableVertexAttribArray(1);
121 ctx.enableVertexAttribArray(2); 122 ctx.enableVertexAttribArray(2);
147 // construct the model-view * projection matrix 148 // construct the model-view * projection matrix
148 var mvpMatrix = new CanvasMatrix4(mvMatrix); 149 var mvpMatrix = new CanvasMatrix4(mvMatrix);
149 mvpMatrix.multRight(ctx.perspectiveMatrix); 150 mvpMatrix.multRight(ctx.perspectiveMatrix);
150 ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray()); 151 ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
151 152
152 ctx.bindTexture(ctx.TEXTURE_2D, texture); 153 // ctx.bindTexture(ctx.TEXTURE_2D, texture);
154 ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
153 ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0); 155 ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
154 } 156 }
155 157
156 function drawPicture(ctx) 158 function drawPicture(ctx)
157 { 159 {
158 reshape(ctx); 160 reshape(ctx);
159 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); 161 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
160 162
161 for (var name in ctx.obj) { 163 for (var name in ctx.obj) {
162 // drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 0, 0.005, testTexture); 164 drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 0, 0.005);
163 drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 0, 0.005, marsTexture); 165 // drawOne(ctx, ctx.obj[name], currentAngle, 0, -5, -30, 0.5);
164 } 166 }
165 167
166 ctx.flush(); 168 ctx.flush();
167 169
168 framerate.snapshot(); 170 framerate.snapshot();
173 } 175 }
174 176
175 function start() 177 function start()
176 { 178 {
177 //xmlファイル読み込み 179 //xmlファイル読み込み
178 xmlObj = parseXml("./xml/Companioncube.xml"); 180 // xmlObj = parseXml("./xml/Companioncube.xml");
179 181 // xmlObj = parseXml("./xml/head.xml");
180 var url = "./xml/Companioncube.xml"; 182 xmlObj = parseXml("./xml/dandy/character.xml");
181 var http = new JKL.ParseXML( url ); 183
182 var data = http.parse(); 184 for (var name in xmlObj ){
183 xmlObjImage = data["OBJECT-3D"]["surface"]["image"]; 185 document.getElementById("test").src=xmlObj[name].image;
184 testImage = 'data:image/png;base64,'+xmlObjImage["#text"]; 186 }
185
186 document.getElementById("test").src=testImage;
187
188 var c = document.getElementById("example"); 187 var c = document.getElementById("example");
189 var w = Math.floor(window.innerWidth * 0.9); 188 var w = Math.floor(window.innerWidth * 0.9);
190 var h = Math.floor(window.innerHeight * 0.9); 189 var h = Math.floor(window.innerHeight * 0.9);
191 190
192 c.width = w; 191 c.width = w;