Mercurial > hg > Members > e085711
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; |