From 2a8a41711052bb557271c27f82faba8dd13fd880 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 06:12:34 -0800 Subject: preliminary support for setting gradients on webgl shapes. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/geom-obj.js | 65 +++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 52 insertions(+), 13 deletions(-) (limited to 'js/lib/geom/geom-obj.js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index c5880843..726c3595 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -138,22 +138,61 @@ var GeomObj = function GLGeomObj() { // Methods /////////////////////////////////////////////////////////////////////// this.setMaterialColor = function(c, type) { - if (type == "fill") { - this._fillColor = c.slice(0); + if(c.gradientMode) { + var nMats = 0; + if (this._materialArray && this._materialTypeArray) { + nMats = this._materialArray.length; + } + + var stops = [], + colors = c.color; + + var len = colors.length; + // TODO - Current shaders only support 4 color stops + if(len > 4) { + len = 4; + } + + for(var n=0; n --- js/lib/geom/geom-obj.js | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) (limited to 'js/lib/geom/geom-obj.js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 726c3595..1ea74475 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -138,8 +138,10 @@ var GeomObj = function GLGeomObj() { // Methods /////////////////////////////////////////////////////////////////////// this.setMaterialColor = function(c, type) { + var i = 0, + nMats = 0; if(c.gradientMode) { - var nMats = 0; + // Gradient support if (this._materialArray && this._materialTypeArray) { nMats = this._materialArray.length; } @@ -160,7 +162,7 @@ var GeomObj = function GLGeomObj() { stops.push(stop); if (nMats === this._materialTypeArray.length) { - for (var i=0; i */ var MaterialsModel = require("js/models/materials-model").MaterialsModel; +var FlatMaterial = require("js/lib/rdge/materials/flat-material").FlatMaterial; +var LinearGradientMaterial = require("js/lib/rdge/materials/linear-gradient-material").LinearGradientMaterial; +var RadialGradientMaterial = require("js/lib/rdge/materials/radial-gradient-material").RadialGradientMaterial; +var BumpMetalMaterial = require("js/lib/rdge/materials/bump-metal-material").BumpMetalMaterial; +var UberMaterial = require("js/lib/rdge/materials/uber-material").UberMaterial; +var RadialBlurMaterial = require("js/lib/rdge/materials/radial-blur-material").RadialBlurMaterial; +var PlasmaMaterial = require("js/lib/rdge/materials/plasma-material").PlasmaMaterial; +var PulseMaterial = require("js/lib/rdge/materials/pulse-material").PulseMaterial; +var TunnelMaterial = require("js/lib/rdge/materials/tunnel-material").TunnelMaterial; +var ReliefTunnelMaterial = require("js/lib/rdge/materials/relief-tunnel-material").ReliefTunnelMaterial; +var SquareTunnelMaterial = require("js/lib/rdge/materials/square-tunnel-material").SquareTunnelMaterial; +var FlyMaterial = require("js/lib/rdge/materials/fly-material").FlyMaterial; +var WaterMaterial = require("js/lib/rdge/materials/water-material").WaterMaterial; +var ZInvertMaterial = require("js/lib/rdge/materials/z-invert-material").ZInvertMaterial; +var DeformMaterial = require("js/lib/rdge/materials/deform-material").DeformMaterial; +var StarMaterial = require("js/lib/rdge/materials/star-material").StarMaterial; +var TwistMaterial = require("js/lib/rdge/materials/twist-material").TwistMaterial; +var JuliaMaterial = require("js/lib/rdge/materials/julia-material").JuliaMaterial; +var KeleidoscopeMaterial = require("js/lib/rdge/materials/keleidoscope-material").KeleidoscopeMaterial; +var MandelMaterial = require("js/lib/rdge/materials/mandel-material").MandelMaterial; + /////////////////////////////////////////////////////////////////////// // Class GLGeomObj // Super class for all geometry classes @@ -235,7 +256,26 @@ var GeomObj = function GLGeomObj() { var materialType = this.getPropertyFromString( "material: ", importStr ); switch (materialType) { - case "flat": mat = new FlatMaterial(); break; + case "flat": mat = new FlatMaterial(); break; + case "radialGradient": mat = new RadialGradientMaterial(); break; + case "linearGradient": mat = new LinearGradientMaterial(); break; + case "bumpMetal": mat = new BumpMetalMaterial(); break; + case "uber": mat = new UberMaterial(); break; + case "plasma": mat = new PlasmaMaterial(); break; + case "deform": mat = new DeformMaterial(); break; + case "water": mat = new WaterMaterial(); break; + case "tunnel": mat = new TunnelMaterial(); break; + case "reliefTunnel": mat = new ReliefTunnelMaterial(); break; + case "squareTunnel": mat = new SquareTunnelMaterial(); break; + case "twist": mat = new TwiseMaterial(); break; + case "fly": mat = new FlyMaterial(); break; + case "julia": mat = new JuliaMaterial(); break; + case "mandel": mat = new MandelMaterial(); break; + case "star": mat = new StarMaterial(); break; + case "zinvert": mat = new ZInvertMaterial(); break; + case "keleidoscope": mat = new KeleidoscopeMaterial(); break; + case "radialBlur": mat = new RadialBlurMaterial(); break; + case "pulse": mat = new PulseMaterial(); break; default: console.log( "material type: " + materialType + " is not supported" ); -- cgit v1.2.3 From 46defc9bd11bf077efd672c72787a3b67da1a178 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 12 Mar 2012 14:59:08 -0700 Subject: Uber material changes for IO --- js/lib/geom/geom-obj.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js/lib/geom/geom-obj.js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 1a197832..35ebadb9 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -285,9 +285,11 @@ var GeomObj = function GLGeomObj() { if (mat) mat.import( importStr ); - var endIndex = importStr.indexOf( "endMaterial\n" ); + // pull off the end of the material + var endMat = "endMaterial\n"; + var endIndex = importStr.indexOf( endMat ); if (endIndex < 0) break; - importStr = importStr.substr( endIndex ); + importStr = importStr.substr( endIndex + endMat.length ); } } -- cgit v1.2.3 From 2ac9a855724cc4ccf147ce4130a733a84cc647c3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 12 Mar 2012 16:19:44 -0700 Subject: Support import/export of gradient materials. This fixes the eyedropper not being able to sample gradient colors from WebGL shapes. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/geom-obj.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'js/lib/geom/geom-obj.js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 1ea74475..fb1cb246 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -305,6 +305,49 @@ var GeomObj = function GLGeomObj() { return rtnStr; }; + // Gradient stops for rgba(255,0,0,1) at 0%; rgba(0,255,0,1) at 33%; rgba(0,0,255,1) at 100% will return + // 255,0,0,1@0;0,255,0,1@33;0,0,255,1@100 + this.gradientToString = function(colors) { + var rtnStr = ""; + if(colors && colors.length) { + var c = colors[0], + len = colors.length; + + rtnStr += String(c.value.r + "," + c.value.g + "," + c.value.b + "," + c.value.a + "@" + c.position); + for(var i=1; i */ var MaterialsModel = require("js/models/materials-model").MaterialsModel; +/* var FlatMaterial = require("js/lib/rdge/materials/flat-material").FlatMaterial; var LinearGradientMaterial = require("js/lib/rdge/materials/linear-gradient-material").LinearGradientMaterial; var RadialGradientMaterial = require("js/lib/rdge/materials/radial-gradient-material").RadialGradientMaterial; @@ -25,6 +26,7 @@ var TwistMaterial = require("js/lib/rdge/materials/twist-material").TwistMateria var JuliaMaterial = require("js/lib/rdge/materials/julia-material").JuliaMaterial; var KeleidoscopeMaterial = require("js/lib/rdge/materials/keleidoscope-material").KeleidoscopeMaterial; var MandelMaterial = require("js/lib/rdge/materials/mandel-material").MandelMaterial; +*/ /////////////////////////////////////////////////////////////////////// // Class GLGeomObj @@ -225,6 +227,83 @@ var GeomObj = function GLGeomObj() { return fillMaterial; }; + this.exportMaterialsJSON = function() + { + var jObj; + if (this._materialArray && this._materialNodeArray) + { + var nMats = this._materialArray.length; + if (nMats > 0) + { + var arr = []; + + for (var i=0; i */ var MaterialsModel = require("js/models/materials-model").MaterialsModel; -/* -var FlatMaterial = require("js/lib/rdge/materials/flat-material").FlatMaterial; -var LinearGradientMaterial = require("js/lib/rdge/materials/linear-gradient-material").LinearGradientMaterial; -var RadialGradientMaterial = require("js/lib/rdge/materials/radial-gradient-material").RadialGradientMaterial; -var BumpMetalMaterial = require("js/lib/rdge/materials/bump-metal-material").BumpMetalMaterial; -var UberMaterial = require("js/lib/rdge/materials/uber-material").UberMaterial; -var RadialBlurMaterial = require("js/lib/rdge/materials/radial-blur-material").RadialBlurMaterial; -var PlasmaMaterial = require("js/lib/rdge/materials/plasma-material").PlasmaMaterial; -var PulseMaterial = require("js/lib/rdge/materials/pulse-material").PulseMaterial; -var TunnelMaterial = require("js/lib/rdge/materials/tunnel-material").TunnelMaterial; -var ReliefTunnelMaterial = require("js/lib/rdge/materials/relief-tunnel-material").ReliefTunnelMaterial; -var SquareTunnelMaterial = require("js/lib/rdge/materials/square-tunnel-material").SquareTunnelMaterial; -var FlyMaterial = require("js/lib/rdge/materials/fly-material").FlyMaterial; -var WaterMaterial = require("js/lib/rdge/materials/water-material").WaterMaterial; -var ZInvertMaterial = require("js/lib/rdge/materials/z-invert-material").ZInvertMaterial; -var DeformMaterial = require("js/lib/rdge/materials/deform-material").DeformMaterial; -var StarMaterial = require("js/lib/rdge/materials/star-material").StarMaterial; -var TwistMaterial = require("js/lib/rdge/materials/twist-material").TwistMaterial; -var JuliaMaterial = require("js/lib/rdge/materials/julia-material").JuliaMaterial; -var KeleidoscopeMaterial = require("js/lib/rdge/materials/keleidoscope-material").KeleidoscopeMaterial; -var MandelMaterial = require("js/lib/rdge/materials/mandel-material").MandelMaterial; -*/ /////////////////////////////////////////////////////////////////////// // Class GLGeomObj @@ -335,7 +313,7 @@ var GeomObj = function GLGeomObj() { break; default: - console.log( "material type: " + materialType + " is not supported" ); + console.log( "material type: " + shaderName + " is not supported" ); break; } @@ -375,26 +353,29 @@ var GeomObj = function GLGeomObj() { var materialType = this.getPropertyFromString( "material: ", importStr ); switch (materialType) { - case "flat": mat = new FlatMaterial(); break; - case "radialGradient": mat = new RadialGradientMaterial(); break; - case "linearGradient": mat = new LinearGradientMaterial(); break; - case "bumpMetal": mat = new BumpMetalMaterial(); break; - case "uber": mat = new UberMaterial(); break; - case "plasma": mat = new PlasmaMaterial(); break; - case "deform": mat = new DeformMaterial(); break; - case "water": mat = new WaterMaterial(); break; - case "tunnel": mat = new TunnelMaterial(); break; - case "reliefTunnel": mat = new ReliefTunnelMaterial(); break; - case "squareTunnel": mat = new SquareTunnelMaterial(); break; - case "twist": mat = new TwiseMaterial(); break; - case "fly": mat = new FlyMaterial(); break; - case "julia": mat = new JuliaMaterial(); break; - case "mandel": mat = new MandelMaterial(); break; - case "star": mat = new StarMaterial(); break; - case "zinvert": mat = new ZInvertMaterial(); break; - case "keleidoscope": mat = new KeleidoscopeMaterial(); break; - case "radialBlur": mat = new RadialBlurMaterial(); break; - case "pulse": mat = new PulseMaterial(); break; + case "flat": + case "radialGradient": + case "linearGradient": + case "bumpMetal": + case "uber": + case "plasma": + case "deform": + case "water": + case "tunnel": + case "reliefTunnel": + case "squareTunnel": + case "twist": + case "fly": + case "julia": + case "mandel": + case "star": + case "zinvert": + case "keleidoscope": + case "radialBlur": + case "pulse": + mat = MaterialsModel.getMaterialByShader( materialType ); + if (mat) mat = mat.dup(); + break; default: console.log( "material type: " + materialType + " is not supported" ); -- cgit v1.2.3 From 98a02c1ac6f189aba93d7cce64ba5bdbc0617f6c Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 20 Mar 2012 16:26:52 -0700 Subject: Bug Fixes for Canvas & WebGL File IO --- js/lib/geom/geom-obj.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'js/lib/geom/geom-obj.js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 63f71955..75b7808b 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -279,6 +279,11 @@ var GeomObj = function GLGeomObj() { this.importMaterialsJSON = function( jObj ) { + this._materialArray = []; + this._materialTypeArray = []; + + if (!jObj) return; + var nMaterials = jObj.nMaterials; var matArray = jObj.materials; for (var i=0; i 0) -- cgit v1.2.3 From 723ea402b74efa0424b96c7e125c8ebb2b72410c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 26 Mar 2012 17:36:27 -0700 Subject: Fixed issue with WebGL materials not working after file-save or chrome-preview. Also fixed Raiders material not showing in the PI or working during Chrome Preview. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/geom-obj.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/lib/geom/geom-obj.js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index a87bdbf5..3c4e4bbf 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -302,6 +302,7 @@ var GeomObj = function GLGeomObj() { case "deform": case "water": case "paris": + case "raiders": case "tunnel": case "reliefTunnel": case "squareTunnel": @@ -375,6 +376,7 @@ var GeomObj = function GLGeomObj() { case "deform": case "water": case "paris": + case "raiders": case "tunnel": case "reliefTunnel": case "squareTunnel": -- cgit v1.2.3 From 903b01b9d0501e6f974034273385a0517107b1e3 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 27 Mar 2012 12:42:42 -0700 Subject: File IO for the brush stroke AND changing the data type of brush stroke from GEOM_TYPE_CUBIC_BEZIER to GEOM_TYPE_BRUSH_STROKE --- js/lib/geom/geom-obj.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/lib/geom/geom-obj.js') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index a87bdbf5..be80f1e4 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -19,6 +19,7 @@ var GeomObj = function GLGeomObj() { this.GEOM_TYPE_LINE = 3; this.GEOM_TYPE_PATH = 4; this.GEOM_TYPE_CUBIC_BEZIER = 5; + this.GEOM_TYPE_BRUSH_STROKE = 6; this.GEOM_TYPE_UNDEFINED = -1; // Needed for calculating dashed/dotted strokes -- cgit v1.2.3