diff options
-rw-r--r-- | assets/shaders/Cloud.frag.glsl | 4 | ||||
-rw-r--r-- | assets/shaders/Cloud.vert.glsl | 5 | ||||
-rw-r--r-- | js/lib/rdge/materials/cloud-material.js | 74 |
3 files changed, 61 insertions, 22 deletions
diff --git a/assets/shaders/Cloud.frag.glsl b/assets/shaders/Cloud.frag.glsl index c21dcf97..3d466a24 100644 --- a/assets/shaders/Cloud.frag.glsl +++ b/assets/shaders/Cloud.frag.glsl | |||
@@ -18,7 +18,7 @@ varying vec2 v_texCoord0; | |||
18 | void main() | 18 | void main() |
19 | { | 19 | { |
20 | vec4 c = texture2D(u_tex0, v_texCoord0); | 20 | vec4 c = texture2D(u_tex0, v_texCoord0); |
21 | //c.a *= u_surfaceAlpha; | 21 | c.a *= u_surfaceAlpha; |
22 | gl_FragColor = c; | 22 | gl_FragColor = c; |
23 | } | 23 | } |
24 | \ No newline at end of file | 24 | \ No newline at end of file |
diff --git a/assets/shaders/Cloud.vert.glsl b/assets/shaders/Cloud.vert.glsl index c8ca9f3f..acd581fc 100644 --- a/assets/shaders/Cloud.vert.glsl +++ b/assets/shaders/Cloud.vert.glsl | |||
@@ -22,19 +22,19 @@ uniform float u_surfaceAlpha; | |||
22 | // matrix uniforms | 22 | // matrix uniforms |
23 | uniform mat4 u_mvMatrix; | 23 | uniform mat4 u_mvMatrix; |
24 | uniform mat4 u_projMatrix; | 24 | uniform mat4 u_projMatrix; |
25 | uniform mat4 u_worldMatrix; | ||
26 | 25 | ||
27 | // varying | 26 | // varying |
28 | varying vec2 v_texCoord0; | 27 | varying vec2 v_texCoord0; |
29 | 28 | ||
30 | // constants | 29 | // constants |
31 | const float zSpeed = 2.0; | 30 | const float zSpeed = 10.0; |
32 | 31 | ||
33 | 32 | ||
34 | void main() | 33 | void main() |
35 | { | 34 | { |
36 | // Transform position | 35 | // Transform position |
37 | vec4 pos = vec4(a_pos,1); | 36 | vec4 pos = vec4(a_pos,1); |
37 | |||
38 | float dz = u_time*zSpeed; | 38 | float dz = u_time*zSpeed; |
39 | float n = floor( dz/(u_zmax-u_zmin) ); | 39 | float n = floor( dz/(u_zmax-u_zmin) ); |
40 | dz -= n*(u_zmax - u_zmin); | 40 | dz -= n*(u_zmax - u_zmin); |
@@ -44,6 +44,7 @@ void main() | |||
44 | z = u_zmin + (z - u_zmax); | 44 | z = u_zmin + (z - u_zmax); |
45 | } | 45 | } |
46 | pos.z = z; | 46 | pos.z = z; |
47 | |||
47 | gl_Position = u_projMatrix * u_mvMatrix * pos; | 48 | gl_Position = u_projMatrix * u_mvMatrix * pos; |
48 | 49 | ||
49 | v_texCoord0 = texcoord; | 50 | v_texCoord0 = texcoord; |
diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js index 2b40b84c..28796c42 100644 --- a/js/lib/rdge/materials/cloud-material.js +++ b/js/lib/rdge/materials/cloud-material.js | |||
@@ -22,8 +22,8 @@ var CloudMaterial = function CloudMaterial() { | |||
22 | this._name = "CloudMaterial"; | 22 | this._name = "CloudMaterial"; |
23 | this._shaderName = "cloud"; | 23 | this._shaderName = "cloud"; |
24 | 24 | ||
25 | //this._texMap = 'assets/images/cloud10.png'; | 25 | this._texMap = 'assets/images/cloud10.png'; |
26 | this._texMap = 'assets/images/us_flag.png'; | 26 | //this._texMap = 'assets/images/us_flag.png'; |
27 | //this._texMap = 'assets/images/cubelight.png'; | 27 | //this._texMap = 'assets/images/cubelight.png'; |
28 | this._diffuseColor = [0.5, 0.5, 0.5, 0.5]; | 28 | this._diffuseColor = [0.5, 0.5, 0.5, 0.5]; |
29 | 29 | ||
@@ -36,8 +36,15 @@ var CloudMaterial = function CloudMaterial() { | |||
36 | // parameter initial values | 36 | // parameter initial values |
37 | this._time = 0.0; | 37 | this._time = 0.0; |
38 | this._surfaceAlpha = 0.5; | 38 | this._surfaceAlpha = 0.5; |
39 | this._zmin = 6.0; | 39 | this._zmin = 2.0; |
40 | this._zmax = 10; | 40 | this._zmax = 5.0; |
41 | |||
42 | // the adjusted zMin and zMax values are | ||
43 | // what get sent to the shader. They are initialized | ||
44 | // in buildGeometry | ||
45 | this._adjustedZMin = this._zmin; | ||
46 | this._adjustedZMax = this._zmax; | ||
47 | |||
41 | 48 | ||
42 | 49 | ||
43 | /////////////////////////////////////////////////////////////////////// | 50 | /////////////////////////////////////////////////////////////////////// |
@@ -129,9 +136,9 @@ var CloudMaterial = function CloudMaterial() { | |||
129 | 136 | ||
130 | ////////////////////////////////////////////////////////////////////////////////// | 137 | ////////////////////////////////////////////////////////////////////////////////// |
131 | // IS THIS NECESSARY?? | 138 | // IS THIS NECESSARY?? |
132 | var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height, | 139 | // var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height, |
133 | Matrix.I(4), [0,0,0], srcCanvas); | 140 | // Matrix.I(4), [0,0,0], srcCanvas); |
134 | ElementMediator.addElement(srcCanvas, elementModel.data, true); | 141 | // ElementMediator.addElement(srcCanvas, elementModel.data, true); |
135 | ////////////////////////////////////////////////////////////////////////////////// | 142 | ////////////////////////////////////////////////////////////////////////////////// |
136 | 143 | ||
137 | // build the source. | 144 | // build the source. |
@@ -202,6 +209,13 @@ var CloudMaterial = function CloudMaterial() { | |||
202 | 209 | ||
203 | this.update = function( time ) | 210 | this.update = function( time ) |
204 | { | 211 | { |
212 | if (this._srcWorld) | ||
213 | { | ||
214 | this._srcWorld.update(); | ||
215 | this._srcWorld.draw(); | ||
216 | g_Engine.setContext( this.getWorld()._canvas.rdgeid ); | ||
217 | } | ||
218 | |||
205 | var technique, renderer, tex; | 219 | var technique, renderer, tex; |
206 | 220 | ||
207 | // update the cloud map material | 221 | // update the cloud map material |
@@ -275,8 +289,8 @@ var CloudMaterial = function CloudMaterial() { | |||
275 | { | 289 | { |
276 | t.u_time.set( [this._time] ); | 290 | t.u_time.set( [this._time] ); |
277 | t.u_surfaceAlpha.set( [this._surfaceAlpha] ); | 291 | t.u_surfaceAlpha.set( [this._surfaceAlpha] ); |
278 | t.u_zmin.set( [this._zmin] ); | 292 | t.u_zmin.set( [this._adjustedZMin] ); |
279 | t.u_zmax.set( [this._zmax] ); | 293 | t.u_zmax.set( [this._adjustedZMax] ); |
280 | 294 | ||
281 | var wrap = 'REPEAT', mips = true; | 295 | var wrap = 'REPEAT', mips = true; |
282 | var texMapName = this._propValues[this._propNames[0]]; | 296 | var texMapName = this._propValues[this._propNames[0]]; |
@@ -331,30 +345,49 @@ var CloudMaterial = function CloudMaterial() { | |||
331 | //this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); | 345 | //this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); |
332 | var ctr = [x,y], width = 2*hWidth, height = 2*hHeight; | 346 | var ctr = [x,y], width = 2*hWidth, height = 2*hHeight; |
333 | var cloudSize = width > height ? 0.25*width : 0.25*height; | 347 | var cloudSize = width > height ? 0.25*width : 0.25*height; |
348 | var left = x - hHeight, | ||
349 | top = y - hHeight; | ||
334 | 350 | ||
335 | // calculate the range of z's in GL space from | 351 | // get the GL projection matrix so wecan calculate the z values from the user input z values |
336 | // the user specified range | ||
337 | var zNear = world.getZNear(), zFar = world.getZFar(); | 352 | var zNear = world.getZNear(), zFar = world.getZFar(); |
338 | var zMin = (-(this._zmin - world.getViewDistance())*(zFar - zNear) + 2.0*zFar*zNear)/(zFar + zNear), | 353 | var viewDist = world.getViewDistance(); |
339 | zMax = (-(this._zmax - world.getViewDistance())*(zFar - zNear) + 2.0*zFar*zNear)/(zFar + zNear); | 354 | var projMat = Matrix.makePerspective( world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); |
340 | if (zMin > zMax) { var t = zMin; zMin = zMax; zMax = t; } | 355 | var camMat = world.getCameraMat(); |
341 | var dz = zMax - zMin; | 356 | var camMatInv = glmat4.inverse( camMat, [] ); |
357 | var glCompleteMat = glmat4.multiply( projMat, camMatInv, [] ); | ||
358 | var zw1_c = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -zNear + viewDist], glCompleteMat )[2], | ||
359 | zw2_c = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -zFar + viewDist], glCompleteMat )[2]; | ||
360 | var glCompleteMatInv = glmat4.inverse( glCompleteMat, [] ); | ||
361 | var zMin = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -this._zmin + viewDist], glCompleteMat )[2], | ||
362 | zMax = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -this._zmax + viewDist], glCompleteMat )[2]; | ||
363 | |||
364 | zMax = -this._zmin + viewDist; | ||
365 | zMin = -this._zmax + viewDist; | ||
366 | dz = zMax - zMin; | ||
367 | |||
368 | // the adjusted values are what get sent to the shader | ||
369 | this._adjustedZMin = zMin; | ||
370 | this._adjustedZMax = zMax; | ||
342 | 371 | ||
372 | |||
373 | // build the polygons | ||
343 | var verts = [], | 374 | var verts = [], |
344 | normals = [ [0,0,1], [0,0,1], [0,0,1], [0,0,1] ], | 375 | normals = [ [0,0,1], [0,0,1], [0,0,1], [0,0,1] ], |
345 | uvs = [ [0,0], [1,0], [1,1], [0,1] ]; | 376 | uvs = [ [0,0], [1,0], [1,1], [0,1] ]; |
346 | 377 | ||
347 | for ( i = 0; i < 20; i++ ) | 378 | for ( i = 0; i < 20; i++ ) |
348 | { | 379 | { |
349 | var x = hWidth*2*(Math.random() - 0.5), | 380 | // var x = hWidth*2*(Math.random() - 0.5), |
350 | //y = hHeight*2.0*(Math.random() * Math.random() - 0.5), | 381 | // y = hHeight*2.0*(Math.random() - 0.5), |
351 | y = hHeight*2.0*(Math.random() - 0.5), | 382 | var x = left + Math.random()*width, |
383 | y = top + Math.random()*height, | ||
352 | z = zMin + Math.random()*dz; | 384 | z = zMin + Math.random()*dz; |
353 | zRot = (Math.random() - 0.5) * Math.PI, | 385 | zRot = (Math.random() - 0.5) * Math.PI, |
354 | sz = cloudSize * Math.random(); | 386 | sz = cloudSize * Math.random(); |
355 | 387 | ||
356 | //x = 0.0; y = 0.0; z = 0.0; | 388 | //x = 0.0; y = 0.0; z = 0.0; |
357 | //zRot = 0.0; | 389 | //zRot = 0.0; |
390 | //z = 0; | ||
358 | 391 | ||
359 | verts[0] = [-sz, -sz, 0]; | 392 | verts[0] = [-sz, -sz, 0]; |
360 | verts[1] = [-sz, sz, 0]; | 393 | verts[1] = [-sz, sz, 0]; |
@@ -370,6 +403,11 @@ var CloudMaterial = function CloudMaterial() { | |||
370 | glmat4.multiplyVec3( mat, verts[2] ); | 403 | glmat4.multiplyVec3( mat, verts[2] ); |
371 | glmat4.multiplyVec3( mat, verts[3] ); | 404 | glmat4.multiplyVec3( mat, verts[3] ); |
372 | 405 | ||
406 | var tmp0 = MathUtils.transformAndDivideHomogeneousPoint( verts[0], glCompleteMat ), | ||
407 | tmp1 = MathUtils.transformAndDivideHomogeneousPoint( verts[1], glCompleteMat ), | ||
408 | tmp2 = MathUtils.transformAndDivideHomogeneousPoint( verts[2], glCompleteMat ), | ||
409 | tmp3 = MathUtils.transformAndDivideHomogeneousPoint( verts[3], glCompleteMat ); | ||
410 | |||
373 | RectangleGeometry.addQuad( verts, normals, uvs ); | 411 | RectangleGeometry.addQuad( verts, normals, uvs ); |
374 | } | 412 | } |
375 | 413 | ||