aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhwc4872012-04-13 07:08:42 -0700
committerhwc4872012-04-13 07:08:42 -0700
commit331b2ad4d602016f9bb3d03be759fd81fed50c10 (patch)
tree6bd56180f319d400881356626f32919a4d6b1f63
parent1fa8516bcd0fb0277c13a7081b5a51ce041d3496 (diff)
downloadninja-331b2ad4d602016f9bb3d03be759fd81fed50c10.tar.gz
Cloud Material
-rw-r--r--assets/shaders/Cloud.frag.glsl4
-rw-r--r--assets/shaders/Cloud.vert.glsl2
-rwxr-xr-xjs/lib/drawing/world.js9
-rwxr-xr-xjs/lib/geom/rectangle.js6
-rw-r--r--js/lib/rdge/materials/cloud-material.js118
5 files changed, 89 insertions, 50 deletions
diff --git a/assets/shaders/Cloud.frag.glsl b/assets/shaders/Cloud.frag.glsl
index 522e17bb..b07bb627 100644
--- a/assets/shaders/Cloud.frag.glsl
+++ b/assets/shaders/Cloud.frag.glsl
@@ -12,12 +12,12 @@ precision highp float;
12uniform sampler2D u_tex0; 12uniform sampler2D u_tex0;
13uniform float u_surfaceAlpha; 13uniform float u_surfaceAlpha;
14 14
15varying vec4 v_Colors;
16varying vec2 v_texCoord0; 15varying vec2 v_texCoord0;
17 16
18 17
19void main() 18void main()
20{ 19{
21 gl_FragColor = texture2D(u_tex0, v_texCoord0) * u_surfaceAlpha; 20 // gl_FragColor = texture2D(u_tex0, v_texCoord0) * u_surfaceAlpha;
21 gl_FragColor = vec4(1,0,0,1);
22} 22}
23 \ No newline at end of file 23 \ No newline at end of file
diff --git a/assets/shaders/Cloud.vert.glsl b/assets/shaders/Cloud.vert.glsl
index c673e40c..9a235349 100644
--- a/assets/shaders/Cloud.vert.glsl
+++ b/assets/shaders/Cloud.vert.glsl
@@ -35,7 +35,7 @@ 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 //pos.z += u_time*zSpeed;
39 gl_Position = u_projMatrix * u_mvMatrix * pos; 39 gl_Position = u_projMatrix * u_mvMatrix * pos;
40 40
41 v_texCoord0 = texcoord; 41 v_texCoord0 = texcoord;
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index da8a26ad..5eca26b8 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -333,6 +333,15 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
333 rtnVal = this.hHasAnimatedMaterials( root ); 333 rtnVal = this.hHasAnimatedMaterials( root );
334 this._hasAnimatedMaterials = rtnVal; 334 this._hasAnimatedMaterials = rtnVal;
335 } 335 }
336 else
337 {
338 // currently...
339 // we set this case to true - cloud materials create a
340 // world with no objects but cloud materials animate.
341 // TODO - find a better way to do this
342 rtnVal = true;
343 this._hasAnimatedMaterials = true;
344 }
336 345
337 return rtnVal; 346 return rtnVal;
338 }; 347 };
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index f41c27f6..d4dd8033 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -12,7 +12,11 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel;
12// GL representation of a rectangle. 12// GL representation of a rectangle.
13// Derived from class GeomObj 13// Derived from class GeomObj
14/////////////////////////////////////////////////////////////////////// 14///////////////////////////////////////////////////////////////////////
15var Rectangle = function GLRectangle() { 15var Rectangle = function GLRectangle()
16{
17 if (!MaterialsModel)
18 MaterialsModel = require("js/models/materials-model").MaterialsModel;
19
16 // CONSTANTS 20 // CONSTANTS
17 this.N_TRIANGLES = 15; 21 this.N_TRIANGLES = 15;
18 22
diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js
index cec00696..126751c6 100644
--- a/js/lib/rdge/materials/cloud-material.js
+++ b/js/lib/rdge/materials/cloud-material.js
@@ -121,14 +121,21 @@ var CloudMaterial = function CloudMaterial() {
121 var canvasID = "__canvas__"; 121 var canvasID = "__canvas__";
122 //this._srcCanvas = doc.createElement(canvasID); 122 //this._srcCanvas = doc.createElement(canvasID);
123 this._srcCanvas = NJUtils.makeNJElement("canvas", canvasID, "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); 123 this._srcCanvas = NJUtils.makeNJElement("canvas", canvasID, "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
124 var dstCanvas = this.getWorld().getCanvas(),
125 srcCanvas = this._srcCanvas;
126 srcCanvas.width = dstCanvas.width;
127 srcCanvas.height = dstCanvas.height;
128
129 // save the current RDGE context
130 var saveContext = g_Engine.getContext();
124 131
125 // build a world to do the rendering 132 // build a world to do the rendering
126 this._srcWorld = new GLWorld( this._srcCanvas, true ); 133 this._srcWorld = new GLWorld( this._srcCanvas, true, true );
127 var srcWorld = this._srcWorld; 134 var srcWorld = this._srcWorld;
128 this._srcCanvas.__GLWorld = srcWorld; 135 this._srcCanvas.__GLWorld = srcWorld;
129 136
130 // build the geometry 137 // build the geometry
131 var prim = this.buildGeometry(); 138 var prim = this.buildGeometry( srcWorld, srcCanvas.width, srcCanvas.height );
132 139
133 // set up the shader 140 // set up the shader
134 this._shader = new jshader(); 141 this._shader = new jshader();
@@ -149,6 +156,12 @@ var CloudMaterial = function CloudMaterial() {
149 t.u_surfaceAlpha.set( [this._surfaceAlpha] ); 156 t.u_surfaceAlpha.set( [this._surfaceAlpha] );
150 t.u_zmin.set( [this._zmin] ); 157 t.u_zmin.set( [this._zmin] );
151 t.u_zmax.set( [this._zmax] ); 158 t.u_zmax.set( [this._zmax] );
159
160 var wrap = 'REPEAT', mips = true;
161 var texMapName = this._propValues[this._propNames[0]];
162 var tex = srcWorld.renderer.getTextureByName(texMapName, wrap, mips );
163 if (tex)
164 srcWorld.textureToLoad( tex );
152 } 165 }
153 } 166 }
154 167
@@ -160,16 +173,25 @@ var CloudMaterial = function CloudMaterial() {
160 173
161 // create the texture 174 // create the texture
162 var wrap = 'REPEAT', mips = true; 175 var wrap = 'REPEAT', mips = true;
176 this._srcWorld._hasAnimatedMaterials = true; // hack to make the texture think this world is animated
163 this._glTex = new Texture( world, this._srcCanvas, wrap, mips ); 177 this._glTex = new Texture( world, this._srcCanvas, wrap, mips );
164 178
165 // set the shader values in the shader 179 // set the shader values in the shader
166 this.updateTexture(); 180 this.updateTexture();
167 this.update( 0 ); 181 this.update( 0 );
182
183 // restore the previous RDGE context
184 g_Engine.setContext( saveContext.id );
168 }; 185 };
169 186
170 this.updateTexture = function() { 187 this.updateTexture = function() {
171 var material = this._materialNode; 188 var material = this._materialNode;
172 if (material) { 189 if (material)
190 {
191 // save the current context
192 var saveContext = g_Engine.getContext();
193 g_Engine.setContext( this._srcCanvas.rdgeid );
194
173 var technique = material.shaderProgram['default']; 195 var technique = material.shaderProgram['default'];
174 var renderer = g_Engine.getContext().renderer; 196 var renderer = g_Engine.getContext().renderer;
175 if (renderer && technique) { 197 if (renderer && technique) {
@@ -185,8 +207,22 @@ var CloudMaterial = function CloudMaterial() {
185 } 207 }
186 208
187 } 209 }
210
211 g_Engine.setContext( saveContext.id );
188 } 212 }
189 }; 213 };
214
215 this.updateTextures = function()
216 {
217 if (this._glTex)
218 {
219 if (!this._glTex.isAnimated())
220 {
221 this._glTex.render();
222 this.updateTexture();
223 }
224 }
225 }
190 226
191 this.update = function( time ) 227 this.update = function( time )
192 { 228 {
@@ -215,12 +251,43 @@ var CloudMaterial = function CloudMaterial() {
215 } 251 }
216 }; 252 };
217 253
218 this.buildGeometry = function() 254 this.buildGeometry = function(world, canvasWidth, canvasHeight)
219 { 255 {
220 var RectangleGeometry = require("js/lib/geom/rectangle").RectangleGeometry; 256 var RectangleGeometry = require("js/lib/geom/rectangle").RectangleGeometry;
221 257
222 RectangleGeometry.init(); 258 RectangleGeometry.init();
223 259
260 // get the normalized device coordinates (NDC) for
261 // all position and dimensions.
262 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
263 var xNDC = 0.0/vpw, yNDC = 0.0/vph,
264 xFillNDC = canvasWidth/vpw, yFillNDC = canvasHeight/vph;
265
266 var aspect = world.getAspect();
267 var zn = world.getZNear(), zf = world.getZFar();
268 var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
269 b = -t,
270 r = aspect*t,
271 l = -r;
272
273 // calculate the object coordinates from their NDC coordinates
274 var z = -world.getViewDistance();
275
276 // get the position of the origin
277 var x = -z*(r-l)/(2.0*zn)*xNDC,
278 y = -z*(t-b)/(2.0*zn)*yNDC;
279
280 // get the x and y fill
281 var xFill = -z*(r-l)/(2.0*zn)*xFillNDC,
282 yFill = -z*(t-b)/(2.0*zn)*yFillNDC;
283
284
285 //this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial);
286 var ctr = [x,y], width = 2*xFill, height = 2*yFill;
287 var prim = RectangleGeometry.create( ctr, width, height );