From c1a6cacf364d79cbf23b41e7089a1a6d39afea85 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 10 Apr 2012 10:12:49 -0700 Subject: Cloud material --- js/lib/geom/rectangle.js | 30 ++++++++ js/lib/rdge/materials/cloud-material.js | 122 +++++++++++++++++++++----------- 2 files changed, 111 insertions(+), 41 deletions(-) (limited to 'js/lib') 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 -- cgit v1.2.3