From a5ee11857f923d3e49b44c0a8c480e9d0b026d5b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:18:12 -0800 Subject: CSS Panel Update --- js/lib/NJUtils.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'js/lib') diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 887743c5..49dfd706 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -19,16 +19,18 @@ exports.NJUtils = Object.create(Object.prototype, { ///// Quick "getElementById" $ : { - value: function(id) { - return document.getElementById(id); + value: function(id, doc) { + doc = doc || document; + return doc.getElementById(id); } }, ///// Quick "getElementsByClassName" which also returns as an Array ///// Can return as NodeList by passing true as second argument $$ : { - value: function(className, asNodeList) { - var list = document.getElementsByClassName(className); + value: function(className, asNodeList, doc) { + doc = doc || document; + var list = doc.getElementsByClassName(className); return (asNodeList) ? list : this.toArray(list); } }, -- cgit v1.2.3 From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 15:53:35 -0700 Subject: Radial gradients to match CSS --- js/lib/geom/circle.js | 3 ++ js/lib/geom/rectangle.js | 13 ++----- js/lib/geom/shape-primitive.js | 27 ++++++++++++++ js/lib/rdge/materials/material.js | 4 +++ js/lib/rdge/materials/radial-gradient-material.js | 43 ++++++++++++++++++++++- 5 files changed, 78 insertions(+), 12 deletions(-) (limited to 'js/lib') 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() { if (fillPrim) { fillMaterial = this.makeFillMaterial(); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); @@ -286,6 +287,7 @@ var Circle = function GLCircle() { if (strokePrim0) { strokeMaterial0 = this.makeStrokeMaterial(); + strokeMaterial0.fitToPrimitive( strokePrim0 ); this._primArray.push( strokePrim0 ); this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); @@ -293,6 +295,7 @@ var Circle = function GLCircle() { if (strokePrim1) { strokeMaterial2 = this.makeStrokeMaterial(); + strokeMaterial2.fitToPrimitive( strokePrim1 ); this._primArray.push( strokePrim1 ); 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() { this._strokeStyle = strokeStyle; this._matrix = Matrix.I(4); - //this._matrix[12] = xoffset; - //this._matrix[13] = yoffset; } // the overall radius includes the fill and the stroke. separate the two based onthe stroke width // this._fillRad = this._radius - this._strokeWidth; - // var err = 0.05; var err = 0; this._fillWidth = this._width - this._strokeWidth + err; this._fillHeight = this._height - this._strokeWidth + err; @@ -116,18 +113,10 @@ var Rectangle = function GLRectangle() { return this._strokeColor; }; - //this.setStrokeColor = function(c) { - // this._strokeColor = c; - // }; - this.getFillColor = function() { return this._fillColor; }; - //this.setFillColor = function(c) { - // this._fillColor = c.slice(0); - // }; - this.getTLRadius = function() { return this._tlRadius; }; @@ -324,6 +313,7 @@ var Rectangle = function GLRectangle() { // stroke var strokeMaterial = this.makeStrokeMaterial(); var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); + strokeMaterial.fitToPrimitive( strokePrim ); this._primArray.push( strokePrim ); this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); @@ -337,6 +327,7 @@ var Rectangle = function GLRectangle() { var fillMaterial = this.makeFillMaterial(); //console.log( "fillMaterial: " + fillMaterial.getName() ); var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); 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 return prim; }; +ShapePrimitive.getBounds = function( prim ) +{ + var verts = prim.bufferStreams[0]; + var nVerts = verts.length; + var xMin = verts[0], xMax = verts[0], + yMin = verts[1], yMax = verts[1], + zMin = verts[2], zMax = verts[2]; + + for (var index=3; index xMax) xMax = verts[index]; + + index++; + if (verts[index] < yMin) yMin = verts[index]; + else if (verts[index] > yMax) yMax = verts[index]; + + index++; + if (verts[index] < zMin) zMin = verts[index]; + else if (verts[index] > zMax) zMax = verts[index]; + + index++; + } + + return [xMin, yMin, zMin, xMax, yMax, zMax]; +}; + if (typeof exports === "object") { exports.ShapePrimitive = ShapePrimitive; } \ 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 ) { // animated materials should implement the update method }; + this.fitToPrimitive = function( prim ) { + // some materials need to preserve an aspect ratio - or someting else. + }; + this.registerTexture = function( texture ) { // the world needs to know about the texture map 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 var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var RadialGradientMaterial = function RadialGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -24,6 +25,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._colorStop4 = 1.0; // this._colorCount = 4; + var s = Math.sqrt( 2.0 ); + this._textureTransform = [s,0,0, 0,s,0, 0,0,1]; + /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// @@ -231,9 +235,45 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._shader['default'].u_colorStop3.set([s]); s = this.getColorStop4(); this._shader['default'].u_colorStop4.set([s]); + + this._shader['default'].u_texTransform.set( this._textureTransform ); } }; + this.fitToPrimitive = function( prim ) + { + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + xCtr*(1-xScale), yCtr*(1 - yScale), 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + + } + }; + this.exportJSON = function () { var jObj = { @@ -316,7 +356,8 @@ var radialGradientMaterialDef = 'u_colorStop1': { 'type': 'float' }, 'u_colorStop2': { 'type': 'float' }, 'u_colorStop3': { 'type': 'float' }, - 'u_colorStop4': { 'type': 'float' } + 'u_colorStop4': { 'type': 'float' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- cgit v1.2.3 From 24417212f9fad7e992697e9370047fcf2f037913 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:14:28 -0700 Subject: WebGL linear gradients to match CSS --- js/lib/rdge/materials/linear-gradient-material.js | 43 +++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'js/lib') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 51a7430c..0df9511e 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -6,6 +6,7 @@ var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var LinearGradientMaterial = function LinearGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -245,9 +246,46 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this._shader['default'].u_colorStop4.set([s]); this.setAngle(this.getAngle()); - } + + this._shader['default'].u_texTransform.set( [1,0,0, 0,1,0, 0,0,1] ); + } }; + this.fitToPrimitive = function( prim ) + { + /* + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + 0.0, 0.0, 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + } + */ + }; + this.exportJSON = function () { var jObj = { @@ -367,7 +405,8 @@ var linearGradientMaterialDef = 'u_colorStop2': { 'type' : 'float' }, 'u_colorStop3': { 'type' : 'float' }, 'u_colorStop4': { 'type' : 'float' }, - 'u_cos_sin_angle' : { 'type' : 'vec2' } + 'u_cos_sin_angle': { 'type' : 'vec2' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- cgit v1.2.3 From 3e82beb51fe3f596147e9d7f1c405d9a8c4df63b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:15:49 -0700 Subject: code cleanup for linear gradients. --- js/lib/rdge/materials/linear-gradient-material.js | 41 ----------------------- 1 file changed, 41 deletions(-) (limited to 'js/lib') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 0df9511e..79f323db 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -133,12 +133,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - // this.getColorCount = function() { return this._colorCount; }; - // this.setColorCount = function(c) { this._colorCount = c; - // if (this._shader && this._shader['default']) - // this._shader['default'].u_colorCount.set([c]); - // }; - this.getAngle = function () { return this._angle; }; @@ -251,41 +245,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - this.fitToPrimitive = function( prim ) - { - /* - var bounds = ShapePrimitive.getBounds( prim ); - if (bounds) - { - var dx = Math.abs( bounds[3] - bounds[0] ), - dy = Math.abs( bounds[4] - bounds[1] ); - if (dy == 0) dy = 1.0; - if (dx == 0) dx = 1.0; - var xScale = 2.0, yScale = 2.0; - if (dx > dy) - yScale *= dy/dx; - else - xScale *= dx/dy; - - // build the matrix - the translation to the origin, the scale, - // and the translation back to the center (hard coded at (0.5, 0.5) for now). - // the matrix is build directly instead of with matrix multiplications - // for efficiency, not to mention that the multiplication function does - // not exist for mat3's. - // the matrix as laid out below looks transposed - order is columnwise. - var xCtr = 0.5, yCtr = 0.5; - this._textureTransform = [ - xScale, 0.0, 0.0, - 0.0, yScale, 0.0, - 0.0, 0.0, 1.0 - ]; - - if (this._shader && this._shader['default']) - this._shader['default'].u_texTransform.set( this._textureTransform ); - } - */ - }; - this.exportJSON = function () { var jObj = { -- cgit v1.2.3 From 02e5fbb819f02d26a8a7179cf04021a0f6c6ddf6 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 14 May 2012 16:41:04 -0700 Subject: base canvas 2d rendering of radial gradient on size of the filled region only --- js/lib/geom/rectangle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/lib') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index cf0e7fc8..4415af43 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -537,7 +537,8 @@ exports.Rectangle = Object.create(GeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); + var ww = w - 2*lw, hh = h - 2*lw; + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2); } else { gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); } -- cgit v1.2.3 From cb37bee07085690d72e69a82e76cae9166e5f0f1 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 15 May 2012 16:02:27 -0700 Subject: Gradient matching between WebGL and Canvas2D --- js/lib/geom/circle.js | 119 +++++--------- js/lib/geom/rectangle.js | 183 +++++++++++----------- js/lib/rdge/materials/radial-gradient-material.js | 31 ++-- 3 files changed, 156 insertions(+), 177 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index b60ad58f..2ca4c1f5 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -505,9 +505,9 @@ exports.Circle = Object.create(GeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(this._width, this._height)/2); + xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); } else { - gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); + gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; @@ -804,79 +804,44 @@ exports.Circle = Object.create(GeomObj, { } }, - /* - this.getNearPoint = function( pt, dir ) { - var world = this.getWorld(); - if (!world) throw( "null world in getNearPoint" ); - - // get a point on the plane of the circle - // the point is in NDC, as is the input parameters - var mat = this.getMatrix(); - var plane = [0,0,1,0]; - plane = MathUtils.transformPlane( plane, mat ); - var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); - - // transform the projected point back to the XY plane - //var invMat = mat.inverse(); - var invMat = glmat4.inverse( mat, [] ); - var planePt = MathUtils.transformPoint( projPt, invMat ); - - // get the normalized device coordinates (NDC) for - // the position and radii. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, - xRadNDC = this._width/vpw, yRadNDC = this._height/vph; - var projMat = world.makePerspectiveMatrix(); - var z = -world.getViewDistance(); - var planePtNDC = planePt.slice(0); - planePtNDC[2] = z; - planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat ); - planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC ); - - // get the gl coordinates - var aspect = world.getAspect(); - var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), - b = -t, - r = aspect*t, - l = -r; - - var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC ); - var degrees = angle*180.0/Math.PI; - var objPt = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0]; - - // convert to GL coordinates - objPt[0] = -z*(r-l)/(2.0*zn)*objPt[0]; - objPt[1] = -z*(t-b)/(2.0*zn)*objPt[1]; - - // re-apply the transform - objPt = MathUtils.transformPoint( objPt, mat ); - - return objPt; - }; - */ - recalcTexMapCoords: { - value: function(vrts, uvs) { - var n = vrts.length/3; - var ivrt = 0, iuv = 0; - var uMin = 1.e8, uMax = -1.e8, - vMin = 1.e8, vMax = -1.e8; - - for (var i=0; i uMax) uMax = uvs[iuv]; - - iuv++; ivrt++; - uvs[iuv] = 0.5*(vrts[ivrt]/this._ovalHeight + 1); - if (uvs[iuv] < vMin) vMin = uvs[iuv]; - if (uvs[iuv] > vMax) vMax = uvs[iuv]; - iuv++; ivrt += 2; - } - - //console.log( "remap: " + uvs ); - //console.log( "uRange: " + uMin + " => " + uMax ); - //console.log( "vRange: " + vMin + " => " + vMax ); - } - } + recalcTexMapCoords: { + value: function(vrts, uvs) { + var n = vrts.length/3; + if (n === 0) return; + var ivrt = 0, iuv = 0; + var uMin = 1.e8, uMax = -1.e8, + vMin = 1.e8, vMax = -1.e8; + + var i, index = 3; + var xMin = vrts[0], xMax = vrts[0], + yMin = vrts[1], yMax = vrts[1]; + for (i=1; i xMax) xMax = vrts[index]; + + if (vrts[index+1] < yMin) yMin = vrts[index+1]; + else if (vrts[index+1] > yMax) yMax = vrts[index+1]; + + index += 3; + } + var ovalWidth = xMax - xMin, + ovalHeight = yMax - yMin; + for (i=0; i uMax) uMax = uvs[iuv]; + + iuv++; ivrt++; + uvs[iuv] = (vrts[ivrt]-yMin)/ovalHeight; + if (uvs[iuv] < vMin) vMin = uvs[iuv]; + if (uvs[iuv] > vMax) vMax = uvs[iuv]; + iuv++; ivrt += 2; + } + + //console.log( "remap" ); + //console.log( "uRange: " + uMin + " => " + uMax ); + //console.log( "vRange: " + vMin + " => " + vMax ); + } + } }); \ No newline at end of file diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 4415af43..8fc80c60 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, { }, render: { - value: function() { - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in rectangle render" ); - - // get the context - var ctx = world.get2DContext(); - if (!ctx) return; - - // get some dimensions - var lw = this._strokeWidth; - var w = world.getViewportWidth(), - h = world.getViewportHeight(); - - var c, - inset, - gradient, - colors, - len, - n, - position, - cs; - // render the fill - ctx.beginPath(); - if (this._fillColor) { - inset = Math.ceil( lw ) - 0.5; - - if(this._fillColor.gradientMode) { - if(this._fillColor.gradientMode === "radial") { + value: function() { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in rectangle render" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // get some dimensions + var lw = this._strokeWidth; + var w = world.getViewportWidth(), + h = world.getViewportHeight(); + + var c, + inset, + gradient, + colors, + len, + n, + position, + cs; + // render the fill + ctx.beginPath(); + if (this._fillColor) { + inset = Math.ceil( lw ) - 0.5; + + if(this._fillColor.gradientMode) { + if(this._fillColor.gradientMode === "radial") { var ww = w - 2*lw, hh = h - 2*lw; - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); - } - colors = this._fillColor.color; - - len = colors.length; - - for(n=0; n