diff options
Diffstat (limited to 'js/lib/rdge/texture.js')
-rw-r--r-- | js/lib/rdge/texture.js | 377 |
1 files changed, 149 insertions, 228 deletions
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 ) | |||
15 | /////////////////////////////////////////////////////////////////////// | 15 | /////////////////////////////////////////////////////////////////////// |
16 | // Instance variables | 16 | // Instance variables |
17 | /////////////////////////////////////////////////////////////////////// | 17 | /////////////////////////////////////////////////////////////////////// |
18 | this._texture; | 18 | this._texture; |
19 | 19 | ||
20 | // texture attributes | 20 | // texture attributes |
21 | this._texMapName; | 21 | this._texMapName; |
22 | this._wrap; | 22 | this._wrap; |
23 | this._mips; | 23 | this._mips; |
24 | 24 | ||
25 | this._srcCanvas; // the canvas generating the texture map. | 25 | this._srcCanvas; // the canvas generating the texture map. |
26 | this._dstWorld; // the world that will use the texture map | 26 | this._dstWorld; // the world that will use the texture map |
27 | this._dstWorld = dstWorld; | 27 | this._dstWorld = dstWorld; |
28 | 28 | ||
29 | /////////////////////////////////////////////////////////////////////// | 29 | /////////////////////////////////////////////////////////////////////// |
30 | // Property Accessors | 30 | // Property Accessors |
31 | /////////////////////////////////////////////////////////////////////// | 31 | /////////////////////////////////////////////////////////////////////// |
32 | this.getTexture = function() { return this._texture; } | 32 | this.getTexture = function() { return this._texture; } |
33 | 33 | ||
34 | this.setSrcWorld = function(w) { this._srcWorld = w; } | 34 | this.setSrcWorld = function(w) { this._srcWorld = w; } |
35 | this.getSrcWorld = function() { return this._srcWorld; } | 35 | this.getSrcWorld = function() { return this._srcWorld; } |
36 | 36 | ||
37 | this.setDstWorld = function(w) { this._dstWorld = w; } | 37 | this.setDstWorld = function(w) { this._dstWorld = w; } |
38 | this.getDstWorld = function() { return this._dstWorld; } | 38 | this.getDstWorld = function() { return this._dstWorld; } |
39 | |||
40 | this.isAnimated = function() { return this._isAnimated; } | ||
39 | 41 | ||
40 | /////////////////////////////////////////////////////////////////////// | 42 | /////////////////////////////////////////////////////////////////////// |
41 | // Methods | 43 | // Methods |
42 | /////////////////////////////////////////////////////////////////////// | 44 | /////////////////////////////////////////////////////////////////////// |
43 | 45 | ||
44 | this.loadFromFile = function( texMapName, wrap, mips ) | 46 | this.loadFromFile = function( texMapName, wrap, mips ) |
45 | { | 47 | { |
46 | var tex = this._texture; | 48 | var tex = this._texture; |
47 | this._srcCanvas = null; | 49 | this._srcCanvas = null; |
48 | 50 | ||
49 | // only load if something has changed | 51 | // only load if something has changed |
50 | if (this._texMapName !== texMapName) // does RDGE allow us to change wrap or mips? | 52 | if (this._texMapName !== texMapName) // does RDGE allow us to change wrap or mips? |
51 | { | 53 | { |
52 | this._texMapName = texMapName.slice(); | 54 | this._texMapName = texMapName.slice(); |
53 | this._wrap = wrap; | 55 | this._wrap = wrap; |
54 | this._mips = mips; | 56 | this._mips = mips; |
55 | 57 | ||
56 | var dstWorld = this.getDstWorld(); | 58 | var dstWorld = this.getDstWorld(); |
57 | if (dstWorld) | 59 | if (dstWorld) |
58 | { | 60 | { |
59 | var renderer = dstWorld.getRenderer(); | 61 | var renderer = dstWorld.getRenderer(); |
60 | tex = renderer.getTextureByName(texMapName, wrap, mips ); | 62 | tex = renderer.getTextureByName(texMapName, wrap, mips ); |
61 | this._texture = tex; | 63 | this._texture = tex; |
62 | dstWorld.textureToLoad( tex ); | 64 | dstWorld.textureToLoad( tex ); |
63 | } | 65 | } |
64 | } | 66 | } |
65 | 67 | ||
66 | return tex; | 68 | return tex; |
67 | } | 69 | } |
68 | 70 | ||
69 | var __texCounter = 0; | 71 | var __texCounter = 0; |
72 | this.loadFromCanvas = function( srcCanvas, wrap, mips ) | ||
73 | { | ||
74 | this._srcCanvas = srcCanvas; | ||
70 | 75 | ||
71 | /* | 76 | this._texMapName = "GLTexture_" + __texCounter; |
72 | this.loadFromCanvas = function( srcCanvas, wrap, mips ) | 77 | __texCounter++; |
73 | { | ||
74 | this._texMapName = "GLTexture_" + __texCounter; | ||
75 | __texCounter++; | ||
76 | |||
77 | //if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) | ||
78 | var world = this.getDstWorld(); | ||
79 | var renderer = world.getRenderer(); | ||
80 | 78 | ||
81 | // set default values for wrap and mips | 79 | // set default values for wrap and mips |
82 | if (wrap === undefined) | 80 | if (wrap === undefined) |
83 | wrap = "REPEAT"; | 81 | wrap = "REPEAT"; |
84 | if (mips === undefined) | 82 | if (mips === undefined) |
85 | mips = true; | 83 | mips = true; |
86 | 84 | ||
87 | var imageData; | 85 | // we animate only if the source is an animated GLWorld |
88 | var width = srcCanvas.width, height = srcCanvas.height; | 86 | if (srcCanvas.elementModel && srcCanvas.elementModel.shapeModel && srcCanvas.elementModel.shapeModel.GLWorld) |
89 | width = 64; height = 64; // some even power of 2 for now... | 87 | this._isAnimated = srcCanvas.elementModel.shapeModel.GLWorld._hasAnimatedMaterials; |
90 | |||
91 | // create a canvas to be used as the image for the texture map | ||
92 | var doc = srcCanvas.ownerDocument; | ||
93 | var dstCanvas = doc.createElement("canvas"); | ||
94 | dstCanvas.width = width; | ||
95 | dstCanvas.height = height; | ||
96 | var dstCtx = dstCanvas.getContext("2d"); | ||
97 | |||
98 | var tex; | ||
99 | var srcCtx = srcCanvas.getContext("2d"); | ||
100 | if (srcCtx) | ||
101 | { | ||
102 | tex = renderer.getTextureByName(this._texMapName, wrap, mips ); | ||
103 | imageData = srcCtx.getImageData( 0, 0, width, height ); | ||
104 | dstCtx.putImageData( imageData, 0, 0 ); | ||
105 | } | ||
106 | else | ||
107 | { | ||
108 | tex = renderer.getTextureByName(this._texMapName, wrap, mips ); | ||
109 | //tex = world.getGLContext().createTexture(); | ||
110 | tex.image = new Image; | ||
111 | tex.wrap = wrap; | ||
112 | tex.mips = mips; | ||
113 | |||
114 | srcCtx = srcCanvas.getContext("experimental-webgl"); | ||
115 | if (srcCtx) | ||
116 | { | ||
117 | // var data = new Uint8Array(width * height * 4); | ||
118 | // srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data); | ||
119 | // console.log( "pixel 0: " + data[width+0] + ", " + data[width+1] + ", " + data[width+2] + ", " + data[width+3] ); | ||
120 | // | ||
121 | // //imageData.data = data; | ||
122 | // imageData = dstCtx.createImageData(width, height); | ||
123 | // var nBytes = width*height*4; | ||
124 | // for (var i=0; i<nBytes; i++) | ||
125 | // imageData.data[i] = data[i]; | ||
126 | // dstCtx.putImageData( imageData, 0, 0 ); | ||
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 | 88 | ||
135 | dstCtx.drawImage(srcCanvas, 0, 0); | 89 | // create the texture |
136 | } | 90 | var world = this.getDstWorld(); |
137 | } | 91 | tex = world.getGLContext().createTexture(); |
92 | this._texture = tex; | ||
93 | tex.texparams = new _texparams(wrap, mips); // defined in renderer.js | ||
94 | tex.image = new Image; | ||
138 | 95 | ||
96 | // create the canvas and context to render into | ||
97 | var doc = srcCanvas.ownerDocument; | ||
98 | this._renderCanvas = doc.createElement("canvas"); | ||
139 | 99 | ||
140 | ///////////////// | 100 | // cache whether this is a 2D canvas or 3D canvas |
141 | tex.image = dstCanvas; | 101 | var srcCtx = srcCanvas.getContext("2d"); |
102 | this._is3D = false; | ||
103 | if (!srcCtx) this._is3D = true; | ||
142 | 104 | ||
143 | this._texture = tex; | 105 | this.rerender(); |
144 | return tex; | ||
145 | } | ||
146 | */ | ||
147 | 106 | ||
148 | this.loadFromCanvas = function( srcCanvas, wrap, mips ) | 107 | return tex; |
149 | { | 108 | } |
150 | this._srcCanvas = srcCanvas; | ||
151 | 109 | ||
152 | this._texMapName = "GLTexture_" + __texCounter; | 110 | this.rerender = function() |
153 | __texCounter++; | 111 | { |
112 | if (!this._srcCanvas) | ||
113 | { | ||
114 | console.log( " no source canvas in GLTexture.rerender" ); | ||
115 | return; | ||
116 | } | ||
117 | var srcCanvas = this._srcCanvas; | ||
118 | |||
119 | var world = this.getDstWorld(); | ||
120 | if (!world) | ||
121 | { | ||
122 | console.log( "no world in GLTexture.rerender" ); | ||
123 | return; | ||
124 | } | ||
125 | var renderer = world.getRenderer(); | ||
126 | |||
127 | var imageData; | ||
128 | var width = srcCanvas.width, height = srcCanvas.height; | ||
129 | if (!this.isPowerOfTwo(width) || !this.isPowerOfTwo(height)) | ||
130 | { | ||
131 | width = this.nextHighestPowerOfTwo( width ); | ||
132 | height = this.nextHighestPowerOfTwo( height ); | ||
133 | //width = 64; height = 64; | ||
134 | } | ||
135 | |||
136 | // create a canvas to be used as the image for the texture map | ||
137 | var doc = srcCanvas.ownerDocument; | ||
138 | var renderCanvas = this._renderCanvas; | ||
139 | if (!renderCanvas) | ||
140 | { | ||
141 | console.log( "no render canvas in GLTexture.rerender" ); | ||
142 | return; | ||
143 | } | ||
144 | renderCanvas.width = width; | ||
145 | renderCanvas.height = height; | ||
146 | var renderCtx = renderCanvas.getContext("2d"); | ||
147 | |||
148 | // create the texture | ||
149 | va |