Skip to content

/Babylon.js

Browse files

Adding complex type support in GUI

  • Loading branch information...
1 parent 8c6b42c commit 1e3e9f60ee7275cf859e869f6a18d93ae878adb5 @meulta meulta committed
View
15 proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.js
@@ -9,7 +9,6 @@ var BABYLON;
this._numberOfTilesHeight = 3;
this._numberOfTilesWidth = 3;
this._amplitude = 9.0;
- this._marbleColor = new BABYLON.Color3(0.77, 0.47, 0.40);
this._jointColor = new BABYLON.Color3(0.72, 0.72, 0.72);
this.updateShaderUniforms();
}
@@ -17,7 +16,6 @@ var BABYLON;
this.setFloat("numberOfTilesHeight", this._numberOfTilesHeight);
this.setFloat("numberOfTilesWidth", this._numberOfTilesWidth);
this.setFloat("amplitude", this._amplitude);
- this.setColor3("marbleColor", this._marbleColor);
this.setColor3("jointColor", this._jointColor);
};
Object.defineProperty(MarbleProceduralTexture.prototype, "numberOfTilesHeight", {
@@ -64,20 +62,9 @@ var BABYLON;
enumerable: true,
configurable: true
});
- Object.defineProperty(MarbleProceduralTexture.prototype, "marbleColor", {
- get: function () {
- return this._marbleColor;
- },
- set: function (value) {
- this._marbleColor = value;
- this.updateShaderUniforms();
- },
- enumerable: true,
- configurable: true
- });
return MarbleProceduralTexture;
})(BABYLON.ProceduralTexture);
BABYLON.MarbleProceduralTexture = MarbleProceduralTexture;
})(BABYLON || (BABYLON = {}));
-BABYLON.Effect.ShadersStore['marbleProceduralTexturePixelShader'] = "precision highp float;\r\n\r\nvarying vec2 vPosition;\r\nvarying vec2 vUV;\r\n\r\nuniform float numberOfTilesHeight;\r\nuniform float numberOfTilesWidth;\r\nuniform float amplitude;\r\nuniform vec3 brickColor;\r\nuniform vec3 jointColor;\r\n\r\nconst vec3 tileSize = vec3(1.1, 1.0, 1.1);\r\nconst vec3 tilePct = vec3(0.98, 1.0, 0.98);\r\n\r\nfloat rand(vec2 n) {\r\n\treturn fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\r\n}\r\n\r\nfloat noise(vec2 n) {\r\n\tconst vec2 d = vec2(0.0, 1.0);\r\n\tvec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\r\n\treturn mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\r\n}\r\n\r\nfloat turbulence(vec2 P)\r\n{\r\n\tfloat val = 0.0;\r\n\tfloat freq = 1.0;\r\n\tfor (int i = 0; i < 4; i++)\r\n\t{\r\n\t\tval += abs(noise(P*freq) / freq);\r\n\t\tfreq *= 2.07;\r\n\t}\r\n\treturn val;\r\n}\r\n\r\nfloat round(float number){\r\n\treturn sign(number)*floor(abs(number) + 0.5);\r\n}\r\n\r\nvec3 marble_color(float x)\r\n{\r\n\tvec3 col;\r\n\tx = 0.5*(x + 1.);\r\n\tx = sqrt(x); \r\n\tx = sqrt(x);\r\n\tx = sqrt(x);\r\n\tcol = vec3(.2 + .75*x); \r\n\tcol.b *= 0.95; \r\n\treturn col;\r\n}\r\n\r\nvoid main()\r\n{\r\n\tfloat brickW = 1.0 / numberOfTilesWidth;\r\n\tfloat brickH = 1.0 / numberOfTilesHeight;\r\n\tfloat jointWPercentage = 0.01;\r\n\tfloat jointHPercentage = 0.01;\r\n\tvec3 color = brickColor;\r\n\tfloat yi = vUV.y / brickH;\r\n\tfloat nyi = round(yi);\r\n\tfloat xi = vUV.x / brickW;\r\n\r\n\tif (mod(floor(yi), 2.0) == 0.0){\r\n\t\txi = xi - 0.5;\r\n\t}\r\n\r\n\tfloat nxi = round(xi);\r\n\tvec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);\r\n\r\n\tif (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){\r\n\t\tcolor = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);\r\n\t}\r\n\telse if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){\r\n\t\tcolor = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);\r\n\t}\r\n\telse {\r\n\t\tfloat t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));\r\n\t\tt += amplitude * turbulence(brickvUV.xy);\r\n\t\tt = sin(t);\r\n\t\tcolor = marble_color(t);\r\n\t}\r\n\r\n\tgl_FragColor = vec4(color, 0.0);\r\n}";
+BABYLON.Effect.ShadersStore['marbleProceduralTexturePixelShader'] = "precision highp float;\r\n\r\nvarying vec2 vPosition;\r\nvarying vec2 vUV;\r\n\r\nuniform float numberOfTilesHeight;\r\nuniform float numberOfTilesWidth;\r\nuniform float amplitude;\r\nuniform vec3 marbleColor;\r\nuniform vec3 jointColor;\r\n\r\nconst vec3 tileSize = vec3(1.1, 1.0, 1.1);\r\nconst vec3 tilePct = vec3(0.98, 1.0, 0.98);\r\n\r\nfloat rand(vec2 n) {\r\n\treturn fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\r\n}\r\n\r\nfloat noise(vec2 n) {\r\n\tconst vec2 d = vec2(0.0, 1.0);\r\n\tvec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\r\n\treturn mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\r\n}\r\n\r\nfloat turbulence(vec2 P)\r\n{\r\n\tfloat val = 0.0;\r\n\tfloat freq = 1.0;\r\n\tfor (int i = 0; i < 4; i++)\r\n\t{\r\n\t\tval += abs(noise(P*freq) / freq);\r\n\t\tfreq *= 2.07;\r\n\t}\r\n\treturn val;\r\n}\r\n\r\nfloat round(float number){\r\n\treturn sign(number)*floor(abs(number) + 0.5);\r\n}\r\n\r\nvec3 marble_color(float x)\r\n{\r\n\tvec3 col;\r\n\tx = 0.5*(x + 1.);\r\n\tx = sqrt(x); \r\n\tx = sqrt(x);\r\n\tx = sqrt(x);\r\n\tcol = vec3(.2 + .75*x); \r\n\tcol.b *= 0.95; \r\n\treturn col;\r\n}\r\n\r\nvoid main()\r\n{\r\n\tfloat brickW = 1.0 / numberOfTilesWidth;\r\n\tfloat brickH = 1.0 / numberOfTilesHeight;\r\n\tfloat jointWPercentage = 0.01;\r\n\tfloat jointHPercentage = 0.01;\r\n\tvec3 color = marbleColor;\r\n\tfloat yi = vUV.y / brickH;\r\n\tfloat nyi = round(yi);\r\n\tfloat xi = vUV.x / brickW;\r\n\r\n\tif (mod(floor(yi), 2.0) == 0.0){\r\n\t\txi = xi - 0.5;\r\n\t}\r\n\r\n\tfloat nxi = round(xi);\r\n\tvec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);\r\n\r\n\tif (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){\r\n\t\tcolor = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);\r\n\t}\r\n\telse if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){\r\n\t\tcolor = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);\r\n\t}\r\n\telse {\r\n\t\tfloat t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));\r\n\t\tt += amplitude * turbulence(brickvUV.xy);\r\n\t\tt = sin(t);\r\n\t\tcolor = marble_color(t);\r\n\t}\r\n\r\n\tgl_FragColor = vec4(color, 0.0);\r\n}";
View
2 proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.min.js
@@ -1 +1 @@
-var BABYLON;!function(r){var e=function(e){function n(n,t,i,o,l){e.call(this,n,t,"marbleProceduralTexture",i,o,l),this._numberOfTilesHeight=3,this._numberOfTilesWidth=3,this._amplitude=9,this._marbleColor=new r.Color3(.77,.47,.4),this._jointColor=new r.Color3(.72,.72,.72),this.updateShaderUniforms()}return __extends(n,e),n.prototype.updateShaderUniforms=function(){this.setFloat("numberOfTilesHeight",this._numberOfTilesHeight),this.setFloat("numberOfTilesWidth",this._numberOfTilesWidth),this.setFloat("amplitude",this._amplitude),this.setColor3("marbleColor",this._marbleColor),this.setColor3("jointColor",this._jointColor)},Object.defineProperty(n.prototype,"numberOfTilesHeight",{get:function(){return this._numberOfTilesHeight},set:function(r){this._numberOfTilesHeight=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"amplitude",{get:function(){return this._amplitude},set:function(r){this._amplitude=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"numberOfTilesWidth",{get:function(){return this._numberOfTilesWidth},set:function(r){this._numberOfTilesWidth=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"jointColor",{get:function(){return this._jointColor},set:function(r){this._jointColor=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"marbleColor",{get:function(){return this._marbleColor},set:function(r){this._marbleColor=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),n}(r.ProceduralTexture);r.MarbleProceduralTexture=e}(BABYLON||(BABYLON={})),BABYLON.Effect.ShadersStore.marbleProceduralTexturePixelShader="precision highp float;\r\n\r\nvarying vec2 vPosition;\r\nvarying vec2 vUV;\r\n\r\nuniform float numberOfTilesHeight;\r\nuniform float numberOfTilesWidth;\r\nuniform float amplitude;\r\nuniform vec3 brickColor;\r\nuniform vec3 jointColor;\r\n\r\nconst vec3 tileSize = vec3(1.1, 1.0, 1.1);\r\nconst vec3 tilePct = vec3(0.98, 1.0, 0.98);\r\n\r\nfloat rand(vec2 n) {\r\n return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\r\n}\r\n\r\nfloat noise(vec2 n) {\r\n const vec2 d = vec2(0.0, 1.0);\r\n vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\r\n return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\r\n}\r\n\r\nfloat turbulence(vec2 P)\r\n{\r\n float val = 0.0;\r\n float freq = 1.0;\r\n for (int i = 0; i < 4; i++)\r\n {\r\n val += abs(noise(P*freq) / freq);\r\n freq *= 2.07;\r\n }\r\n return val;\r\n}\r\n\r\nfloat round(float number){\r\n return sign(number)*floor(abs(number) + 0.5);\r\n}\r\n\r\nvec3 marble_color(float x)\r\n{\r\n vec3 col;\r\n x = 0.5*(x + 1.);\r\n x = sqrt(x); \r\n x = sqrt(x);\r\n x = sqrt(x);\r\n col = vec3(.2 + .75*x); \r\n col.b *= 0.95; \r\n return col;\r\n}\r\n\r\nvoid main()\r\n{\r\n float brickW = 1.0 / numberOfTilesWidth;\r\n float brickH = 1.0 / numberOfTilesHeight;\r\n float jointWPercentage = 0.01;\r\n float jointHPercentage = 0.01;\r\n vec3 color = brickColor;\r\n float yi = vUV.y / brickH;\r\n float nyi = round(yi);\r\n float xi = vUV.x / brickW;\r\n\r\n if (mod(floor(yi), 2.0) == 0.0){\r\n xi = xi - 0.5;\r\n }\r\n\r\n float nxi = round(xi);\r\n vec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);\r\n\r\n if (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){\r\n color = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);\r\n }\r\n else if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){\r\n color = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);\r\n }\r\n else {\r\n float t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));\r\n t += amplitude * turbulence(brickvUV.xy);\r\n t = sin(t);\r\n color = marble_color(t);\r\n }\r\n\r\n gl_FragColor = vec4(color, 0.0);\r\n}";
+var BABYLON;!function(r){var n=function(n){function e(e,t,i,o,l){n.call(this,e,t,"marbleProceduralTexture",i,o,l),this._numberOfTilesHeight=3,this._numberOfTilesWidth=3,this._amplitude=9,this._jointColor=new r.Color3(.72,.72,.72),this.updateShaderUniforms()}return __extends(e,n),e.prototype.updateShaderUniforms=function(){this.setFloat("numberOfTilesHeight",this._numberOfTilesHeight),this.setFloat("numberOfTilesWidth",this._numberOfTilesWidth),this.setFloat("amplitude",this._amplitude),this.setColor3("jointColor",this._jointColor)},Object.defineProperty(e.prototype,"numberOfTilesHeight",{get:function(){return this._numberOfTilesHeight},set:function(r){this._numberOfTilesHeight=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"amplitude",{get:function(){return this._amplitude},set:function(r){this._amplitude=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"numberOfTilesWidth",{get:function(){return this._numberOfTilesWidth},set:function(r){this._numberOfTilesWidth=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"jointColor",{get:function(){return this._jointColor},set:function(r){this._jointColor=r,this.updateShaderUniforms()},enumerable:!0,configurable:!0}),e}(r.ProceduralTexture);r.MarbleProceduralTexture=n}(BABYLON||(BABYLON={})),BABYLON.Effect.ShadersStore.marbleProceduralTexturePixelShader="precision highp float;\r\n\r\nvarying vec2 vPosition;\r\nvarying vec2 vUV;\r\n\r\nuniform float numberOfTilesHeight;\r\nuniform float numberOfTilesWidth;\r\nuniform float amplitude;\r\nuniform vec3 marbleColor;\r\nuniform vec3 jointColor;\r\n\r\nconst vec3 tileSize = vec3(1.1, 1.0, 1.1);\r\nconst vec3 tilePct = vec3(0.98, 1.0, 0.98);\r\n\r\nfloat rand(vec2 n) {\r\n return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\r\n}\r\n\r\nfloat noise(vec2 n) {\r\n const vec2 d = vec2(0.0, 1.0);\r\n vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\r\n return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\r\n}\r\n\r\nfloat turbulence(vec2 P)\r\n{\r\n float val = 0.0;\r\n float freq = 1.0;\r\n for (int i = 0; i < 4; i++)\r\n {\r\n val += abs(noise(P*freq) / freq);\r\n freq *= 2.07;\r\n }\r\n return val;\r\n}\r\n\r\nfloat round(float number){\r\n return sign(number)*floor(abs(number) + 0.5);\r\n}\r\n\r\nvec3 marble_color(float x)\r\n{\r\n vec3 col;\r\n x = 0.5*(x + 1.);\r\n x = sqrt(x); \r\n x = sqrt(x);\r\n x = sqrt(x);\r\n col = vec3(.2 + .75*x); \r\n col.b *= 0.95; \r\n return col;\r\n}\r\n\r\nvoid main()\r\n{\r\n float brickW = 1.0 / numberOfTilesWidth;\r\n float brickH = 1.0 / numberOfTilesHeight;\r\n float jointWPercentage = 0.01;\r\n float jointHPercentage = 0.01;\r\n vec3 color = marbleColor;\r\n float yi = vUV.y / brickH;\r\n float nyi = round(yi);\r\n float xi = vUV.x / brickW;\r\n\r\n if (mod(floor(yi), 2.0) == 0.0){\r\n xi = xi - 0.5;\r\n }\r\n\r\n float nxi = round(xi);\r\n vec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);\r\n\r\n if (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){\r\n color = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);\r\n }\r\n else if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){\r\n color = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);\r\n }\r\n else {\r\n float t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));\r\n t += amplitude * turbulence(brickvUV.xy);\r\n t = sin(t);\r\n color = marble_color(t);\r\n }\r\n\r\n gl_FragColor = vec4(color, 0.0);\r\n}";
View
11 proceduralTexturesLibrary/proceduralTextures/marble/babylon.marbleProceduralTexture.ts
@@ -5,7 +5,6 @@ module BABYLON {
private _numberOfTilesHeight: number = 3;
private _numberOfTilesWidth: number = 3;
private _amplitude: number = 9.0;
- private _marbleColor = new Color3(0.77, 0.47, 0.40);
private _jointColor = new Color3(0.72, 0.72, 0.72);
constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
@@ -17,7 +16,6 @@ module BABYLON {
this.setFloat("numberOfTilesHeight", this._numberOfTilesHeight);
this.setFloat("numberOfTilesWidth", this._numberOfTilesWidth);
this.setFloat("amplitude", this._amplitude);
- this.setColor3("marbleColor", this._marbleColor);
this.setColor3("jointColor", this._jointColor);
}
@@ -56,14 +54,5 @@ module BABYLON {
this._jointColor = value;
this.updateShaderUniforms();
}
-
- public get marbleColor(): Color3 {
- return this._marbleColor;
- }
-
- public set marbleColor(value: Color3) {
- this._marbleColor = value;
- this.updateShaderUniforms();
- }
}
}
View
168 proceduralTexturesLibrary/proceduralTextures/marble/marbleProceduralTexture.fragment.fx
@@ -1,85 +1,85 @@
-precision highp float;
-
-varying vec2 vPosition;
-varying vec2 vUV;
-
-uniform float numberOfTilesHeight;
-uniform float numberOfTilesWidth;
-uniform float amplitude;
-uniform vec3 brickColor;
-uniform vec3 jointColor;
-
-const vec3 tileSize = vec3(1.1, 1.0, 1.1);
-const vec3 tilePct = vec3(0.98, 1.0, 0.98);
-
-float rand(vec2 n) {
- return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
-}
-
-float noise(vec2 n) {
- const vec2 d = vec2(0.0, 1.0);
- vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
- return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
-}
-
-float turbulence(vec2 P)
-{
- float val = 0.0;
- float freq = 1.0;
- for (int i = 0; i < 4; i++)
- {
- val += abs(noise(P*freq) / freq);
- freq *= 2.07;
- }
- return val;
-}
-
-float round(float number){
- return sign(number)*floor(abs(number) + 0.5);
-}
-
-vec3 marble_color(float x)
-{
- vec3 col;
- x = 0.5*(x + 1.);
- x = sqrt(x);
- x = sqrt(x);
- x = sqrt(x);
- col = vec3(.2 + .75*x);
- col.b *= 0.95;
- return col;
-}
-
-void main()
-{
- float brickW = 1.0 / numberOfTilesWidth;
- float brickH = 1.0 / numberOfTilesHeight;
- float jointWPercentage = 0.01;
- float jointHPercentage = 0.01;
- vec3 color = brickColor;
- float yi = vUV.y / brickH;
- float nyi = round(yi);
- float xi = vUV.x / brickW;
-
- if (mod(floor(yi), 2.0) == 0.0){
- xi = xi - 0.5;
- }
-
- float nxi = round(xi);
- vec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);
-
- if (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){
- color = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);
- }
- else if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){
- color = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);
- }
- else {
- float t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));
- t += amplitude * turbulence(brickvUV.xy);
- t = sin(t);
- color = marble_color(t);
- }
-
- gl_FragColor = vec4(color, 0.0);
+precision highp float;
+
+varying vec2 vPosition;
+varying vec2 vUV;
+
+uniform float numberOfTilesHeight;
+uniform float numberOfTilesWidth;
+uniform float amplitude;
+uniform vec3 marbleColor;
+uniform vec3 jointColor;
+
+const vec3 tileSize = vec3(1.1, 1.0, 1.1);
+const vec3 tilePct = vec3(0.98, 1.0, 0.98);
+
+float rand(vec2 n) {
+ return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+
+float noise(vec2 n) {
+ const vec2 d = vec2(0.0, 1.0);
+ vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+ return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+
+float turbulence(vec2 P)
+{
+ float val = 0.0;
+ float freq = 1.0;
+ for (int i = 0; i < 4; i++)
+ {
+ val += abs(noise(P*freq) / freq);
+ freq *= 2.07;
+ }
+ return val;
+}
+
+float round(float number){
+ return sign(number)*floor(abs(number) + 0.5);
+}
+
+vec3 marble_color(float x)
+{
+ vec3 col;
+ x = 0.5*(x + 1.);
+ x = sqrt(x);
+ x = sqrt(x);
+ x = sqrt(x);
+ col = vec3(.2 + .75*x);
+ col.b *= 0.95;
+ return col;
+}
+
+void main()
+{
+ float brickW = 1.0 / numberOfTilesWidth;
+ float brickH = 1.0 / numberOfTilesHeight;
+ float jointWPercentage = 0.01;
+ float jointHPercentage = 0.01;
+ vec3 color = marbleColor;
+ float yi = vUV.y / brickH;
+ float nyi = round(yi);
+ float xi = vUV.x / brickW;
+
+ if (mod(floor(yi), 2.0) == 0.0){
+ xi = xi - 0.5;
+ }
+
+ float nxi = round(xi);
+ vec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);
+
+ if (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){
+ color = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);
+ }
+ else if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){
+ color = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);
+ }
+ else {
+ float t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));
+ t += amplitude * turbulence(brickvUV.xy);
+ t = sin(t);
+ color = marble_color(t);
+ }
+
+ gl_FragColor = vec4(color, 0.0);
}
View
103 proceduralTexturesLibrary/test/index.html
@@ -56,16 +56,7 @@
<script src="add/addStarfieldPT.js"></script>
<script>
- dat.GUI.prototype.removeFolder = function(name) {
- var folder = this.__folders[name];
- if (!folder) {
- return;
- }
- folder.close();
- this.__ul.removeChild(folder.domElement.parentNode);
- delete this.__folders[name];
- this.onResize();
- }
+
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
@@ -211,50 +202,106 @@
//placeholder for current texture options
var currentPTOptions = gui.addFolder('Texture Options');
var PTOptions = [];
+
+ dat.GUI.prototype.removeFolder = function(name) {
+ var folder = this.__folders[name];
+ if (!folder) {
+ return;
+ }
+ folder.close();
+ this.__ul.removeChild(folder.domElement.parentNode);
+ delete this.__folders[name];
+ this.onResize();
+ }
+
var resetPTOptions = function(){
//empty options
while(PTOptions.length > 0){
- currentPTOptions.remove(PTOptions.pop());
+ var option = PTOptions.pop()
+ if(option.optionType === "Folder"){
+ currentPTOptions.removeFolder(option.optionValue);
+ }
+ else {
+ currentPTOptions.remove(option.optionValue);
+ }
}
}
+ var addFloatSubOption = function(guiElement, field, propertyName, proxy, initvalue){
+ proxy[propertyName] = initvalue;
+ guiElement.add(proxy, propertyName).onChange(function () {
+ try {
+ var xvalue = parseFloat(proxy[propertyName]);
+ eval('field.' + propertyName + ' = xvalue');
+ } catch (e) {
+
+ }
+ });
+ }
+
var addPToptions = function(pt, fieldNames){
for(var fieldid = 0; fieldid < fieldNames.length; fieldid++){
var field = fieldNames[fieldid]
- var added;
+ var added = {};
if(typeof pt[field] != 'object' && pt[field] != 'undefined') {
- added = currentPTOptions.add(pt, fieldNames[fieldid]);
+ added.optionType = "Value";
+ added.optionValue = currentPTOptions.add(pt, fieldNames[fieldid]);
}
else {
var proxy = {};
if(pt[field] instanceof BABYLON.Vector2){
- proxy[field] = 'new BABYLON.Vector2(0.5, 0.5)';
+ added.optionType = 'Folder';
+ added.optionValue = field + ' ('+ pt[field].constructor.name +')';
+ var folder = currentPTOptions.addFolder(added.optionValue);
+ addFloatSubOption(folder, pt[field], 'x', proxy, pt[field].x);
+ addFloatSubOption(folder, pt[field], 'y', proxy, pt[field].y);
}
+
else if(pt[field] instanceof BABYLON.Vector3){
- proxy[field] = 'new BABYLON.Vector3(0.5, 0.5, 0.5)';
+ added.optionType = 'Folder';
+ added.optionValue = field + ' ('+ pt[field].constructor.name +')';
+ var folder = currentPTOptions.addFolder(added.optionValue);
+ addFloatSubOption(folder, pt[field], 'x', proxy, pt[field].x);
+ addFloatSubOption(folder, pt[field], 'y', proxy, pt[field].y);
+ addFloatSubOption(folder, pt[field], 'z', proxy, pt[field].z);
}
else if(pt[field] instanceof BABYLON.Vector4){
- proxy[field] = 'new BABYLON.Vector4(0.5, 0.5, 0.5, 0.5)';
+ added.optionType = 'Folder';
+ added.optionValue = field + ' ('+ pt[field].constructor.name +')';
+ var folder = currentPTOptions.addFolder(added.optionValue);
+ addFloatSubOption(folder, pt[field], 'x', proxy, pt[field].x);
+ addFloatSubOption(folder, pt[field], 'y', proxy, pt[field].y);
+ addFloatSubOption(folder, pt[field], 'z', proxy, pt[field].z);
+ addFloatSubOption(folder, pt[field], 'w', proxy, pt[field].w);
}
else if(pt[field] instanceof BABYLON.Color3){
- proxy[field] = 'new BABYLON.Color3(0.5, 0.5, 0.5)';
+ added.optionType = 'Folder';
+ added.optionValue = field + ' ('+ pt[field].constructor.name +')';
+ var folder = currentPTOptions.addFolder(added.optionValue);
+ addFloatSubOption(folder, pt[field], 'r', proxy, pt[field].r);
+ addFloatSubOption(folder, pt[field], 'g', proxy, pt[field].g);
+ addFloatSubOption(folder, pt[field], 'b', proxy, pt[field].b);
}
else if(pt[field] instanceof BABYLON.Color4){
- proxy[field] = 'new BABYLON.Color4(0.5, 0.5, 0.5, 0.5)';
+ added.optionType = 'Folder';
+ added.optionValue = field + ' ('+ pt[field].constructor.name +')';
+ var folder = currentPTOptions.addFolder(added.optionValue);
+ addFloatSubOption(folder, pt[field], 'r', proxy, pt[field].r);
+ addFloatSubOption(folder, pt[field], 'g', proxy, pt[field].g);
+ addFloatSubOption(folder, pt[field], 'b', proxy, pt[field].b);
+ addFloatSubOption(folder, pt[field], 'a', proxy, pt[field].a);
}
else {
proxy[field] = 'Object (' + pt[field].constructor.name +')';
+ added.optionType = "Value";
+ added.optionValue = currentPTOptions.add(proxy, field).onChange(function () {
+ try {
+ var res = eval(proxy[field]);
+ pt[field] = res;
+ } catch (e) { }
+ });
}
-
- added = currentPTOptions.add(proxy, field).onChange(function () {
- try {
- var res = eval(proxy[field]);
- pt[field] = res;
- } catch (e) {
-
- }
- });
}
PTOptions.push(added);
}
@@ -289,7 +336,7 @@
break;
case "marble":
currentTexture = marblePT;
- addPToptions(marblePT, ['numberOfTilesHeight', 'numberOfTilesWidth', 'amplitude', 'marbleColor', 'jointColor']);
+ addPToptions(marblePT, ['numberOfTilesHeight', 'numberOfTilesWidth', 'amplitude', 'jointColor']);
break;
case "starfield":
currentTexture = starfieldPT;

0 comments on commit 1e3e9f6

Please sign in to comment.
Something went wrong with that request. Please try again.