diff options
-rw-r--r-- | assets/shaders/radialGradient.vert.glsl | 4 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 3 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 13 | ||||
-rw-r--r-- | js/lib/geom/shape-primitive.js | 27 | ||||
-rwxr-xr-x | js/lib/rdge/materials/material.js | 4 | ||||
-rwxr-xr-x | js/lib/rdge/materials/radial-gradient-material.js | 43 |
6 files changed, 81 insertions, 13 deletions
diff --git a/assets/shaders/radialGradient.vert.glsl b/assets/shaders/radialGradient.vert.glsl index c3e1b50a..7994ac12 100644 --- a/assets/shaders/radialGradient.vert.glsl +++ b/assets/shaders/radialGradient.vert.glsl | |||
@@ -18,11 +18,13 @@ attribute vec2 texcoord; | |||
18 | // matrix uniforms | 18 | // matrix uniforms |
19 | uniform mat4 u_mvMatrix; | 19 | uniform mat4 u_mvMatrix; |
20 | uniform mat4 u_projMatrix; | 20 | uniform mat4 u_projMatrix; |
21 | uniform mat3 u_texTransform; | ||
21 | 22 | ||
22 | varying vec2 v_uv; | 23 | varying vec2 v_uv; |
23 | 24 | ||
24 | void main(void) | 25 | void main(void) |
25 | { | 26 | { |
26 | gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; | 27 | gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; |
27 | v_uv = texcoord; | 28 | vec3 tmp = u_texTransform * vec3( texcoord, 1.0); |
29 | v_uv = tmp.xy; | ||
28 | } \ No newline at end of file | 30 | } \ No newline at end of file |
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 0f1f49a9..afeed449 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -279,6 +279,7 @@ var Circle = function GLCircle() { | |||
279 | 279 | ||
280 | if (fillPrim) { | 280 | if (fillPrim) { |
281 | fillMaterial = this.makeFillMaterial(); | 281 | fillMaterial = this.makeFillMaterial(); |
282 | fillMaterial.fitToPrimitive( fillPrim ); | ||
282 | 283 | ||
283 | this._primArray.push( fillPrim ); | 284 | this._primArray.push( fillPrim ); |
284 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); | 285 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); |
@@ -286,6 +287,7 @@ var Circle = function GLCircle() { | |||
286 | 287 | ||
287 | if (strokePrim0) { | 288 | if (strokePrim0) { |
288 | strokeMaterial0 = this.makeStrokeMaterial(); | 289 | strokeMaterial0 = this.makeStrokeMaterial(); |
290 | strokeMaterial0.fitToPrimitive( strokePrim0 ); | ||
289 | 291 | ||
290 | this._primArray.push( strokePrim0 ); | 292 | this._primArray.push( strokePrim0 ); |
291 | this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); | 293 | this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); |
@@ -293,6 +295,7 @@ var Circle = function GLCircle() { | |||
293 | 295 | ||
294 | if (strokePrim1) { | 296 | if (strokePrim1) { |
295 | strokeMaterial2 = this.makeStrokeMaterial(); | 297 | strokeMaterial2 = this.makeStrokeMaterial(); |
298 | strokeMaterial2.fitToPrimitive( strokePrim1 ); | ||
296 | 299 | ||
297 | this._primArray.push( strokePrim1 ); | 300 | this._primArray.push( strokePrim1 ); |
298 | this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); | 301 | this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); |
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 490a9a6f..296ed024 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js | |||
@@ -57,13 +57,10 @@ var Rectangle = function GLRectangle() { | |||
57 | this._strokeStyle = strokeStyle; | 57 | this._strokeStyle = strokeStyle; |
58 | 58 | ||
59 | this._matrix = Matrix.I(4); | 59 | this._matrix = Matrix.I(4); |
60 | //this._matrix[12] = xoffset; | ||
61 | //this._matrix[13] = yoffset; | ||
62 | } | 60 | } |
63 | 61 | ||
64 | // the overall radius includes the fill and the stroke. separate the two based onthe stroke width | 62 | // the overall radius includes the fill and the stroke. separate the two based onthe stroke width |
65 | // this._fillRad = this._radius - this._strokeWidth; | 63 | // this._fillRad = this._radius - this._strokeWidth; |
66 | // var err = 0.05; | ||
67 | var err = 0; | 64 | var err = 0; |
68 | this._fillWidth = this._width - this._strokeWidth + err; | 65 | this._fillWidth = this._width - this._strokeWidth + err; |
69 | this._fillHeight = this._height - this._strokeWidth + err; | 66 | this._fillHeight = this._height - this._strokeWidth + err; |
@@ -116,18 +113,10 @@ var Rectangle = function GLRectangle() { | |||
116 | return this._strokeColor; | 113 | return this._strokeColor; |
117 | }; | 114 | }; |
118 | 115 | ||
119 | //this.setStrokeColor = function(c) { | ||
120 | // this._strokeColor = c; | ||
121 | // }; | ||
122 | |||
123 | this.getFillColor = function() { | 116 | this.getFillColor = function() { |
124 | return this._fillColor; | 117 | return this._fillColor; |
125 | }; | 118 | }; |
126 | 119 | ||
127 | //this.setFillColor = function(c) { | ||
128 | // this._fillColor = c.slice(0); | ||
129 | // }; | ||
130 | |||
131 | this.getTLRadius = function() { | 120 | this.getTLRadius = function() { |
132 | return this._tlRadius; | 121 | return this._tlRadius; |
133 | }; | 122 | }; |
@@ -324,6 +313,7 @@ var Rectangle = function GLRectangle() { | |||
324 | // stroke | 313 | // stroke |
325 | var strokeMaterial = this.makeStrokeMaterial(); | 314 | var strokeMaterial = this.makeStrokeMaterial(); |
326 | var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); | 315 | var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); |
316 | strokeMaterial.fitToPrimitive( strokePrim ); | ||
327 | this._primArray.push( strokePrim ); | 317 | this._primArray.push( strokePrim ); |
328 | this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); | 318 | this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); |
329 | 319 | ||
@@ -337,6 +327,7 @@ var Rectangle = function GLRectangle() { | |||
337 | var fillMaterial = this.makeFillMaterial(); | 327 | var fillMaterial = this.makeFillMaterial(); |
338 | //console.log( "fillMaterial: " + fillMaterial.getName() ); | 328 | //console.log( "fillMaterial: " + fillMaterial.getName() ); |
339 | var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); | 329 | var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); |
330 | fillMaterial.fitToPrimitive( fillPrim ); | ||
340 | this._primArray.push( fillPrim ); | 331 | this._primArray.push( fillPrim ); |
341 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); | 332 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); |
342 | 333 | ||
diff --git a/js/lib/geom/shape-primitive.js b/js/lib/geom/shape-primitive.js index 97873d32..9864a8e9 100644 --- a/js/lib/geom/shape-primitive.js +++ b/js/lib/geom/shape-primitive.js | |||
@@ -49,6 +49,33 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver | |||
49 | return prim; | 49 | return prim; |
50 | }; | 50 | }; |
51 | 51 | ||
52 | ShapePrimitive.getBounds = function( prim ) | ||
53 | { | ||
54 | var verts = prim.bufferStreams[0]; | ||
55 | var nVerts = verts.length; | ||
56 | var xMin = verts[0], xMax = verts[0], | ||
57 | yMin = verts[1], yMax = verts[1], | ||
58 | zMin = verts[2], zMax = verts[2]; | ||
59 | |||
60 | for (var index=3; index<verts.length; ) | ||
61 | { | ||
62 | if (verts[index] < xMin) xMin = verts[index]; | ||
63 | else if (verts[index] > xMax) xMax = verts[index]; | ||
64 | |||
65 | index++; | ||
66 | if (verts[index] < yMin) yMin = verts[index]; | ||
67 | else if (verts[index] > yMax) yMax = verts[index]; | ||
68 | |||
69 | index++; | ||
70 | if (verts[index] < zMin) zMin = verts[index]; | ||
71 | else if (verts[index] > zMax) zMax = verts[index]; | ||
72 | |||
73 | index++; | ||
74 | } | ||
75 | |||
76 | return [xMin, yMin, zMin, xMax, yMax, zMax]; | ||
77 | }; | ||
78 | |||
52 | if (typeof exports === "object") { | 79 | if (typeof exports === "object") { |
53 | exports.ShapePrimitive = ShapePrimitive; | 80 | exports.ShapePrimitive = ShapePrimitive; |
54 | } \ No newline at end of file | 81 | } \ No newline at end of file |
diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 276c7687..b96768b3 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js | |||
@@ -228,6 +228,10 @@ var Material = function GLMaterial( world ) { | |||
228 | // animated materials should implement the update method | 228 | // animated materials should implement the update method |
229 | }; | 229 | }; |
230 | 230 | ||
231 | this.fitToPrimitive = function( prim ) { | ||
232 | // some materials need to preserve an aspect ratio - or someting else. | ||
233 | }; | ||
234 | |||
231 | this.registerTexture = function( texture ) { | 235 | this.registerTexture = function( texture ) { |
232 | // the world needs to know about the texture map | 236 | // the world needs to know about the texture map |
233 | var world = this.getWorld(); | 237 | var world = this.getWorld(); |
diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index dd40d31d..a671ee42 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js | |||
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; | 7 | var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; |
8 | var Material = require("js/lib/rdge/materials/material").Material; | 8 | var Material = require("js/lib/rdge/materials/material").Material; |
9 | var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; | ||
9 | 10 | ||
10 | var RadialGradientMaterial = function RadialGradientMaterial() { | 11 | var RadialGradientMaterial = function RadialGradientMaterial() { |
11 | /////////////////////////////////////////////////////////////////////// | 12 | /////////////////////////////////////////////////////////////////////// |
@@ -24,6 +25,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() { | |||
24 | this._colorStop4 = 1.0; | 25 | this._colorStop4 = 1.0; |
25 | // this._colorCount = 4; | 26 | // this._colorCount = 4; |
26 | 27 | ||
28 | var s = Math.sqrt( 2.0 ); | ||
29 | this._textureTransform = [s,0,0, 0,s,0, 0,0,1]; | ||
30 | |||
27 | /////////////////////////////////////////////////////////////////////// | 31 | /////////////////////////////////////////////////////////////////////// |
28 | // Property Accessors | 32 | // Property Accessors |
29 | /////////////////////////////////////////////////////////////////////// | 33 | /////////////////////////////////////////////////////////////////////// |
@@ -231,9 +235,45 @@ var RadialGradientMaterial = function RadialGradientMaterial() { | |||
231 | this._shader['default'].u_colorStop3.set([s]); | 235 | this._shader['default'].u_colorStop3.set([s]); |
232 | s = this.getColorStop4(); | 236 | s = this.getColorStop4(); |
233 | this._shader['default'].u_colorStop4.set([s]); | 237 | this._shader['default'].u_colorStop4.set([s]); |
238 | |||
239 | this._shader['default'].u_texTransform.set( this._textureTransform ); | ||
234 | } | 240 | } |
235 | }; | 241 | }; |
236 | 242 | ||
243 | this.fitToPrimitive = function( prim ) | ||
244 | { | ||
245 | var bounds = ShapePrimitive.getBounds( prim ); | ||
246 | if (bounds) | ||
247 | { | ||
248 | var dx = Math.abs( bounds[3] - bounds[0] ), | ||
249 | dy = Math.abs( bounds[4] - bounds[1] ); | ||
250 | if (dy == 0) dy = 1.0; | ||
251 | if (dx == 0) dx = 1.0; | ||
252 | var xScale = 2.0, yScale = 2.0; | ||
253 | if (dx > dy) | ||
254 | yScale *= dy/dx; | ||
255 | else | ||
256 | xScale *= dx/dy; | ||
257 | |||
258 | // build the matrix - the translation to the origin, the scale, | ||