aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/shaders/radialGradient.vert.glsl4
-rwxr-xr-xjs/lib/geom/circle.js3
-rwxr-xr-xjs/lib/geom/rectangle.js13
-rw-r--r--js/lib/geom/shape-primitive.js27
-rwxr-xr-xjs/lib/rdge/materials/material.js4
-rwxr-xr-xjs/lib/rdge/materials/radial-gradient-material.js43
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
19uniform mat4 u_mvMatrix; 19uniform mat4 u_mvMatrix;
20uniform mat4 u_projMatrix; 20uniform mat4 u_projMatrix;
21uniform mat3 u_texTransform;
21 22
22varying vec2 v_uv; 23varying vec2 v_uv;
23 24
24void main(void) 25void 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
52ShapePrimitive.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
52if (typeof exports === "object") { 79if (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
7var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; 7var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser;
8var Material = require("js/lib/rdge/materials/material").Material; 8var Material = require("js/lib/rdge/materials/material").Material;
9var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive;
9 10
10var RadialGradientMaterial = function RadialGradientMaterial() { 11var 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;
<