diff options
-rwxr-xr-x | js/lib/drawing/world.js | 1 | ||||
-rwxr-xr-x | js/lib/rdge/materials/bump-metal-material.js | 22 | ||||
-rw-r--r-- | js/lib/rdge/texture.js | 153 |
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.rerender" ); | ||
228 | return; | ||
229 | } | ||
230 | |||
231 | var srcCtx; | ||
232 | if (!this.is3D) | ||