diff options
author | hwc487 | 2012-04-16 05:59:01 -0700 |
---|---|---|
committer | hwc487 | 2012-04-16 05:59:01 -0700 |
commit | c0aa5e88890fbf74124d019df96c33215da99f17 (patch) | |
tree | 9bff6d97cc19288b4d2c7bfd40a71f608b853fab | |
parent | 8992d9baf542135e910bb59328a592d9e330703a (diff) | |
download | ninja-c0aa5e88890fbf74124d019df96c33215da99f17.tar.gz |
Cloud material
-rw-r--r-- | assets/shaders/Cloud.frag.glsl | 5 | ||||
-rw-r--r-- | assets/shaders/Cloud.vert.glsl | 12 | ||||
-rw-r--r-- | js/lib/rdge/materials/cloud-material.js | 53 | ||||
-rw-r--r-- | js/lib/rdge/texture.js | 4 |
4 files changed, 43 insertions, 31 deletions
diff --git a/assets/shaders/Cloud.frag.glsl b/assets/shaders/Cloud.frag.glsl index ba1ef39e..c21dcf97 100644 --- a/assets/shaders/Cloud.frag.glsl +++ b/assets/shaders/Cloud.frag.glsl | |||
@@ -17,7 +17,8 @@ varying vec2 v_texCoord0; | |||
17 | 17 | ||
18 | void main() | 18 | void main() |
19 | { | 19 | { |
20 | gl_FragColor = texture2D(u_tex0, v_texCoord0) * u_surfaceAlpha; | 20 | vec4 c = texture2D(u_tex0, v_texCoord0); |
21 | //gl_FragColor = texture2D(u_tex0, v_texCoord0); | 21 | //c.a *= u_surfaceAlpha; |
22 | gl_FragColor = c; | ||
22 | } | 23 | } |
23 | \ 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 9a235349..c8ca9f3f 100644 --- a/assets/shaders/Cloud.vert.glsl +++ b/assets/shaders/Cloud.vert.glsl | |||
@@ -28,14 +28,22 @@ uniform mat4 u_worldMatrix; | |||
28 | varying vec2 v_texCoord0; | 28 | varying vec2 v_texCoord0; |
29 | 29 | ||
30 | // constants | 30 | // constants |
31 | const float zSpeed = 1.0; | 31 | const float zSpeed = 2.0; |
32 | 32 | ||
33 | 33 | ||
34 | void main() | 34 | void main() |
35 | { | 35 | { |
36 | // Transform position | 36 | // Transform position |
37 | vec4 pos = vec4(a_pos,1); | 37 | vec4 pos = vec4(a_pos,1); |
38 | //pos.z += u_time*zSpeed; | 38 | float dz = u_time*zSpeed; |
39 | float n = floor( dz/(u_zmax-u_zmin) ); | ||
40 | dz -= n*(u_zmax - u_zmin); | ||
41 | float z = pos.z + dz; | ||
42 | if (z > u_zmax) | ||
43 | { | ||
44 | z = u_zmin + (z - u_zmax); | ||
45 | } | ||
46 | pos.z = z; | ||
39 | gl_Position = u_projMatrix * u_mvMatrix * pos; | 47 | gl_Position = u_projMatrix * u_mvMatrix * pos; |
40 | 48 | ||
41 | v_texCoord0 = texcoord; | 49 | v_texCoord0 = texcoord; |
diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js index e2292c7a..2b40b84c 100644 --- a/js/lib/rdge/materials/cloud-material.js +++ b/js/lib/rdge/materials/cloud-material.js | |||
@@ -31,13 +31,13 @@ var CloudMaterial = function CloudMaterial() { | |||
31 | this._cloudSize = 40; | 31 | this._cloudSize = 40; |
32 | 32 | ||
33 | this._time = 0.0; | 33 | this._time = 0.0; |
34 | this._dTime = 0.01; | 34 | this._dTime = 0.001; |
35 | 35 | ||
36 | // parameter initial values | 36 | // parameter initial values |
37 | this._time = 0.0; | 37 | this._time = 0.0; |
38 | this._surfaceAlpha = 0.6; | 38 | this._surfaceAlpha = 0.5; |
39 | this._zmin = 0.1; | 39 | this._zmin = 6.0; |
40 | this._zmax = 10.0; | 40 | this._zmax = 10; |
41 | 41 | ||
42 | 42 | ||
43 | /////////////////////////////////////////////////////////////////////// | 43 | /////////////////////////////////////////////////////////////////////// |
@@ -129,9 +129,9 @@ var CloudMaterial = function CloudMaterial() { | |||
129 | 129 | ||
130 | ////////////////////////////////////////////////////////////////////////////////// | 130 | ////////////////////////////////////////////////////////////////////////////////// |
131 | // IS THIS NECESSARY?? | 131 | // IS THIS NECESSARY?? |
132 | //var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height, | 132 | var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height, |
133 | // Matrix.I(4), [0,0,0], srcCanvas); | 133 | Matrix.I(4), [0,0,0], srcCanvas); |
134 | //ElementMediator.addElement(srcCanvas, elementModel.data, true); | 134 | ElementMediator.addElement(srcCanvas, elementModel.data, true); |
135 | ////////////////////////////////////////////////////////////////////////////////// | 135 | ////////////////////////////////////////////////////////////////////////////////// |
136 | 136 | ||
137 | // build the source. | 137 | // build the source. |
@@ -212,13 +212,12 @@ var CloudMaterial = function CloudMaterial() { | |||
212 | renderer = g_Engine.getContext().renderer; | 212 | renderer = g_Engine.getContext().renderer; |
213 | if (renderer && technique) | 213 | if (renderer && technique) |
214 | { | 214 | { |
215 | if (this._glTex) | 215 | if (this._glTex) |
216 | { | 216 | { |
217 | this._glTex.render(); | 217 | this._glTex.render(); |
218 | tex = this._glTex.getTexture(); | 218 | tex = this._glTex.getTexture(); |
219 | technique.u_tex0.set( tex ); | 219 | technique.u_tex0.set( tex ); |
220 | } | 220 | } |
221 | } | ||
222 | } | 221 | } |
223 | } | 222 | } |
224 | 223 | ||
@@ -230,13 +229,10 @@ var CloudMaterial = function CloudMaterial() { | |||
230 | renderer = g_Engine.getContext().renderer; | 229 | renderer = g_Engine.getContext().renderer; |
231 | if (renderer && technique) | 230 | if (renderer && technique) |
232 | { | 231 | { |
233 | if (this._shader && this._shader['default']) { | 232 | technique.u_time.set( [this._time] ); |
234 | this._shader['default'].u_time.set( [this._time] ); | ||
235 | } | ||
236 | |||
237 | this._time += this._dTime; | 233 | this._time += this._dTime; |
238 | if (this._time > 200.0) this._time = 0.0; | ||
239 | } | 234 | } |
235 | } | ||
240 | }; | 236 | }; |
241 | 237 | ||
242 | this.buildSource = function() | 238 | this.buildSource = function() |
@@ -293,6 +289,9 @@ var CloudMaterial = function CloudMaterial() { | |||
293 | } | 289 | } |
294 | } | 290 | } |
295 | 291 | ||
292 | // start the render loop on the source canvas | ||
293 | srcWorld.restartRenderLoop(); | ||
294 | |||
296 | // restore the original context | 295 | // restore the original context |
297 | g_Engine.setContext( saveContext.id ); | 296 | g_Engine.setContext( saveContext.id ); |
298 | this.getWorld().start(); | 297 | this.getWorld().start(); |
@@ -332,19 +331,25 @@ var CloudMaterial = function CloudMaterial() { | |||
332 | //this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); | 331 | //this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); |
333 | var ctr = [x,y], width = 2*hWidth, height = 2*hHeight; | 332 | var ctr = [x,y], width = 2*hWidth, height = 2*hHeight; |
334 | var cloudSize = width > height ? 0.25*width : 0.25*height; | 333 | var cloudSize = width > height ? 0.25*width : 0.25*height; |
335 | //var prim = RectangleGeometry.create( ctr, width, height ); | 334 | |
336 | //return prim; | 335 | // calculate the range of z's in GL space from |
336 | // the user specified range | ||
337 | var zNear = world.getZNear(), zFar = world.getZFar(); | ||
338 | var zMin = (-(this._zmin - world.getViewDistance())*(zFar - zNear) + 2.0*zFar*zNear)/(zFar + zNear), | ||
339 | zMax = (-(this._zmax - world.getViewDistance())*(zFar - zNear) + 2.0*zFar*zNear)/(zFar + zNear); | ||
340 | if (zMin > zMax) { var t = zMin; zMin = zMax; zMax = t; } | ||
341 | var dz = zMax - zMin; | ||
337 | 342 | ||
338 | var verts = [], | 343 | var verts = [], |
339 | normals = [ [0,0,1], [0,0,1], [0,0,1], [0,0,1] ], | 344 | normals = [ [0,0,1], [0,0,1], [0,0,1], [0,0,1] ], |
340 | uvs = [ [0,0], [1,0], [1,1], [0,1] ]; | 345 | uvs = [ [0,0], [1,0], [1,1], [0,1] ]; |
341 | 346 | ||
342 | for ( i = 0; i < 12; i++ ) | 347 | for ( i = 0; i < 20; i++ ) |
343 | { | 348 | { |
344 | var x = hWidth*2*(Math.random() - 0.5), | 349 | var x = hWidth*2*(Math.random() - 0.5), |
345 | //y = hHeight*2.0*(Math.random() * Math.random() - 0.5), | 350 | //y = hHeight*2.0*(Math.random() * Math.random() - 0.5), |
346 | y = hHeight*2.0*(Math.random() - 0.5), | 351 | y = hHeight*2.0*(Math.random() - 0.5), |
347 | z = 0, //i, | 352 | z = zMin + Math.random()*dz; |
348 | zRot = (Math.random() - 0.5) * Math.PI, | 353 | zRot = (Math.random() - 0.5) * Math.PI, |
349 | sz = cloudSize * Math.random(); | 354 | sz = cloudSize * Math.random(); |
350 | 355 | ||
@@ -357,9 +362,7 @@ var CloudMaterial = function CloudMaterial() { | |||
357 | verts[3] = [ sz, -sz, 0]; | 362 | verts[3] = [ sz, -sz, 0]; |
358 | 363 | ||
359 | var rotMat = Matrix.RotationZ( zRot ); | 364 | var rotMat = Matrix.RotationZ( zRot ); |
360 | //var scaleMat = Matrix.Scale( [sz,sz,sz] ); | ||
361 | var transMat = Matrix.Translation( [x,y,z] ); | 365 | var transMat = Matrix.Translation( [x,y,z] ); |
362 | |||
363 | var mat = glmat4.multiply( transMat, rotMat, [] ); | 366 | var mat = glmat4.multiply( transMat, rotMat, [] ); |
364 | 367 | ||
365 | glmat4.multiplyVec3( mat, verts[0] ); | 368 | glmat4.multiplyVec3( mat, verts[0] ); |
diff --git a/js/lib/rdge/texture.js b/js/lib/rdge/texture.js index 15f786ea..628f22ba 100644 --- a/js/lib/rdge/texture.js +++ b/js/lib/rdge/texture.js | |||
@@ -122,8 +122,8 @@ function Texture( dstWorld, texMapName, wrap, mips ) | |||
122 | 122 | ||
123 | case notifier.FIRST_RENDER: | 123 | case notifier.FIRST_RENDER: |
124 | texture._isAnimated = srcWorld.hasAnimatedMaterials(); | 124 | texture._isAnimated = srcWorld.hasAnimatedMaterials(); |
125 | dstWorld.refreshTextures(); | 125 | //dstWorld.refreshTextures(); |
126 | dstWorld.restartRenderLoop(); | 126 | //dstWorld.restartRenderLoop(); |
127 | break; | 127 | break; |
128 | 128 | ||
129 | default: | 129 | default: |