-added more options

Author: pjewell-biociphers

src/main.ts

@@ -28,6 +28,14 @@ const controls = {
 
   'Noise Color': [ 255, 255, 0 ],
   'Depth': 0.1,
+  'Rows': 4,
+  'TriScale': 1.0,
+  'LowTriRange': -1.0,
+  'HighTriRange': 1.0,
+  'HeightT': 'Off',
+  'SymbolScaleT': 'Off',
+  'SymbolPositionT': 'Off'
+
 };
 
 let icosphere: Icosphere;
@@ -77,7 +85,14 @@ function main() {
   var f1 = gui.addFolder('Greeble Control');
 
   f1.add(controls, 'Depth', 0, 0.5).step(0.02);
-  
+  f1.add(controls, 'Rows', 2, 30).step(1);
+  f1.add(controls, 'TriScale', 0.01, 1.5).step(0.01);
+  f1.add(controls, 'LowTriRange', -1.0, 1.0).step(0.01);
+  f1.add(controls, 'HighTriRange', -1.0, 1.0).step(0.01);
+  f1.add(controls, 'HeightT', [ 'On', 'Off' ]);
+  f1.add(controls, 'SymbolScaleT', [ 'On', 'Off' ]);
+  f1.add(controls, 'SymbolPositionT', [ 'On', 'Off' ]);
+
   var f2 = gui.addFolder('Animation');
 
   f2.add(controls, 'Camera Animation', [ 'On', 'Off' ]);
@@ -152,6 +167,14 @@ function main() {
       icosphere.create();
     }
 
+    sdf.setRows(controls['Rows']);
+    sdf.setTriScale(controls['TriScale']);
+    sdf.setLowTriRange(controls['LowTriRange']);
+    sdf.setHighTriRange(controls['HighTriRange']);
+    sdf.setHightT(controls['HeightT'] == 'On' ? 1.0 : 0.0);
+    sdf.setSymbolScaleT(controls['SymbolScaleT'] == 'On' ? 1.0 : 0.0);
+    sdf.setSymbolPositionT(controls['SymbolPositionT'] == 'On' ? 1.0 : 0.0);
+
     renderer.render(camera, time, height, color, noiseColor, sdf, [
       square,
     ], false);

src/rendering/gl/ShaderProgram.ts

@@ -81,6 +81,13 @@ class ShaderProgram {
   unifUp: WebGLUniformLocation;
   unifDimensions: WebGLUniformLocation;
 
+  unifRows: WebGLUniformLocation;
+  unifTriScale: WebGLUniformLocation;
+  unifLowTriRange: WebGLUniformLocation;
+  unifHighTriRange: WebGLUniformLocation;
+  unifHightT: WebGLUniformLocation;
+  unifSymbolScaleT: WebGLUniformLocation;
+  unifSymbolPositionT: WebGLUniformLocation;
 
   constructor(shaders: Array<Shader>) {
     this.prog = gl.createProgram();
@@ -111,6 +118,14 @@ class ShaderProgram {
     this.unifUp   = gl.getUniformLocation(this.prog, "u_Up");
     this.unifDimensions   = gl.getUniformLocation(this.prog, "u_Dimensions");
 
+    this.unifRows  = gl.getUniformLocation(this.prog, "u_Rows");
+    this.unifTriScale = gl.getUniformLocation(this.prog, "u_TriScale");
+    this.unifLowTriRange = gl.getUniformLocation(this.prog, "u_LowTriRange");
+    this.unifHighTriRange = gl.getUniformLocation(this.prog, "u_HighTriRange");
+    this.unifHightT = gl.getUniformLocation(this.prog, "u_HeightT");
+    this.unifSymbolScaleT = gl.getUniformLocation(this.prog, "u_SymbolScaleT");
+    this.unifSymbolPositionT = gl.getUniformLocation(this.prog, "u_SymbolPositionT");
+
 
 
 
@@ -131,6 +146,14 @@ class ShaderProgram {
 
   }
 
+  setRows(t: number){this.use();gl.uniform1f(this.unifRows, t)}
+  setTriScale(t: number){this.use();gl.uniform1f(this.unifTriScale, t)}
+  setLowTriRange(t: number){this.use();gl.uniform1f(this.unifLowTriRange, t)}
+  setHighTriRange(t: number){this.use();gl.uniform1f(this.unifHighTriRange, t)}
+  setHightT(t: number){this.use();gl.uniform1f(this.unifHightT, t)}
+  setSymbolScaleT(t: number){this.use();gl.uniform1f(this.unifSymbolScaleT, t)}
+  setSymbolPositionT(t: number){this.use();gl.uniform1f(this.unifSymbolPositionT, t)}
+
   use() {
     if (activeProgram !== this.prog) {
       gl.useProgram(this.prog);

src/shaders/sdf-objects.glsl

@@ -260,7 +260,8 @@ float pyramidNormalSDF(vec3 p, float h, float depth, float depth_scale, float nu
                 prisim_transform = transform(prisim_transform, vec3(0, PI/2.0, 0), vec3(_x, _y, _z)); // translate to the position on the face and rotate so prism "points outward"
                 vec3 shape_transform = transform(prisim_transform, vec3(-slant+PI/2.0, 0.0, 0), vec3(0,0,0));
 
-                float noiseHeight = depth*(-1.0 + 2.0 * random3d(vec3(_x+j, _y+i, _z+g_rot)));
+                // low = -1.0  high = 2.0
+                float noiseHeight = depth*(u_LowTriRange + (u_HighTriRange - u_LowTriRange) * random3d(vec3(_x+j, _y+i, _z+g_rot)));
                 float noiseTransform = depth_scale*noiseHeight;
                 float zshift = noiseTransform;
                 prisim_transform = transform(prisim_transform, vec3(-slant, 0, PI*mod(j,2.0)), vec3(0, 0, 0));
@@ -271,7 +272,7 @@ float pyramidNormalSDF(vec3 p, float h, float depth, float depth_scale, float nu
                 float prisim = triprism(prisim_transform, greeble_width, greeble_height, abs(noiseTransform));
 
                 float scale = 0.02 + 0.04 * random(vec2(_x+i, _z+g_rot));
-                shape_transform = transform(shape_transform, vec3(0, 0, 0), vec3(-0.01+0.02*random(vec2(_x+i+_y, _z+g_rot)), -0.01+0.02*random(vec2(_x+i, _z+g_rot)), abs(noiseTransform)), vec3(1.0 * scale, 1000.0 * scale, 1.0 * scale));
+                shape_transform = transform(shape_transform, vec3(0, 0, 0), vec3(-0.01+0.02*random(vec2(_x+i+_y, _z+g_rot)), -0.01+0.02*random(vec2(_x+i, _z+g_rot)), 0.0), vec3(1.0 * scale, 1000.0 * scale, 1.0 * scale));
                 prisim = flatSubtraction(prisim, randomSymbol(shape_transform, random(vec2(_x+j+i, _z+g_rot))));
 
                 if(noiseHeight > 0.0){

src/shaders/sdf1-frag.glsl

@@ -120,8 +120,8 @@ float sceneSDF(vec3 queryPos)
   final = pyramidNormalSDF(main_t,  0.5,
                            u_NoiseHeight,
                            0.5,
-                           5.0,
-                           1.0);
+                           u_Rows,
+                           u_TriScale);
 
   //final = symbol3SDF(queryPos);
 

src/shaders/toolbox.glsl

@@ -1,5 +1,15 @@
 const float PI=3.14159265;
 uniform float u_Time;
+uniform float u_Rows;
+uniform float u_TriScale;
+uniform float u_LowTriRange;
+uniform float u_HighTriRange;
+uniform float u_HeightT;
+uniform float u_SymbolScaleT;
+uniform float u_SymbolPositionT;
+
+
+
 float bias(float t, float b) {
     return (t / ((((1.0/b) - 2.0)*(1.0 - t))+1.0));
 }