diff options
-rw-r--r-- | assets/shaders/Cloud.frag.glsl | 4 | ||||
-rw-r--r-- | assets/shaders/Cloud.vert.glsl | 2 | ||||
-rwxr-xr-x | js/lib/drawing/world.js | 9 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 6 | ||||
-rw-r--r-- | js/lib/rdge/materials/cloud-material.js | 118 |
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; | |||
12 | uniform sampler2D u_tex0; | 12 | uniform sampler2D u_tex0; |
13 | uniform float u_surfaceAlpha; | 13 | uniform float u_surfaceAlpha; |
14 | 14 | ||
15 | varying vec4 v_Colors; | ||
16 | varying vec2 v_texCoord0; | 15 | varying vec2 v_texCoord0; |
17 | 16 | ||
18 | 17 | ||
19 | void main() | 18 | void 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 | /////////////////////////////////////////////////////////////////////// |
15 | var Rectangle = function GLRectangle() { | 15 | var 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 ); | ||
288 | return prim; | ||
289 | |||
290 | /* | ||