From 2f66a9ab38f761b7796800bb37f8146f140db40b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 26 Mar 2012 11:31:23 -0700 Subject: WebGL & Canvas as data for texture maps. --- js/lib/drawing/world.js | 1 + js/lib/rdge/materials/bump-metal-material.js | 25 +- js/lib/rdge/materials/material.js | 23 ++ js/lib/rdge/materials/pulse-material.js | 42 ++- js/lib/rdge/texture.js | 377 +++++++++++---------------- 5 files changed, 211 insertions(+), 257 deletions(-) (limited to 'js') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index d314760b..e3818178 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -327,6 +327,7 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { var rtnVal = false; if (root) { rtnVal = this.hHasAnimatedMaterials( root ); + this._hasAnimatedMaterials = rtnVal; } return rtnVal; diff --git a/js/lib/rdge/materials/bump-metal-material.js b/js/lib/rdge/materials/bump-metal-material.js index 9c9a189a..a3ef9d37 100755 --- a/js/lib/rdge/materials/bump-metal-material.js +++ b/js/lib/rdge/materials/bump-metal-material.js @@ -146,33 +146,10 @@ var BumpMetalMaterial = function BumpMetalMaterial() { var world = this.getWorld(); var tex = new Texture( world ); this._diffuseTextureObj = tex; - tex.loadFromCanvas( world.getCanvas() ); + tex.loadFromCanvas( this._diffuseWorld.getCanvas() ); } } - this.findWorld = function( id, elt ) - { - if (elt.id && elt.id === id) - { - if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) - { - var world = elt.elementModel.shapeModel.GLWorld; - return world; - } - } - - if (elt.children) - { - var nKids = elt.children.length; - for (var i=0; i */ var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; +var Texture = require("js/lib/rdge/texture").Texture; var Material = require("js/lib/rdge/materials/material").Material; /////////////////////////////////////////////////////////////////////// // Class GLMaterial // RDGE representation of a material. /////////////////////////////////////////////////////////////////////// -var PulseMaterial = function PulseMaterial() { +var PulseMaterial = function PulseMaterial() +{ + var MaterialLibrary = require("js/models/materials-model").MaterialsModel; + + // initialize the inherited members + this.inheritedFrom = Material; + this.inheritedFrom(); + /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// this._name = "PulseMaterial"; this._shaderName = "pulse"; - this._texMap = 'assets/images/cubelight.png'; + //this._texMap = 'assets/images/cubelight.png'; + this._texMap = 'texture'; this._time = 0.0; this._dTime = 0.01; @@ -109,6 +118,16 @@ var PulseMaterial = function PulseMaterial() { this._shader['default'].u_time.set( [this._time] ); } + // check if the texture uses a canvas as the source + var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; + var root = viewUtils.application.ninja.currentDocument.documentRoot; + var texMapName = this._propValues[this._propNames[0]]; + var texWorld = this.findWorld( texMapName, root ); + if (texWorld) + { + this._glTex = new Texture( this.getWorld() ); + this._glTex.loadFromCanvas( texWorld.getCanvas() ); + } // set the shader values in the shader this.updateTexture(); @@ -122,9 +141,18 @@ var PulseMaterial = function PulseMaterial() { var technique = material.shaderProgram['default']; var renderer = g_Engine.getContext().renderer; if (renderer && technique) { - var texMapName = this._propValues[this._propNames[0]]; var wrap = 'REPEAT', mips = true; - var tex = this.loadTexture( texMapName, wrap, mips ); + var tex; + if (this._glTex) + { + this._glTex.rerender(); + tex = this._glTex.getTexture(); + } + else + { + var texMapName = this._propValues[this._propNames[0]]; + tex = this.loadTexture( texMapName, wrap, mips ); + } if (tex) { technique.u_tex0.set( tex ); @@ -138,6 +166,9 @@ var PulseMaterial = function PulseMaterial() { var material = this._materialNode; if (material) { + if (this._glTex && this._glTex.isAnimated()) + this.updateTexture(); + var technique = material.shaderProgram['default']; var renderer = g_Engine.getContext().renderer; if (renderer && technique) { @@ -279,7 +310,8 @@ var pulseMaterialDef = } }; -PulseMaterial.prototype = new Material(); +// doing the inheritance here introtudes bugs. Local instance variables are overwritten in the base class +//PulseMaterial.prototype = new Material(); if (typeof exports === "object") { exports.PulseMaterial = PulseMaterial; diff --git a/js/lib/rdge/texture.js b/js/lib/rdge/texture.js index c72864b8..b349ee62 100644 --- a/js/lib/rdge/texture.js +++ b/js/lib/rdge/texture.js @@ -15,267 +15,188 @@ function Texture( dstWorld ) /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// - this._texture; + this._texture; - // texture attributes - this._texMapName; - this._wrap; - this._mips; + // texture attributes + this._texMapName; + this._wrap; + this._mips; - this._srcCanvas; // the canvas generating the texture map. - this._dstWorld; // the world that will use the texture map - this._dstWorld = dstWorld; + this._srcCanvas; // the canvas generating the texture map. + this._dstWorld; // the world that will use the texture map + this._dstWorld = dstWorld; /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getTexture = function() { return this._texture; } + this.getTexture = function() { return this._texture; } - this.setSrcWorld = function(w) { this._srcWorld = w; } - this.getSrcWorld = function() { return this._srcWorld; } + this.setSrcWorld = function(w) { this._srcWorld = w; } + this.getSrcWorld = function() { return this._srcWorld; } - this.setDstWorld = function(w) { this._dstWorld = w; } - this.getDstWorld = function() { return this._dstWorld; } + this.setDstWorld = function(w) { this._dstWorld = w; } + this.getDstWorld = function() { return this._dstWorld; } + + this.isAnimated = function() { return this._isAnimated; } /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// - this.loadFromFile = function( texMapName, wrap, mips ) - { - var tex = this._texture; - this._srcCanvas = null; - - // only load if something has changed - if (this._texMapName !== texMapName) // does RDGE allow us to change wrap or mips? - { - this._texMapName = texMapName.slice(); - this._wrap = wrap; - this._mips = mips; - - var dstWorld = this.getDstWorld(); - if (dstWorld) - { - var renderer = dstWorld.getRenderer(); - tex = renderer.getTextureByName(texMapName, wrap, mips ); - this._texture = tex; - dstWorld.textureToLoad( tex ); - } - } - - return tex; - } + this.loadFromFile = function( texMapName, wrap, mips ) + { + var tex = this._texture; + this._srcCanvas = null; + + // only load if something has changed + if (this._texMapName !== texMapName) // does RDGE allow us to change wrap or mips? + { + this._texMapName = texMapName.slice(); + this._wrap = wrap; + this._mips = mips; + + var dstWorld = this.getDstWorld(); + if (dstWorld) + { + var renderer = dstWorld.getRenderer(); + tex = renderer.getTextureByName(texMapName, wrap, mips ); + this._texture = tex; + dstWorld.textureToLoad( tex ); + } + } + + return tex; + } var __texCounter = 0; + this.loadFromCanvas = function( srcCanvas, wrap, mips ) + { + this._srcCanvas = srcCanvas; - /* - this.loadFromCanvas = function( srcCanvas, wrap, mips ) - { - this._texMapName = "GLTexture_" + __texCounter; - __texCounter++; - - //if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) - var world = this.getDstWorld(); - var renderer = world.getRenderer(); + this._texMapName = "GLTexture_" + __texCounter; + __texCounter++; - // set default values for wrap and mips + // set default values for wrap and mips if (wrap === undefined) wrap = "REPEAT"; if (mips === undefined) mips = true; - var imageData; - var width = srcCanvas.width, height = srcCanvas.height; - width = 64; height = 64; // some even power of 2 for now... - - // create a canvas to be used as the image for the texture map - var doc = srcCanvas.ownerDocument; - var dstCanvas = doc.createElement("canvas"); - dstCanvas.width = width; - dstCanvas.height = height; - var dstCtx = dstCanvas.getContext("2d"); - - var tex; - var srcCtx = srcCanvas.getContext("2d"); - if (srcCtx) - { - tex = renderer.getTextureByName(this._texMapName, wrap, mips ); - imageData = srcCtx.getImageData( 0, 0, width, height ); - dstCtx.putImageData( imageData, 0, 0 ); - } - else - { - tex = renderer.getTextureByName(this._texMapName, wrap, mips ); - //tex = world.getGLContext().createTexture(); - tex.image = new Image; - tex.wrap = wrap; - tex.mips = mips; - - srcCtx = srcCanvas.getContext("experimental-webgl"); - if (srcCtx) - { -// var data = new Uint8Array(width * height * 4); -// srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data); -// console.log( "pixel 0: " + data[width+0] + ", " + data[width+1] + ", " + data[width+2] + ", " + data[width+3] ); -// -// //imageData.data = data; -// imageData = dstCtx.createImageData(width, height); -// var nBytes = width*height*4; -// for (var i=0; i 1000) nPrint = 1000; - for (var i=0; i> i; - } - return x + 1; - } + this.nextHighestPowerOfTwo = function(x) + { + --x; + for (var i = 1; i < 32; i <<= 1) { + x = x | x >> i; + } + return x + 1; + } } if (typeof exports === "object") { -- cgit v1.2.3