<canvas id="webgl" width="500" height="1758"></canvas>

<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_position;
  
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
 precision highp float;
  precision highp int;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  
  // movement variables
  vec3 movement = vec3(.0);
  
  uniform int u_maxIterations;
  uniform float u_stopThreshold;
  uniform float u_stepScale;
  uniform float u_eps;
  uniform int u_octaves;
  uniform vec3 u_clipBGColour;
  uniform vec3 u_blobColour;
  uniform vec3 u_light_position;
  uniform vec3 u_lightColour;
  uniform float u_lightStrength;
  uniform float u_sceneWeight;
  uniform float u_internalStep;
  
  const int maxIterations = 1024;
  
  const vec3 light1_position = vec3(0, 1., -1.);
  const vec3 light1_colour = vec3(.5, .8, 1.85);
  
  const int octaves = 3;
  const int max_octaves = 16;
  
  struct Surface {
    int object_id;
    float distance;
    vec3 position;
    vec3 colour;
    float ambient;
    float spec;
  };
  
  float bumps(in vec3 p, float phase, float size, vec3 frequency) {
    return size * sin(p.x * frequency.x + phase) * cos(p.y * frequency.y + phase) * cos(p.z * frequency.z + phase);
  }
  
  float fractalBumps(in vec3 p, float phase, float size, vec3 frequency, float multiplier) {
    // const float octaves = 2.;
    float _bumps = 0.;
    for(int i = 1; i < max_octaves; i++) {
      if(i > u_octaves) break;
      float f = float(i);
      _bumps += bumps(p, phase + f * 10., size * multiplier * 1./f, frequency * f);
    }
    
    return _bumps;
  }
  
  // This function describes the world in distances from any given 3 dimensional point in space
  float world(in vec3 position, inout int object_id) {
    vec3 pos = floor(position * .5);
    object_id = int(floor(pos.x + pos.y + pos.z));
    // position = mod(position, 1.) - .5;
    float gradient = max(0., (position.y + .3));
    float bumps = fractalBumps(position, u_time * 2., .5 * gradient, vec3(10. + sin(u_time) * 5.), 2.8);
    
    float world = length(position) - .4 + bumps * .15;
    
    // world = max(world, -position.y);
    
    return world;
  }
  float world(in vec3 position) {
    int dummy = 0;
    return world(position, dummy);
  }
  
  vec3 getNormal(vec3 p, float eps) {
    vec3 n;
    n.y = world(p);    
    n.x = world(vec3(p.x+eps,p.y,p.z)) - n.y;
    n.z = world(vec3(p.x,p.y,p.z+eps)) - n.y;
    n.y = eps;
    return normalize(n);
  }
  
  Surface getSurface(int object_id, float rayDepth, vec3 sp) {
    return Surface(
      object_id, 
      rayDepth, 
      sp, 
      vec3(1.), 
      .5, 
      200.);
  }
  
  // The raymarch loop
  Surface rayMarch(vec3 ro, vec3 rd, float start, float end, inout vec3 col) {
    float sceneDist = 1e4;
    float rayDepth = start;
    int object_id = 0;
    
    // Light position
    vec3 lp = ro + vec3(2, 2, -5.);
    
    bool hit = false;
    
    float energy = u_lightStrength*2.;
    bool inside = false;
    
    for(int i = 0; i < maxIterations; i++) {
      if(i > u_maxIterations) break;
      if(energy <= 0.) break;
      vec3 r = ro + rd * rayDepth;
      sceneDist = world(r, object_id);
      
      // if(inside == true && sceneDist > 0.) {
      //   rayDepth -= sceneDist;
      //   rayDepth += .01;
      //   sceneDist = world(r, object_id);
      // }
      
      vec3 normal = normalize(r);
      vec3 ld = lp - r;
      float len = length( ld );
      ld = normalize(ld);
      float lightAtten = min( 1.0 / ( 0.15*len ), 1.0 );
      float diffuse = max(0., dot(normal, ld))+.2;
      
      float weighting = length(r);
      
      energy -= .1;
     
      col += clamp((1./abs(sceneDist)*u_sceneWeight)*weighting*(diffuse*.0005*u_blobColour)*(u_lightColour*energy*lightAtten), 0.0, 1.);
      
      if(sceneDist < u_stopThreshold) {
        // if(inside == false) {
          // vec3 n = getNormal(r, .01);
          // rd = normalize(refract(rd, n, 1.01));
        // }
        inside = true;
        // vec3 r = ro + (rd+u_internalStep) * rayDepth;
        // sceneDist = world(r, object_id);
        // if(sceneDist>0.) {
        //   rayDepth += u_internalStep*.1;
        // } else {
          rayDepth += u_internalStep;
        // }
      } else {
        inside = false;
        rayDepth += sceneDist * u_stepScale;
      }
      
      if(rayDepth > end) {
        break;
      }
    }
    
    col = sqrt(col);
    
    return getSurface(object_id, rayDepth, ro + rd * rayDepth);
  }

  void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    // Camera and look-at
    vec3 cam = vec3(cos(u_mouse.x * 5.)*3.,u_mouse.y * 3.,sin(u_mouse.x * 5.)*3.);
    vec3 lookAt = vec3(0,0,0);
    
    // Unit vectors
    vec3 forward = normalize(lookAt - cam);
    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
    vec3 up = normalize(cross(forward, right));
    
    // FOV
    float FOV = .4;
    
    // Ray origin and ray direction
    vec3 ro = cam;
    vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);
    
    // Ray marching
    const float clipNear = 0.;
    const float clipFar = 32.;
    vec3 col = u_clipBGColour;
    Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, col);
    
    gl_FragColor = vec4(col, 1.);
  }
  
