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 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