From 6c994c4b90023cecf4fd0caafb404b859fe28f54 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 6 Jun 2012 16:34:41 -0700 Subject: material cleanup and rearchitecture --- assets/canvas-runtime.js | 79 +++++++- assets/shaders/Taper.vert.glsl | 2 - js/io/system/ninjalibrary.json | 2 +- js/lib/drawing/world.js | 2 +- js/lib/geom/circle.js | 22 ++- js/lib/geom/geom-obj.js | 21 +- js/lib/geom/rectangle.js | 23 ++- js/lib/rdge/materials/bump-metal-material.js | 2 - js/lib/rdge/materials/cloud-material.js | 17 -- js/lib/rdge/materials/deform-material.js | 16 -- js/lib/rdge/materials/flag-material.js | 16 -- js/lib/rdge/materials/flat-material.js | 18 +- js/lib/rdge/materials/fly-material.js | 1 + js/lib/rdge/materials/material.js | 219 +++++++++++++++++---- js/lib/rdge/materials/pulse-material.js | 189 +++--------------- js/lib/rdge/materials/taper-material.js | 102 +++++----- js/lib/rdge/materials/water-material.js | 45 +++-- js/models/materials-model.js | 89 +++++---- .../materials-popup.reel/materials-popup.js | 16 ++ 19 files changed, 484 insertions(+), 397 deletions(-) diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index ef1d01a9..2f728c06 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -87,6 +87,10 @@ NinjaCvsRt.CanvasDataManager = Object.create(Object.prototype, { var glRt = Object.create(NinjaCvsRt.GLRuntime, {}); glRt.renderWorld(canvas, jObj, this._assetPath); } + else + { + console.log( "***** COULD NOT FIND CANVAS WITH ID " + id + " *****" ); + } } } } @@ -1491,6 +1495,79 @@ NinjaCvsRt.RuntimeTwistVertMaterial = Object.create(NinjaCvsRt.RuntimeMaterial, } }); +////////////////////////////////////////////////////// + +NinjaCvsRt.RuntimeTaperMaterial = Object.create(NinjaCvsRt.RuntimeMaterial, { + _name: { value: "TaperMaterial", writable: true }, + _shaderName: { value: "taper", writable: true }, + + _dTime: { value: 0.01, writable: true }, + _twistAmount: { value: 0.0, writable: true }, + _angle: { value: 0.0, writable: true }, + + + isAnimated: { value: function() { return true; }}, + + importJSON: { + value: function(jObj) { + this._tex0 = jObj.tex0; + this._tex1 = jObj.tex1; + + this._speed = jObj.speed; + + this._limit1 = jObj.limit1; + this._limit2 = jObj.limit2; + this._twistAmount = jObj.angle; + } + }, + + init: { + value: function(world) { + var material = this._materialNode; + if (material) + { + var technique = material.shaderProgram["colorMe"]; + var renderer = RDGE.globals.engine.getContext().renderer; + if (renderer && technique) + { + var wrap = 'REPEAT', mips = true; + var tex = renderer.getTextureByName(this._tex0, wrap, mips ); + if (tex) technique.u_tex0.set( tex ); + tex = renderer.getTextureByName(this._tex1, wrap, mips ); + if (tex) technique.u_tex1.set( tex ); + + technique.u_twistAmount.set( [this._angle] ); + technique.u_limit1.set( [this._limit1] ); + technique.u_limit2.set( [this._limit2] ); + } + } + } + }, + + // several materials inherit from pulse. + // they may share this update method + update: { + value: function(time) { + + var angle = this._angle; + angle += this._dTime * this._speed; + if (angle > this._twistAmount) + { + angle = this._twistAmount; + this._dTime = -this._dTime; + } + else if (angle < 0.0) + { + angle = 0; + this._dTime = -this._dTime; + } + this._angle = angle; + this._shader.twistMe["u_twistAmount"].set([angle]); + } + } +}); + + NinjaCvsRt.RuntimePulseMaterial = Object.create(NinjaCvsRt.RuntimeMaterial, { _name: { value: "PulseMaterial", writable: true }, _shaderName: { value: "pulse", writable: true }, @@ -1501,7 +1578,7 @@ NinjaCvsRt.RuntimePulseMaterial = Object.create(NinjaCvsRt.RuntimeMaterial, { importJSON: { value: function(jObj) { - this._texMap = jObj.texture; + this._texMap = jObj.u_tex0; if (jObj.dTime) this._dTime = jObj.dTime; } }, diff --git a/assets/shaders/Taper.vert.glsl b/assets/shaders/Taper.vert.glsl index 30b73456..eb562c2f 100644 --- a/assets/shaders/Taper.vert.glsl +++ b/assets/shaders/Taper.vert.glsl @@ -24,8 +24,6 @@ uniform float u_minVal; uniform float u_maxVal; uniform float u_center; -uniform vec4 color; - // matrix uniforms uniform mat4 u_mvMatrix; diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json index 5c1eb875..5038bd21 100644 --- a/js/io/system/ninjalibrary.json +++ b/js/io/system/ninjalibrary.json @@ -1,6 +1,6 @@ { "libraries": [ {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.10.0.0"}, - {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.7.0"} + {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.8.2"} ] } \ No newline at end of file diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 228c0d94..8068284e 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -484,11 +484,11 @@ World.prototype.updateObject = function (obj) { for (var i = 1; i < nPrims; i++) { // get the next primitive - var prim = prims[i]; childTrNode = RDGE.createTransformNode("objNode_" + this._nodeCounter++); ctrTrNode.insertAsChild(childTrNode); // attach the instanced box goe + var prim = prims[i]; childTrNode.attachMeshNode(this.renderer.id + "_prim_" + this._nodeCounter++, prim); childTrNode.attachMaterial(materialNodes[i]); } diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index b2709ce4..6627b4b7 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -57,16 +57,18 @@ exports.Circle = Object.create(GeomObj, { this.m_world = world; if(strokeMaterial) { - this._strokeMaterial = strokeMaterial; + this._strokeMaterial = strokeMaterial.dup(); } else { - this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } + if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); if(fillMaterial) { - this._fillMaterial = fillMaterial; + this._fillMaterial = fillMaterial.dup(); } else { - this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } + if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); } }, @@ -702,19 +704,23 @@ exports.Circle = Object.create(GeomObj, { var strokeMaterialName = jObj.strokeMat; var fillMaterialName = jObj.fillMat; - var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); + var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ).dup(); if (!strokeMat) { console.log( "object material not found in library: " + strokeMaterialName ); - strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } this._strokeMaterial = strokeMat; + if (this._strokeMaterial.hasProperty( 'color' )) + this._strokeMaterial.setProperty( 'color', this._strokeColor ); - var fillMat = MaterialsModel.getMaterial( fillMaterialName ); + var fillMat = MaterialsModel.getMaterial( fillMaterialName ).dup(); if (!fillMat) { console.log( "object material not found in library: " + fillMaterialName ); - fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } this._fillMaterial = fillMat; + if (this._fillMaterial.hasProperty( 'color' )) + this._fillMaterial.setProperty( 'color', this._fillColor ); this.importMaterialsJSON( jObj.materials ); } diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 417c8731..3a7a5619 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -281,9 +281,11 @@ exports.GeomObj = Object.create(Object.prototype, { this._materialArray.push(strokeMaterial); this._materialTypeArray.push("stroke"); - if (this._strokeColor) { - this.setStrokeColor(this._strokeColor); - } + // don't set the value here. The material editor may set a color directly + // to the material without setting this value in the obj. The following + // lines of code will clobber the value in the material + //if (this._strokeColor) + // this.setStrokeColor(this._strokeColor); this._strokeMaterial = strokeMaterial; @@ -306,12 +308,14 @@ exports.GeomObj = Object.create(Object.prototype, { this._materialArray.push(fillMaterial); this._materialTypeArray.push("fill"); + + // don't set the value here. The material editor may set a color directly + // to the material without setting this value in the obj. The following + // lines of code will clobber the value in the material + //if (this._fillColor) + // this.setFillColor(this._fillColor); - if (this._fillColor) { - this.setFillColor(this._fillColor); - } - - this._fillMaterial = fillMaterial; + this._fillMaterial = fillMaterial; return fillMaterial; } @@ -389,6 +393,7 @@ exports.GeomObj = Object.create(Object.prototype, { case "radialBlur": case "pulse": case "twistVert": + case "taper": mat = MaterialsModel.getMaterialByShader(shaderName); if (mat) mat = mat.dup(); break; diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 42d51e74..81a8556d 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -73,16 +73,19 @@ exports.Rectangle = Object.create(GeomObj, { this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; if(strokeMaterial) { - this._strokeMaterial = strokeMaterial; + this._strokeMaterial = strokeMaterial.dup(); } else { - this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } + if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); + if(fillMaterial) { - this._fillMaterial = fillMaterial; + this._fillMaterial = fillMaterial.dup(); } else { - this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } + if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); } }, @@ -289,19 +292,23 @@ exports.Rectangle = Object.create(GeomObj, { var strokeMaterialName = jObj.strokeMat; var fillMaterialName = jObj.fillMat; - var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); + var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ).dup(); if (!strokeMat) { console.log( "object material not found in library: " + strokeMaterialName ); - strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } this._strokeMaterial = strokeMat; + if (this._strokeMaterial.hasProperty( 'color' )) + this._strokeMaterial.setProperty( 'color', this._strokeColor ); - var fillMat = MaterialsModel.getMaterial( fillMaterialName ); + var fillMat = MaterialsModel.getMaterial( fillMaterialName ).dup(); if (!fillMat) { console.log( "object material not found in library: " + fillMaterialName ); - fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } this._fillMaterial = fillMat; + if (this._fillMaterial.hasProperty( 'color' )) + this._fillMaterial.setProperty( 'color', this._fillColor ); this.importMaterialsJSON( jObj.materials ); } diff --git a/js/lib/rdge/materials/bump-metal-material.js b/js/lib/rdge/materials/bump-metal-material.js index 4d19c9c1..30624f7b 100755 --- a/js/lib/rdge/materials/bump-metal-material.js +++ b/js/lib/rdge/materials/bump-metal-material.js @@ -108,8 +108,6 @@ var BumpMetalMaterial = function BumpMetalMaterial() { /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// - // duplcate method requirde - this.dup = function() { return new BumpMetalMaterial(); }; this.init = function( world ) { diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js index 2c7fced2..2153b857 100644 --- a/js/lib/rdge/materials/cloud-material.js +++ b/js/lib/rdge/materials/cloud-material.js @@ -106,23 +106,6 @@ var CloudMaterial = function CloudMaterial() /////////////////////////////////////////////////////////////////////// // duplicate method required /**************************************************************/ - this.dup = function (world) { - // save the world - if (world) this.setWorld(world); - - // allocate a new uber material - var newMat = new CloudMaterial(); - - // copy over the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties(propNames, propValues, propTypes, propLabels); - var n = propNames.length; - for (var i = 0; i < n; i++) { - newMat.setProperty(propNames[i], propValues[i]); - } - - return newMat; - }; this.init = function (world) { var GLWorld = require("js/lib/drawing/world").World, diff --git a/js/lib/rdge/materials/deform-material.js b/js/lib/rdge/materials/deform-material.js index c7f9cadc..70742c77 100644 --- a/js/lib/rdge/materials/deform-material.js +++ b/js/lib/rdge/materials/deform-material.js @@ -37,22 +37,6 @@ var DeformMaterial = function DeformMaterial() { // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - this.dup = function (world) - { - // get the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties(propNames, propValues, propTypes, propLabels); - - // allocate a new material - var newMat = new DeformMaterial(); - - // copy over the current values; - var n = propNames.length; - for (var i = 0; i < n; i++) - newMat.setProperty(propNames[i], propValues[i]); - - return newMat; - }; this.init = function (world) { // save the world diff --git a/js/lib/rdge/materials/flag-material.js b/js/lib/rdge/materials/flag-material.js index d1788fb8..aaf36ebf 100644 --- a/js/lib/rdge/materials/flag-material.js +++ b/js/lib/rdge/materials/flag-material.js @@ -51,22 +51,6 @@ var FlagMaterial = function FlagMaterial() { // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - this.dup = function( world ) - { - // get the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties(propNames, propValues, propTypes, propLabels); - - // allocate a new uber material - var newMat = new FlagMaterial(); - - // copy over the current values; - var n = propNames.length; - for (var i = 0; i < n; i++) - newMat.setProperty(propNames[i], propValues[i]); - - return newMat; - }; this.setProperty = function( prop, value ) { diff --git a/js/lib/rdge/materials/flat-material.js b/js/lib/rdge/materials/flat-material.js index 40da9305..e5498b65 100755 --- a/js/lib/rdge/materials/flat-material.js +++ b/js/lib/rdge/materials/flat-material.js @@ -34,7 +34,22 @@ var FlatMaterial = function FlatMaterial() { // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - this.dup = function () { return new FlatMaterial(); }; + this.dup = function( world ) + { + // get the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties(propNames, propValues, propTypes, propLabels); + + // allocate a new material + var newMat = new FlatMaterial(); + + // copy over the current values; + var n = propNames.length; + for (var i = 0; i < n; i++) + newMat.setProperty(propNames[i], propValues[i]); + + return newMat; + }; this.init = function (world) { // save the world @@ -72,6 +87,7 @@ var FlatMaterial = function FlatMaterial() { // make sure we have legitimate input if (this.validateProperty(prop, value)) { this._propValues[prop] = value; + if (prop === 'color') this._color = value.slice(); if (this._shader && this._shader.colorMe) { this._shader.colorMe[prop].set(value); } diff --git a/js/lib/rdge/materials/fly-material.js b/js/lib/rdge/materials/fly-material.js index ca38cc83..5e14f3af 100644 --- a/js/lib/rdge/materials/fly-material.js +++ b/js/lib/rdge/materials/fly-material.js @@ -106,6 +106,7 @@ var flyMaterialDef = { 'u_tex0': { 'type' : 'tex2d' }, 'u_time' : { 'type' : 'float' }, + 'u_speed' : { 'type' : 'float' }, 'u_resolution' : { 'type' : 'vec2' }, }, diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 856513e2..d2586b58 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js @@ -4,6 +4,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +var Texture = require("js/lib/rdge/texture").Texture; + + /////////////////////////////////////////////////////////////////////// // Class GLMaterial // GL representation of a material. @@ -15,19 +18,16 @@ var Material = function GLMaterial( world ) { this._name = "GLMaterial"; this._shaderName = "undefined"; + this._time = 0.0; + this._dTime = 0.01; + // keep a reference to the owning GLWorld this._world = null; if(world) { this._world = world; } - this._shininess = 60; - - this._ambient = [0.0, 0.0, 0.0, 1.0]; - this._diffuse = [0.0, 0.0, 0.0, 1.0]; - this._specular = [0.0, 0.0, 0.0, 1.0]; - - this._texture = null; + this._glTextures = []; // indexed by uniform name // vertex deformation variables this._hasVertexDeformation = false; @@ -46,13 +46,6 @@ var Material = function GLMaterial( world ) { /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getShininess = function() { - return this._shininess; - }; - - this.setShininess = function(s) { - this._shininess = s; - }; this.setName = function(n) { this._name = n; @@ -78,30 +71,6 @@ var Material = function GLMaterial( world ) { return this._world; }; - this.setAmbient = function(r, g, b, a) { - this._ambient = [r, g, b, a]; - }; - - this.getAmbient = function() { - return [this._ambient[0], this._ambient[1], this._ambient[2], this._ambient[3]]; - }; - - this.setDiffuse = function(r, g, b, a) { - this._diffuse = [r, g, b, a]; - }; - - this.getDiffuse = function() { - return [this._diffuse[0], this._diffuse[1], this._diffuse[2], this._diffuse[3]]; - }; - - this.setSpecular = function(r, g, b, a) { - this._specular = [r, g, b, a]; - }; - - this.getSpecular = function() { - return [this._specular[0], this._specular[1], this._specular[2], this._specular[3]]; - }; - this.getShader = function() { return this._shader; }; @@ -116,6 +85,10 @@ var Material = function GLMaterial( world ) { return false; }; + this.getTechniqueName = function() { + return 'default' + }; + // the vertex shader can apply deformations requiring refinement in // certain areas. this.hasVertexDeformation = function() { @@ -166,6 +139,43 @@ var Material = function GLMaterial( world ) { } }; + this.hasProperty = function( prop ) + { + var propNames = [], dummy = []; + this.getAllProperties( propNames, dummy, dummy, dummy ) + for (var i=0; i 0)) + { + var canvas = selection[0]; + var obj; + if (canvas.elementModel && canvas.elementModel.shapeModel) obj = canvas.elementModel.shapeModel.GLGeomObj; + if (obj) + { + var world = obj.getWorld(); + if (world) + world.restartRenderLoop(); + } + } } } } @@ -241,6 +256,7 @@ exports.MaterialsPopup = Montage.create(Component, { { var canvas = selection[0]; var obj; + this._whichMaterial = whichMaterial; if (canvas.elementModel && canvas.elementModel.shapeModel) obj = canvas.elementModel.shapeModel.GLGeomObj; if (obj) material = (whichMaterial === 'stroke') ? obj.getStrokeMaterial() : obj.getFillMaterial(); -- cgit v1.2.3