</script>

body {
  margin:0;
  background: #666;
}

canvas {
  mix-blend-mode: lighten;
  position: fixed;
}

import * as dat from 'https://cdn.skypack.dev/dat.gui';
console.clear();

const twodWebGL = new WTCGL(
  document.querySelector('canvas#webgl'), 
  document.querySelector('script#vertexShader').textContent, 
  document.querySelector('script#fragmentShader').textContent,
  window.innerWidth,
  window.innerHeight,
  window.devicePixelRatio
);

console.log(twodWebGL)

window.addEventListener('resize', () => {
  twodWebGL.resize(window.innerWidth, window.innerHeight);
});



// track mouse move
let mousepos = [0,0];
const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
window.addEventListener('pointermove', (e) => {
  let ratio = window.innerHeight / window.innerWidth;
  if(window.innerHeight > window.innerWidth) {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
  } else {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
  }
  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
});

const uniforms = {
  octaves: {
    v: 3,
    max: 12,
    min: 0,
    type: WTCGL.TYPE_INT },
  sceneWeight: {
    v: 1,
    max: 10,
    min: .01,
    type: WTCGL.TYPE_FLOAT },
  maxIterations: {
    v: 256,
    max: 512,
    min: 2,
    type: WTCGL.TYPE_INT },
  internalStep: {
    v: .003,
    max: 1,
    min: 0.0001,
    type: WTCGL.TYPE_FLOAT },
  stopThreshold: {
    v: .01,
    max: .1,
    min: .0001,
    type: WTCGL.TYPE_FLOAT },
  stepScale: {
    v: .8,
    max: 2.,
    min: .1,
    type: WTCGL.TYPE_FLOAT },
  clipBGColour: {
    v: '#000000',
    type: 'COLOUR' },
  blobColour: {
    v: '#FFFFFF',
    type: 'COLOUR' },
  lightColour: {
    v: '#3F66FF',
    type: 'COLOUR' },
  lightStrength: {
    v: 2,
    min: .1,
    max: 5,
    type: WTCGL.TYPE_FLOAT }
  
}

const hexToGL = (hex) => {
  const components = /^#?([A-F0-9]{2})([A-F0-9]{2})([A-F0-9]{2})/i.exec(hex);
  if(components && components.length === 4) {
    const r = Math.round(`0x${components[1]}` / 255 * 1000) / 1000;
    const g = Math.round(`0x${components[2]}` / 255 * 1000) / 1000;
    const b = Math.round(`0x${components[3]}` / 255 * 1000) / 1000;
    return [r,g,b]
  } else {
    return [];
  }
}
const updateUniform = (e, n) => {
  const prop = uniforms[e];
  if(prop.type === 'COLOUR') {
    const c = hexToGL(n);
    twodWebGL.addUniform(e, WTCGL.TYPE_V3, c);
  } else {
    twodWebGL.addUniform(e, prop.type, n);
  }
}

// const updateUniform(name, value) => {
  
// }

// const gui = new dat.GUI();
Object.entries(uniforms).forEach((u, v) => {
  console.log(u);
  const prop = uniforms[u[0]];
  if(prop.type === 'COLOUR') {
    const c = hexToGL(prop.v);
    console.log(c)
    twodWebGL.addUniform(u[0], WTCGL.TYPE_V3, c);
  } else {
    twodWebGL.addUniform(u[0], prop.type, prop.v);
  }
  if(prop.type === 'COLOUR') {
    // gui.addColor(prop, 'v').name(u[0]).onChange((v) => { updateUniform(u[0], v) });
  } else {
    // gui.add(prop, 'v', prop.min, prop.max).name(u[0]).onChange((v) => { updateUniform(u[0], v) });
  }
});










// Load all our textures. We only initiate the instance once all images are loaded.
const textures = [
  {
    name: 'noise',
    url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
    type: WTCGL.IMAGETYPE_TILE,
    img: null
  }
];
const loadImage = function (imageObject) {
  let img = document.createElement('img');
  img.crossOrigin="anonymous";
  
  return new Promise((resolve, reject) => {
    img.addEventListener('load', (e) => {
      imageObject.img = img;
      resolve(imageObject);
    });
    img.addEventListener('error', (e) => {
      reject(e);
    });
    img.src = imageObject.url
  });
}
const loadTextures = function(textures) {
  return new Promise((resolve, reject) => {
    const loadTexture = (pointer) => {
      if(pointer >= textures.length || pointer > 10) {
        resolve(textures);
        return;
      };
      const imageObject = textures[pointer];

      const p = loadImage(imageObject);
      p.then(
        (result) => {
          twodWebGL.addTexture(result.name, result.type, result.img);
        },
        (error) => {
          console.log('error', error)
        }).finally((e) => {
          loadTexture(pointer+1);
      });
    }
    loadTexture(0);
  });
  
}

loadTextures(textures).then(
  (result) => {
    twodWebGL.initTextures();
    // twodWebGL.render();
    twodWebGL.running = true;
  },
  (error) => {
    console.log('error');
  }
);