From c1a6cacf364d79cbf23b41e7089a1a6d39afea85 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Tue, 10 Apr 2012 10:12:49 -0700
Subject: Cloud material
---
assets/shaders/Cloud.frag.glsl | 23 ++++++
assets/shaders/Cloud.vert.glsl | 42 +++++++++++
js/lib/geom/rectangle.js | 30 ++++++++
js/lib/rdge/materials/cloud-material.js | 122 +++++++++++++++++++++-----------
js/models/materials-model.js | 3 +
5 files changed, 179 insertions(+), 41 deletions(-)
create mode 100644 assets/shaders/Cloud.frag.glsl
create mode 100644 assets/shaders/Cloud.vert.glsl
diff --git a/assets/shaders/Cloud.frag.glsl b/assets/shaders/Cloud.frag.glsl
new file mode 100644
index 00000000..522e17bb
--- /dev/null
+++ b/assets/shaders/Cloud.frag.glsl
@@ -0,0 +1,23 @@
+/*
+This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform sampler2D u_tex0;
+uniform float u_surfaceAlpha;
+
+varying vec4 v_Colors;
+varying vec2 v_texCoord0;
+
+
+void main()
+{
+ gl_FragColor = texture2D(u_tex0, v_texCoord0) * u_surfaceAlpha;
+}
+
\ No newline at end of file
diff --git a/assets/shaders/Cloud.vert.glsl b/assets/shaders/Cloud.vert.glsl
new file mode 100644
index 00000000..fbd7f40b
--- /dev/null
+++ b/assets/shaders/Cloud.vert.glsl
@@ -0,0 +1,42 @@
+/*
+This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+
+#ifdef GL_ES
+precision highp float;
+#endif
+
+// attributes
+attribute vec3 a_pos;
+attribute vec2 texcoord;
+
+// uniforms
+uniform float u_time;
+uniform float u_zmin;
+uniform float u_zmax;
+uniform float u_surfaceAlpha;
+
+// matrix uniforms
+uniform mat4 u_mvMatrix;
+uniform mat4 u_projMatrix;
+uniform mat4 u_worldMatrix;
+
+// varying
+varying vec2 v_texCoord0;
+
+// constants
+const float zSpeed = 1.0;
+
+
+void main()
+{
+ // Transform position
+ vec4 pos = a_pos;
+ pos.z += u+time*zSpeed;
+ gl_Position = u_projMatrix * u_mvMatrix * pos;
+
+ v_texCoord0 = texcoord;
+}
\ No newline at end of file
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 51947ff1..f41c27f6 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -1280,11 +1280,41 @@ RectangleGeometry.pushIndices = RectangleFill.pushIndices;
RectangleGeometry.getVertex = RectangleFill.getVertex;
RectangleGeometry.getUV = RectangleFill.getUV;
+RectangleGeometry.init = function()
+{
+ this.vertices = [];
+ this.normals = [];
+ this.uvs = [];
+ this.indices = [];
+}
+
+RectangleGeometry.addQuad = function( verts, normals, uvs )
+{
+ for (var i=0; i<4; i++)
+ {
+ RectangleGeometry.pushVertex( verts[i][0], verts[i][1], verts[i][2]);
+ RectangleGeometry.pushNormal( normals[i] );
+ RectangleGeometry.pushUV( uvs[i] );
+ }
+
+ RectangleGeometry.pushIndices( 0, 1, 2 );
+ RectangleGeometry.pushIndices( 2, 3, 0 );
+}
+
+RectangleGeometry.buildPrimitive = function()
+{
+ var nVertices = this.vertices.length;
+ return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.TRIANGLES, nVertices);
+}
+
+
+
Rectangle.prototype = new GeomObj();
if (typeof exports === "object") {
exports.Rectangle = Rectangle;
+ exports.RectangleGeometry = RectangleGeometry;
}
diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js
index f7f4c6bb..198f7cfa 100644
--- a/js/lib/rdge/materials/cloud-material.js
+++ b/js/lib/rdge/materials/cloud-material.js
@@ -4,8 +4,11 @@
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
-var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser;
-var Material = require("js/lib/rdge/materials/material").Material;
+var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser;
+var Material = require("js/lib/rdge/materials/material").Material;
+var GLWorld = require("js/lib/drawing/world").World;
+var Texture = require("js/lib/rdge/texture").Texture;
+
///////////////////////////////////////////////////////////////////////
// Class GLMaterial
// RDGE representation of a material.
@@ -20,9 +23,19 @@ var CloudMaterial = function CloudMaterial() {
this._texMap = 'assets/images/cloud2.jpg';
this._diffuseColor = [0.5, 0.5, 0.5, 0.5];
+ // base size of cloud polygons. Random adjustments made to each quad
+ this._cloudSize = 40;
+
this._time = 0.0;
this._dTime = 0.01;
+ // parameter initial values
+ this._time = 0.0;
+ this._surfaceAlpha = 0.5;
+ this._zmin = 0.1;
+ this._zmax = 10.0;
+
+
///////////////////////////////////////////////////////////////////////
// Property Accessors
///////////////////////////////////////////////////////////////////////
@@ -32,9 +45,6 @@ var CloudMaterial = function CloudMaterial() {
this.getTextureMap = function() { return this._propValues[this._propNames[0]] ? this._propValues[this._propNames[0]].slice() : null };
this.setTextureMap = function(m) { this._propValues[this._propNames[0]] = m ? m.slice(0) : null; this.updateTexture(); };
- this.setDiffuseColor = function(c) { this._propValues[this._propNames[1]] = c.slice(0); this.updateColor(); };
- this.getDiffuseColor = function() { return this._propValues[this._propNames[1]] ? this._propValues[this._propNames[1]].slice() : null; };
-
this.isAnimated = function() { return true; };
///////////////////////////////////////////////////////////////////////
@@ -64,10 +74,6 @@ var CloudMaterial = function CloudMaterial() {
this.setTextureMap(value);
break;
- case "diffusecolor":
- this.setDiffuseColor( value );
- break;
-
case "color":
break;
}
@@ -100,6 +106,8 @@ var CloudMaterial = function CloudMaterial() {
this.init = function( world )
{
+ var GLWorld = require("js/lib/drawing/world").World;
+
// save the world
if (world) this.setWorld( world );
@@ -107,6 +115,18 @@ var CloudMaterial = function CloudMaterial() {
// the cloud material runs a little faster
this._dTime = 0.01;
+ // create a canvas to render into
+ var doc = world.getCanvas().ownerDocument;
+ var canvasID = "__canvas__";
+ this._srcCanvas = doc.createElement(canvasID);
+
+ // build a world to do the rendering
+ this._srcWorld = new GLWorld( this._srcCanvas, true );
+ var srcWorld = this._srcWorld;
+
+ // build the geometry
+ var prim = this.buildGeometry();
+
// set up the shader
this._shader = new jshader();
this._shader.def = cloudMaterialDef;
@@ -116,31 +136,34 @@ var CloudMaterial = function CloudMaterial() {
this._materialNode = createMaterialNode("cloudMaterial" + "_" + world.generateUniqueNodeID());
this._materialNode.setShader(this._shader);
+ // initialize the shader uniforms
this._time = 0;
if (this._shader && this._shader['default']) {
- this._shader['default'].u_time.set( [this._time] );
- this._shader['default'].u_DiffuseColor.set( this._diffuseColor );
+ var t = this._shader['default'];
+ if (t)
+ {
+ t.u_time.set( [this._time] );
+ t.u_surfaceAlpha.set( [this._surfaceAlpha] );
+ t.u_zmin.set( [this._zmin] );
+ t.u_zmax.set( [this._zmax] );
+ }
}
+ // add the nodes to the tree
+ var trNode = createTransformNode("objRootNode_" + this._srcWorld._nodeCounter++);
+ srcWorld._rootNode.insertAsChild( trNode );
+ trNode.attachMeshNode(srcWorld.renderer.id + "_prim_" + srcWorld._nodeCounter++, prim);
+ trNode.attachMaterial( this._materialNode );
+
+ // create the texture
+ var wrap = 'REPEAT', mips = true;
+ this._glTex = new Texture( dstWorld, canvasID, wrap, mips );
+
// set the shader values in the shader
this.updateTexture();
this.update( 0 );
};
- this.updateColor = function()
- {
- var material = this._materialNode;
- if (material)
- {
- var technique = material.shaderProgram['default'];
- var renderer = g_Engine.getContext().renderer;
- if (renderer && technique) {
- var color = this._propValues[this._propNames[1]];
- technique.u_DiffuseColor.set( this._diffuseColor );
- }
- }
- }
-
this.updateTexture = function() {
var material = this._materialNode;
if (material) {
@@ -171,30 +194,45 @@ var CloudMaterial = function CloudMaterial() {
}
this._time += this._dTime;
+ if (this._glTex)
+ {
+ this._glTex.render();
+ var tex = this._glTex.getTexture();
+ technique.u_tex0.set( tex );
+ }
+
if (this._time > 200.0) this._time = 0.0;
}
}
};
- this.generateQuads = function()
+ this.buildGeometry = function()
{
- var quads = [];
- for ( i = 0; i < 8000; i++ )
+ var RectangleGeometry = require("js/lib/geom/rectangle").RectangleGeometry;
+
+ RectangleGeometry.init();
+
+ var verts = [],
+ norms = [ [0,0,1], [0,0,1], [0,0,1], [0,0,1] ],
+ uvs = [ [0,0], [1,0], [1,1], [0,1] ];
+
+ for ( i = 0; i < 2; i++ )
{
- var quad =
- {
- }
- x: Math.random() * 1000 - 500,
+ var x = Math.random() * 1000 - 500,
y = - Math.random() * Math.random() * 200 - 15,
z = i,
- rotation.z = Math.random() * Math.PI,
- scale = Math.random() * Math.random() * 1.5 + 0.5,
- }
-
- quads.push( quad );
+ zRot = Math.random() * Math.PI,
+ size = this._cloudSize * Math.random() * Math.random() * 1.5 + 0.5;
+ var sz = 0.5*size;
+
+ verts[0] = [x-sz, y-sz, z];
+ verts[1] = [x-sz, y+sz, z];
+ verts[2] = [x+sz, y+sz, z];
+ verts[3] = [x+sz, y-sz, z];
+ RectangleGeometry.addQuad( verts, normals, uvs )
}
- this._quads = quads;
+ return RectangleGeometry.buildPrimitive();
};
// JSON export
@@ -294,9 +332,11 @@ var cloudMaterialDef =
// parameters
'params' :
{
- 'u_tex0': { 'type' : 'tex2d' },
- 'u_time' : { 'type' : 'float' },
- 'u_DiffuseColor' : { 'type' : 'vec4' }
+ 'u_tex0' : { 'type' : 'tex2d' },
+ 'u_time' : { 'type' : 'float' },
+ 'u_surfaceAlpha' : { 'type' : 'float' },
+ 'u_zmin' : { 'type' : 'float' },
+ 'u_zmax' : { 'type' : 'float' }
},
// render states
diff --git a/js/models/materials-model.js b/js/models/materials-model.js
index a06f692b..178be3f2 100755
--- a/js/models/materials-model.js
+++ b/js/models/materials-model.js
@@ -16,6 +16,7 @@ var LinearGradientMaterial = require("js/lib/rdge/materials/linear-gradient-mate
var RadialGradientMaterial = require("js/lib/rdge/materials/radial-gradient-material").RadialGradientMaterial;
var BumpMetalMaterial = require("js/lib/rdge/materials/bump-metal-material").BumpMetalMaterial;
var UberMaterial = require("js/lib/rdge/materials/uber-material").UberMaterial;
+var CloudMaterial = require("js/lib/rdge/materials/cloud-material").CloudMaterial;
var RadialBlurMaterial = require("js/lib/rdge/materials/radial-blur-material").RadialBlurMaterial;
var RaidersMaterial = require("js/lib/rdge/materials/radial-blur-material").RaidersMaterial;
var PlasmaMaterial = require("js/lib/rdge/materials/plasma-material").PlasmaMaterial;
@@ -52,6 +53,7 @@ exports.MaterialsModel = Montage.create(Component, {
this.addMaterial(new RadialGradientMaterial());
this.addMaterial(new BumpMetalMaterial());
this.addMaterial(new UberMaterial());
+ this.addMaterial(new CloudMaterial());
this.addMaterial(new RadialBlurMaterial());
this.addMaterial(new RaidersMaterial());
this.addMaterial(new PlasmaMaterial());
@@ -232,6 +234,7 @@ exports.MaterialsModel = Montage.create(Component, {
case "radialGradient": mat = new RadialGradientMaterial(); break;
case "bumpMetal": mat = new BumpMetalMaterial(); break;
case "uber": mat = new UberMaterial(); break;
+ case "cloud": mat = new CloudMaterial(); break;
case "taper": mat = new TaperMaterial(); break;
case "twistVert": mat = new TwistVertMaterial(); break;
--
cgit v1.2.3