<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>     

body {margin:0px; padding:0px; overflow: hidden}

let program;
let cnt = 0;

function setup() {
  pixelDensity(1);
  const canvas = createCanvas(windowWidth, windowHeight,WEBGL);
  rectMode(CENTER);
  noStroke();
  fill(1);
  program = createShader(vert,frag);
}

function draw() {
  const ang = (cnt ++) / 180 * PI;
  const lightPos = [cos(ang), 0, sin(ang)];
  
  shader(program);
  background(0);
  program.setUniform('res',[width,height]);
  program.setUniform('lightPos', lightPos);
  program.setUniform('roughness', 0);
  rect(0,0,width,height);
}

const vert=`
#ifdef GL_ES
precision highp float;
precision highp int;
#endif

#extension GL_OES_standard_derivatives : enable
attribute vec3 aPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat3 uNormalMatrix;
void main() {
  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
}`;




const frag=`
#ifdef GL_ES
precision highp float;
#endif

// https://learnopengl.com/PBR/Theory

#define PI 3.14159265358979323846

uniform vec2 res;
uniform vec3 lightPos;
uniform float roughness;
uniform float metallic;

vec3 env(vec3 dir) {
  vec3 crd = vec3(0.5) + normalize(dir) * 0.5;
  vec3 sky = vec3(0.5, 0.7, 1.0);
  vec3 sky2 = vec3(0.7, 0.3, 0.0);
  vec3 water = vec3(0.1, 0.3, 0.4);
  vec3 color = mix(water, sky2,
    smoothstep(0.4, 0.5, crd.y));
  color = mix(color, sky,
    smoothstep(0.3, 0.9, crd.y));
  float th = 0.1;
  color.rgb += (smoothstep(0.0, th, abs(dir.y)) - 1.0) * 0.2;
  
  float l = pow(max(0.0, dot(dir, lightPos)), 24.0);
  color += vec3(1.0, 0.8, 0.6) * l;
  color = pow(color.rgb, vec3(2.2));
  return clamp(color, vec3(0.0), vec3(1.0));
}

vec3 env2(vec3 dir) {
  vec3 color = vec3(0.0);
  float l = pow(max(0.0, dot(dir, lightPos)), 128.0);
  color += vec3(1.0) * l * 16.0;
  color = pow(color.rgb, vec3(2.2));
  return clamp(color, vec3(0.0), vec3(1.0));
}

float GeometrySchlickGGX(float NdotV, float roughness) {
    float a = roughness;
    float k = (a * a) / 2.0;

    float nom   = NdotV;
    float denom = NdotV * (1.0 - k) + k;

    return nom / denom;
}

float GeometrySmith(vec3 N, vec3 V, vec3 L, float roughness)
{
    float NdotV = max(dot(N, V), 0.0);
    float NdotL = max(dot(N, L), 0.0);
    float ggx2 = GeometrySchlickGGX(NdotV, roughness);
    float ggx1 = GeometrySchlickGGX(NdotL, roughness);

    return ggx1 * ggx2;
}

float VanDerCorput(int n, int base)
{
    float invBase = 1.0 / float(base);
    float denom   = 1.0;
    float result  = 0.0;

    for(int i = 0; i < 32; ++i)
    {
        if(n > 0)
        {
            denom   = mod(float(n), 2.0);
            result += denom * invBase;
            invBase = invBase / 2.0;
            n       = int(float(n) / 2.0);
        }
    }

    return result;
}


vec2 Hammersley(int i, int N) {
    return vec2(float(i) / float(N), VanDerCorput(i, 2));
}  

vec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness)
{
    float a = roughness*roughness;
  
    float phi = 2.0 * PI * Xi.x;
    float cosTheta = sqrt((1.0 - Xi.y) / (1.0 + (a*a - 1.0) * Xi.y));
    float sinTheta = sqrt(1.0 - cosTheta*cosTheta);
  
    // from spherical coordinates to cartesian coordinates
    vec3 H;
    H.x = cos(phi) * sinTheta;
    H.y = sin(phi) * sinTheta;
    H.z = cosTheta;
  
    // from tangent-space vector to world-space sample vector
    vec3 up        = abs(N.z) < 0.999 ? vec3(0.0, 0.0, 1.0) : vec3(1.0, 0.0, 0.0);
    vec3 tangent   = normalize(cross(up, N));
    vec3 bitangent = cross(N, tangent);
  
    vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z;
    return normalize(sampleVec);
}  

vec3 reflectionConv(vec3 V, vec3 N) {
  float totalWeight = 0.0;   
  vec3 conv = vec3(0.0);    
  const int SAMPLE_COUNT = 128;
  for(int i = 0; i < SAMPLE_COUNT; ++i)
  {
    vec2 Xi = Hammersley(i, SAMPLE_COUNT);
    vec3 H  = ImportanceSampleGGX(Xi, N, roughness);
    vec3 L  = normalize(2.0 * dot(V, H) * H - V);

    float NdotL = max(dot(N, L), 0.0);
    if(NdotL > 0.0)
    {
        if (gl_FragCoord.x / res.x > 0.5) {
          conv += env(L) * NdotL;
        } else {
          conv += env2(L) * NdotL;
        }
        totalWeight      += NdotL;
    }
  }
  conv = conv / totalWeight;
  return conv;    
}

vec2 IntegrateBRDF(float NdotV, float roughness)
{
    vec3 V;
    V.x = sqrt(1.0 - NdotV*NdotV);
    V.y = 0.0;
    V.z = NdotV;

    float A = 0.0;
    float B = 0.0;

    vec3 N = vec3(0.0, 0.0, 1.0);

    const int SAMPLE_COUNT = 64;
    for(int i = 0; i < SAMPLE_COUNT; ++i)
    {
        vec2 Xi = Hammersley(i, SAMPLE_COUNT);
        vec3 H  = ImportanceSampleGGX(Xi, N, roughness);
        vec3 L  = normalize(2.0 * dot(V, H) * H - V);

        float NdotL = max(L.z, 0.0);
        float NdotH = max(H.z, 0.0);
        float VdotH = max(dot(V, H), 0.0);

        if(NdotL > 0.0)
        {
            float G = GeometrySmith(N, V, L, roughness);
            float G_Vis = (G * VdotH) / (NdotH * NdotV);
            float Fc = pow(1.0 - VdotH, 5.0);
            /*
            A += (1.0 - Fc) * G_Vis;
            B += Fc * G_Vis;
            */
            
            //A += G;
            B += Fc;
        }
    }
    A /= float(SAMPLE_COUNT);
    B /= float(SAMPLE_COUNT);
    return vec2(A, B);
}

vec3 fresnelSchlick(float cosTheta, vec3 F0) {
    return F0 + (1.0 - F0) * pow(1.0 - cosTheta, 5.0);
}

vec3 fresnelSchlickRoughness(float cosTheta, vec3 F0, float roughness) {
    return F0 + (max(vec3(1.0 - roughness), F0) - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
}   


float DistributionGGX(vec3 N, vec3 H, float a)
{
    float a2     = a*a;
    float NdotH  = max(dot(N, H), 0.0);
    float NdotH2 = NdotH*NdotH;
  
    float nom    = a2;
    float denom  = (NdotH2 * (a2 - 1.0) + 1.0);
    denom        = PI * denom * denom;
  
    return nom / denom;
}

vec4 shade(vec3 V, vec3 P, vec3 N) {
  vec3 goldBaseColor = vec3(1.00);
  vec3 baseColor = goldBaseColor;
  vec3 F0 = baseColor;
  
  vec3 F = fresnelSchlickRoughness(max(dot(N, V), 0.0), F0, roughness);
  vec3 reflectionConvColor = reflectionConv(V, N);
  vec2 envBRDF = IntegrateBRDF(dot(V, N), roughness);
  vec3 specular = reflectionConvColor * (F * envBRDF.x + envBRDF.y);
  
  vec4 color = vec4(specular, 1.0);
  return color;
}

float SDF(vec3 p) {
    float radius = 0.25;
    return length(p)-radius;
}

vec3 normal(vec3 P) {
  vec2 h = vec2(0.001, 0.0);
  return normalize(vec3(SDF(P + h.xyy) - SDF(P - h.xyy),
                        SDF(P + h.yxy) - SDF(P - h.yxy),
                        SDF(P + h.yyx) - SDF(P - h.yyx)));
}

float rayHitDist(vec3 eye, vec3 rayDir) {
    float dist = 0.0;
    float threshold = 0.005;
    for(int i = 0 ; i < 16 ; ++i) {
        float d = SDF(eye + rayDir * dist);
        if(d < threshold) { return dist; }
        dist += d;
    }
    return -1.0;
}

void main(void)
{
  vec2 crd = (gl_FragCoord.xy - res * 0.5) / min(res.x, res.y);
  
  vec3 eye = vec3(0.0, 0.0, -2.5);
  vec3 V = normalize(eye - vec3(crd, 0.0));
    
  float dist = rayHitDist(eye, -V);
  
  vec4 color = vec4(env(-V), 1.0);
  if (crd.x < 0.0) {
    color = vec4(env2(-V), 1.0);
  }
  if (dist >= 0.0) {
      vec3 P = eye - V * dist;
      vec3 N = normal(P);
      color = mix(color, shade(V, P, N), smoothstep(0.0, 0.1, dot(V, N)));
  }
  color.rgb = pow(color.rgb, vec3(1.0/2.2));
  gl_FragColor = color;
}`;