aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorhwc4872012-03-23 13:46:40 -0700
committerhwc4872012-03-23 13:46:40 -0700
commit8fa51b9d8c37896dfd13a5b238cf990fcbdb0c96 (patch)
tree6ff6213ca640084961d5a5974bc4b6fe0ace1760 /js
parente927e4702d7dbd4a878f6979b3f56b46758f93de (diff)
downloadninja-8fa51b9d8c37896dfd13a5b238cf990fcbdb0c96.tar.gz
textures
Diffstat (limited to 'js')
-rwxr-xr-xjs/lib/drawing/world.js1
-rwxr-xr-xjs/lib/rdge/materials/bump-metal-material.js22
-rw-r--r--js/lib/rdge/texture.js153
3 files changed, 161 insertions, 15 deletions
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 ) {
30 30
31 this._canvas = canvas; 31 this._canvas = canvas;
32 if (this._useWebGL) { 32 if (this._useWebGL) {
33 preserveDrawingBuffer = true;
33 if(preserveDrawingBuffer) { 34 if(preserveDrawingBuffer) {
34 this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); 35 this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
35 } else { 36 } 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() {
20 this._shaderName = "bumpMetal"; 20 this._shaderName = "bumpMetal";
21 21
22 this._lightDiff = [0.3, 0.3, 0.3, 1.0]; 22 this._lightDiff = [0.3, 0.3, 0.3, 1.0];
23 //this._diffuseTexture = "assets/images/metal.png"; 23
24 //this._diffuseTexture = "assets/images/metal.png";
24 this._diffuseTexture = "texture"; 25 this._diffuseTexture = "texture";
25 this._diffuseWorld = null; // the world that the texture is derived from (if there is one). 26 this._diffuseWorld = null; // the world that the texture is derived from (if there is one).
26 this._specularTexture = "assets/images/silver.png"; 27 this._diffuseTextureObj = null;
28
29 this._specularTexture = "assets/images/silver.png";
27 this._normalTexture = "assets/images/normalMap.png"; 30 this._normalTexture = "assets/images/normalMap.png";
28 31
29 /////////////////////////////////////////////////////////////////////// 32 ///////////////////////////////////////////////////////////////////////
@@ -138,13 +141,20 @@ var BumpMetalMaterial = function BumpMetalMaterial() {
138 var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; 141 var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
139 var root = viewUtils.application.ninja.currentDocument.documentRoot; 142 var root = viewUtils.application.ninja.currentDocument.documentRoot;
140 this._diffuseWorld = this.findWorld( this._diffuseTexture, root ); 143 this._diffuseWorld = this.findWorld( this._diffuseTexture, root );
144 if (this._diffuseWorld)
145 {
146 var world = this.getWorld();
147 var tex = new Texture( world );
148 this._diffuseTextureObj = tex;
149 tex.loadFromCanvas( world.getCanvas() );
150 }
141 } 151 }
142 152
143 this.findWorld = function( id, elt ) 153 this.findWorld = function( id, elt )
144 { 154 {
145 if (elt.id && elt.id === id) 155 if (elt.id && elt.id === id)
146 { 156 {
147 if (elt.eltModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) 157 if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
148 { 158 {
149 var world = elt.elementModel.shapeModel.GLWorld; 159 var world = elt.elementModel.shapeModel.GLWorld;
150 return world; 160 return world;
@@ -174,7 +184,11 @@ var BumpMetalMaterial = function BumpMetalMaterial() {
174 { 184 {
175 var texMapName = this._propValues[this._propNames[index]]; 185 var texMapName = this._propValues[this._propNames[index]];
176 var wrap = 'REPEAT', mips = true; 186 var wrap = 'REPEAT', mips = true;
177 var tex = this.loadTexture( texMapName, wrap, mips ); 187 var tex;
188 if ((index === 1) && this._diffuseTextureObj)
189 tex = this._diffuseTextureObj.getTexture();
190 else
191 tex = this.loadTexture( texMapName, wrap, mips );
178 192
179 if (tex) 193 if (tex)
180 { 194 {
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 )
66 return tex; 66 return tex;
67 } 67 }
68 68
69 var __texCounter = 0;
70
71 /*
69 this.loadFromCanvas = function( srcCanvas, wrap, mips ) 72 this.loadFromCanvas = function( srcCanvas, wrap, mips )
70 { 73 {
71 this._texMapName = "GLTexture_" + this.texCounter; 74 this._texMapName = "GLTexture_" + __texCounter;
72 this.texCounter++; 75 __texCounter++;
73 76
74 //if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) 77 //if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
75 var world = this.getDstWorld(); 78 var world = this.getDstWorld();
76 var renderer = world.getRenderer(); 79 var renderer = world.getRenderer();
77 80
81 // set default values for wrap and mips
82 if (wrap === undefined)
83 wrap = "REPEAT";
84 if (mips === undefined)
85 mips = true;
86
78 var imageData; 87 var imageData;
79 var width = srcCanvas.width, height = srcCanvas.height; 88 var width = srcCanvas.width, height = srcCanvas.height;
80 width = 128; height = 64; // some even power of 2 for now... 89 width = 64; height = 64; // some even power of 2 for now...
81 90
82 // create a canvas to be used as the image for the texture map 91 // create a canvas to be used as the image for the texture map
83 var doc = srcCanvas.ownerDocument; 92 var doc = srcCanvas.ownerDocument;
@@ -116,6 +125,13 @@ function Texture( dstWorld )
116// imageData.data[i] = data[i]; 125// imageData.data[i] = data[i];
117// dstCtx.putImageData( imageData, 0, 0 ); 126// dstCtx.putImageData( imageData, 0, 0 );
118 127
128 var data = new Uint8Array(width * height * 4);
129 srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data);
130 for (var i=1; i<10; i++)
131 {
132 console.log( "row " + i + ": " + data[i*4*width] + ", " + data[i*4*width+1] + ", " + data[i*4*width+2] + ", " + data[i*4*width+3] );
133 }
134
119 dstCtx.drawImage(srcCanvas, 0, 0); 135 dstCtx.drawImage(srcCanvas, 0, 0);
120 } 136 }
121 } 137 }
@@ -127,19 +143,134 @@ function Texture( dstWorld )
127 this._texture = tex; 143 this._texture = tex;
128 return tex; 144 return tex;
129 } 145 }
146 */
147
148 this.loadFromCanvas = function( srcCanvas, wrap, mips )
149 {
150 this._srcCanvas = srcCanvas;
151
152 this._texMapName = "GLTexture_" + __texCounter;
153 __texCounter++;
154
155 // set default values for wrap and mips
156 if (wrap === undefined)
157 wrap = "REPEAT";
158 if (mips === undefined)
159 mips = true;
160
161 // we animate only if the source is an animated GLWorld
162 if (srcCanvas.elementModel && srcCanvas.elementModel.shapeModel && srcCanvas.elementModel.shapeModel.GLWorld)
163 this._isAnimated = srcCanvas.elementModel.shapeModel.GLWorld._hasAnimatedMaterials;
164
165 // create the texture
166 var world = this.getDstWorld();
167 tex = world.getGLContext().createTexture();
168 this._texture = tex;
169 tex.texparams = new _texparams(wrap, mips); // defined in renderer.js
170 tex.image = new Image;
171
172 // create the canvas and context to render into
173 var doc = srcCanvas.ownerDocument;
174 this._renderCanvas = doc.createElement("canvas");
175
176 // cache whether this is a 2D canvas or 3D canvas
177 var srcCtx = srcCanvas.getContext("2d");
178 this._is3D = false;
179 if (!srcCtx) this.is3D = true;
180
181 this.rerender();
182
183 return tex;
184 }
130 185
131 this.findPreviousWorld = function() 186 this.rerender = function()
132 { 187 {
133 var prevWorld; 188 if (!this._srcCanvas)
134 for ( var w in _worldStack )
135 { 189 {
136 world = _worldStack[w]; 190 console.log( " no source canvas in GLTexture.rerender" );
137 if (world == this.getWorld()) return prevWorld; 191 return;
138 prevWorld = world; 192 }
193 var srcCanvas = this._srcCanvas;
194
195 var world = this.getDstWorld();
196 if (!world)
197 {
198 console.log( "no world in GLTexture.rerender" );
199 return;
200 }
201 var renderer = world.getRenderer();
202
203 var imageData;
204 var width = srcCanvas.width, height = srcCanvas.height;
205 if (!this.isPowerOfTwo(width) || !this.isPowerOfTwo(height))
206 {
207 width = this.nextHighestPowerOfTwo( width );
208 height = this.nextHighestPowerOfTwo( height );
139 } 209 }
140 }
141 210
142 var texCounter = 0; 211 // create a canvas to be used as the image for the texture map
212 var doc = srcCanvas.ownerDocument;
213 var renderCanvas = this._renderCanvas;
214 if (!renderCanvas)
215 {
216 console.log( "no render canvas in GLTexture.rerender" );
217 return;
218 }
219 renderCanvas.width = width;
220 renderCanvas.height = height;
221 var renderCtx = renderCanvas.getContext("2d");
222
223 // create the texture
224 var tex = this._texture;
225 if (!tex)
226 {
227 console.log( "no texture in GLTexture.re