From 8fa51b9d8c37896dfd13a5b238cf990fcbdb0c96 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 23 Mar 2012 13:46:40 -0700 Subject: textures --- js/lib/drawing/world.js | 1 + js/lib/rdge/materials/bump-metal-material.js | 22 +++- js/lib/rdge/texture.js | 153 +++++++++++++++++++++++++-- 3 files changed, 161 insertions(+), 15 deletions(-) (limited to 'js') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 07a2c3ae..4140208c 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -30,6 +30,7 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { this._canvas = canvas; if (this._useWebGL) { + preserveDrawingBuffer = true; if(preserveDrawingBuffer) { this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); } else { diff --git a/js/lib/rdge/materials/bump-metal-material.js b/js/lib/rdge/materials/bump-metal-material.js index ccd8e3ca..9c9a189a 100755 --- a/js/lib/rdge/materials/bump-metal-material.js +++ b/js/lib/rdge/materials/bump-metal-material.js @@ -20,10 +20,13 @@ var BumpMetalMaterial = function BumpMetalMaterial() { this._shaderName = "bumpMetal"; this._lightDiff = [0.3, 0.3, 0.3, 1.0]; - //this._diffuseTexture = "assets/images/metal.png"; + + //this._diffuseTexture = "assets/images/metal.png"; this._diffuseTexture = "texture"; this._diffuseWorld = null; // the world that the texture is derived from (if there is one). - this._specularTexture = "assets/images/silver.png"; + this._diffuseTextureObj = null; + + this._specularTexture = "assets/images/silver.png"; this._normalTexture = "assets/images/normalMap.png"; /////////////////////////////////////////////////////////////////////// @@ -138,13 +141,20 @@ var BumpMetalMaterial = function BumpMetalMaterial() { var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; var root = viewUtils.application.ninja.currentDocument.documentRoot; this._diffuseWorld = this.findWorld( this._diffuseTexture, root ); + if (this._diffuseWorld) + { + var world = this.getWorld(); + var tex = new Texture( world ); + this._diffuseTextureObj = tex; + tex.loadFromCanvas( world.getCanvas() ); + } } this.findWorld = function( id, elt ) { if (elt.id && elt.id === id) { - if (elt.eltModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) + if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) { var world = elt.elementModel.shapeModel.GLWorld; return world; @@ -174,7 +184,11 @@ var BumpMetalMaterial = function BumpMetalMaterial() { { var texMapName = this._propValues[this._propNames[index]]; var wrap = 'REPEAT', mips = true; - var tex = this.loadTexture( texMapName, wrap, mips ); + var tex; + if ((index === 1) && this._diffuseTextureObj) + tex = this._diffuseTextureObj.getTexture(); + else + tex = this.loadTexture( texMapName, wrap, mips ); if (tex) { diff --git a/js/lib/rdge/texture.js b/js/lib/rdge/texture.js index f9b3d4c3..28dc868a 100644 --- a/js/lib/rdge/texture.js +++ b/js/lib/rdge/texture.js @@ -66,18 +66,27 @@ function Texture( dstWorld ) return tex; } + var __texCounter = 0; + + /* this.loadFromCanvas = function( srcCanvas, wrap, mips ) { - this._texMapName = "GLTexture_" + this.texCounter; - this.texCounter++; + this._texMapName = "GLTexture_" + __texCounter; + __texCounter++; //if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) var world = this.getDstWorld(); var renderer = world.getRenderer(); + // 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 = 128; height = 64; // some even power of 2 for now... + 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; @@ -116,6 +125,13 @@ function Texture( dstWorld ) // imageData.data[i] = data[i]; // dstCtx.putImageData( imageData, 0, 0 ); + var data = new Uint8Array(width * height * 4); + srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data); + for (var i=1; i<10; i++) + { + console.log( "row " + i + ": " + data[i*4*width] + ", " + data[i*4*width+1] + ", " + data[i*4*width+2] + ", " + data[i*4*width+3] ); + } + dstCtx.drawImage(srcCanvas, 0, 0); } } @@ -127,19 +143,134 @@ function Texture( dstWorld ) this._texture = tex; return tex; } + */ + + this.loadFromCanvas = function( srcCanvas, wrap, mips ) + { + this._srcCanvas = srcCanvas; + + this._texMapName = "GLTexture_" + __texCounter; + __texCounter++; + + // set default values for wrap and mips + if (wrap === undefined) + wrap = "REPEAT"; + if (mips === undefined) + mips = true; + + // we animate only if the source is an animated GLWorld + if (srcCanvas.elementModel && srcCanvas.elementModel.shapeModel && srcCanvas.elementModel.shapeModel.GLWorld) + this._isAnimated = srcCanvas.elementModel.shapeModel.GLWorld._hasAnimatedMaterials; + + // create the texture + var world = this.getDstWorld(); + tex = world.getGLContext().createTexture(); + this._texture = tex; + tex.texparams = new _texparams(wrap, mips); // defined in renderer.js + tex.image = new Image; + + // create the canvas and context to render into + var doc = srcCanvas.ownerDocument; + this._renderCanvas = doc.createElement("canvas"); + + // cache whether this is a 2D canvas or 3D canvas + var srcCtx = srcCanvas.getContext("2d"); + this._is3D = false; + if (!srcCtx) this.is3D = true; + + this.rerender(); + + return tex; + } - this.findPreviousWorld = function() + this.rerender = function() { - var prevWorld; - for ( var w in _worldStack ) + if (!this._srcCanvas) { - world = _worldStack[w]; - if (world == this.getWorld()) return prevWorld; - prevWorld = world; + console.log( " no source canvas in GLTexture.rerender" ); + return; + } + var srcCanvas = this._srcCanvas; + + var world = this.getDstWorld(); + if (!world) + { + console.log( "no world in GLTexture.rerender" ); + return; + } + var renderer = world.getRenderer(); + + var imageData; + var width = srcCanvas.width, height = srcCanvas.height; + if (!this.isPowerOfTwo(width) || !this.isPowerOfTwo(height)) + { + width = this.nextHighestPowerOfTwo( width ); + height = this.nextHighestPowerOfTwo( height ); } - } - var texCounter = 0; + // create a canvas to be used as the image for the texture map + var doc = srcCanvas.ownerDocument; + var renderCanvas = this._renderCanvas; + if (!renderCanvas) + { + console.log( "no render canvas in GLTexture.rerender" ); + return; + } + renderCanvas.width = width; + renderCanvas.height = height; + var renderCtx = renderCanvas.getContext("2d"); + + // create the texture + var tex = this._texture; + if (!tex) + { + console.log( "no texture in GLTexture.rerender" ); + return; + } + + var srcCtx; + if (!this.is3D) + { + srcCtx = srcCanvas.getContext("2d"); + imageData = srcCtx.getImageData( 0, 0, width, height ); + } + else + { + 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); + + imageData = renderCtx.createImageData(width, height); + var nBytes = width*height*4; + for (var i=0; i> i; + } + return x + 1; + } } if (typeof exports === "object") { -- cgit v1.2.3