Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                body
  width: 100%
  height: 100%
  background: #333
  font-family: arial
  color: #999
  margin: 0
  padding: 0
  overflow: hidden
              
            
!

JS

              
                /*

 start of fragment shader playground in THREEjs 
 work with https://www.shadertoy.com/ and http://glslsandbox.com/ 
 fragments shader ... isint finished at moment. 
 
 ES6
 
*/

Object.defineProperty( window,'log',{ set: p => console.log(p) ,  get: ()=>'log = ...'} )

  var camera, scene, renderer
  var uniforms, material, mesh

  const VERTEXSHADER_2D = 'void main(){ gl_Position = vec4( position, 1.0 ); }'

window.onload = function()
{
    console.clear()    
    new ThreeShader(  )    
}

class ThreeShader
{
  
  constructor( holder )
  {

    holder = holder || document.body
    scene = new THREE.Scene()
    renderer = new THREE.WebGLRenderer()
    camera = new THREE.Camera()
    holder.appendChild( renderer.domElement )  
    
    this.start = +new Date()         
    this.shaderSetup()

  }
  
  shaderSetup()  
  { 
    
    const VEC2 = 'v2'
    const FLOAT = 'f'

    // 
    uniforms = {
      iGlobalTime: { type: FLOAT , value: 1.0 },
      time: { type: FLOAT , value: 1.0 },
      iResolution: { type: VEC2 , value: new THREE.Vector2() },
      resolution: { type: VEC2 , value: new THREE.Vector2() },
      iMouse: { type: VEC2 , value: new THREE.Vector2() },
      mouse: { type: VEC2 , value: new THREE.Vector2() }
    }

    // this.geometry = new THREE.PlaneBufferGeometry( 1,1 )

    material = new THREE.ShaderMaterial({

      uniforms: uniforms, 
      // attributes: { vertexOpacity: { value: [] } },
      vertexShader: VERTEXSHADER_2D ,
      fragmentShader: this.galaxy

    })  

    mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry ( 2 , 2 ) , material )

    scene.add( mesh )

    window.addEventListener( 'resize' , this.onResize.bind(this) , false )
    this.onResize()
    this.onRender()    

  }  
  
onRender()
{  
  const SPEED = .1
  requestAnimationFrame( this.onRender.bind( this ) )
  uniforms.time.value = uniforms.iGlobalTime.value = ( new Date() - this.start )  * 0.001 * SPEED   
  renderer.render( scene , camera )
} 
  
onResize()  
{
  let width = window.innerWidth
  let height = window.innerHeight    

  uniforms.resolution.value.x = uniforms.iResolution.value.x = width
  uniforms.resolution.value.y = uniforms.iResolution.value.y = height    

  renderer.setSize( width , height )  
 
}  

shaderToyFragment( fragment ){

  return `
    
    uniform float iGlobalTime;
    uniform vec2 iResolution;  
    uniform vec2 iMouse;  

    ${fragment}

    void main(void) {
        //uv is between 0 and 1
        vec2 uv = gl_FragCoord.xy / iResolution.xy;
        vec2 delta = 1.0 / iResolution.xy;
        mainImage(gl_FragColor,gl_FragCoord.xy);
    }

  `

}

get minFragment()
{ 
  return `
uniform float iGlobalTime;
uniform vec2 iResolution;  

void main() {
  float x = mod(iGlobalTime + gl_FragCoord.x, 20.) < 10. ? 1. : 0.;
  float y = mod(iGlobalTime + gl_FragCoord.y, 20.) < 10. ? 1. : 0.;
  gl_FragColor = vec4(vec3(min(x, y)), 1.);
}

`}
  
  get vertexShader()
  { 
    let vertex = `
      uniform float iGlobalTime;
      uniform vec2 iResolution;      

      void main() {
          gl_Position = vec4( position, 1.0 );
        }

    `
    return vertex
  }
  
  get simpleFshader()
  {
    let fragment = `
      uniform float iGlobalTime;
      uniform vec2 iResolution;      

      float field(in vec3 p) {
        float strength = 7. + .03 * log(1.e-6 + fract(sin(iGlobalTime) * 4373.11));
        float accum = 0.;
        float prev = 0.;
        float tw = 0.;
        for (int i = 0; i < 32; ++i) {
          float mag = dot(p, p);
          p = abs(p) / mag + vec3(-.5, -.4, -1.5);
          float w = exp(-float(i) / 7.);
          accum += w * exp(-strength * pow(abs(mag - prev), 2.3));
          tw += w;
          prev = mag;
        }
        return max(0., 5. * accum / tw - .7);
      }

      void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
        vec2 uv = 2. * fragCoord.xy / iResolution.xy - 1.;
        vec2 uvs = uv * iResolution.xy / max(iResolution.x, iResolution.y);
        vec3 p = vec3(uvs / 4., 0) + vec3(1., -1.3, 0.);
        p += .2 * vec3(sin(iGlobalTime / 16.), sin(iGlobalTime / 12.),  sin(iGlobalTime / 128.));
        float t = field(p);
        float v = (1. - exp((abs(uv.x) - 1.) * 6.)) * (1. - exp((abs(uv.y) - 1.) * 6.));
        fragColor = mix(.4, 1., v) * vec4(1.8 * t * t * t, 1.4 * t * t, t, 1.0);
      }


      void main(void) {
          //uv is between 0 and 1
          vec2 uv = gl_FragCoord.xy / iResolution.xy;
          vec2 delta = 1.0 / iResolution.xy;

          // gl_FragColor = vec4(sin(iGlobalTime), uv.x, uv.y ,1.0);

          mainImage(gl_FragColor,gl_FragCoord.xy);
      }


    `
    return fragment 
  }

  get galaxyCloud()
  { 
    let fragment =  `
    
    //CBS
    //Parallax scrolling fractal galaxy.
    //Inspired by JoshP's Simplicity shader: https://www.shadertoy.com/view/lslGWr

    // http://www.fractalforums.com/new-theories-and-research/very-simple-formula-for-fractal-patterns/

    float field(in vec3 p,float s) {
      float strength = 7. + .03 * log(1.e-6 + fract(sin(iGlobalTime) * 4373.11));
      float accum = s/4.;
      float prev = 0.;
      float tw = 0.;
      for (int i = 0; i < 26; ++i) {
        float mag = dot(p, p);
        p = abs(p) / mag + vec3(-.5, -.4, -1.5);
        float w = exp(-float(i) / 7.);
        accum += w * exp(-strength * pow(abs(mag - prev), 2.2));
        tw += w;
        prev = mag;
      }
      return max(0., 5. * accum / tw - .7);
    }

    // Less iterations for second layer
    float field2(in vec3 p, float s) {
    float strength = 5. + .03 * log(1.e-6 + fract(sin(iGlobalTime) * 4373.11));
        //float strength = 7. + .03 * log(1.e-6 + fract(sin(iGlobalTime) * 4373.11));
      float accum = s/4.;
      float prev = 0.;
      float tw = 0.;
      for (int i = 0; i < 18; ++i) {
        float mag = dot(p, p);
        p = abs(p) / mag + vec3(-.5, -.4, -1.5);
        float w = exp(-float(i) / 7.);
        accum += w * exp(-strength * pow(abs(mag - prev), 2.2));
        tw += w;
        prev = mag;
      }
      return max(0., 5. * accum / tw - .7);
    }

    vec3 nrand3( vec2 co )
    {
      vec3 a = fract( cos( co.x*8.3e-3 + co.y )*vec3(1.3e5, 4.7e5, 2.9e5) );
      vec3 b = fract( sin( co.x*0.3e-3 + co.y )*vec3(8.1e5, 1.0e5, 0.1e5) );
      vec3 c = mix(a, b, 0.5);
      return c;
    }


    void mainImage( out vec4 fragColor, in vec2 fragCoord ) {  
        vec2 uv = 2. * fragCoord.xy / iResolution.xy - 1.;
      vec2 uvs = uv * iResolution.xy / max(iResolution.x, iResolution.y);
      vec3 p = vec3(uvs / 4., 0) + vec3(1., -1.3, 0.);
      p += .2 * vec3(sin(iGlobalTime / 16.), sin(iGlobalTime / 12.),  sin(iGlobalTime / 128.));

      float freqs[4];//=float[4](0.2,0.5,0.1,0.7);	
      freqs[0]=0.2;
      freqs[1]=0.5;
      freqs[2]=0.1;
      freqs[3]=0.7;

      //Sound
      /*
      freqs[0] = texture2D( iChannel0, vec2( 0.01, 0.25 ) ).x;
      freqs[1] = texture2D( iChannel0, vec2( 0.07, 0.25 ) ).x;
      freqs[2] = texture2D( iChannel0, vec2( 0.15, 0.25 ) ).x;
      freqs[3] = texture2D( iChannel0, vec2( 0.30, 0.25 ) ).x;
    */

      float t = field(p,freqs[2]);
      float v = (1. - exp((abs(uv.x) - 1.) * 6.)) * (1. - exp((abs(uv.y) - 1.) * 6.));

        //Second Layer
      vec3 p2 = vec3(uvs / (4.+sin(iGlobalTime*0.11)*0.2+0.2+sin(iGlobalTime*0.15)*0.3+0.4), 1.5) + vec3(2., -1.3, -1.);
      p2 += 0.25 * vec3(sin(iGlobalTime / 16.), sin(iGlobalTime / 12.),  sin(iGlobalTime / 128.));
      float t2 = field2(p2,freqs[3]);
      vec4 c2 = mix(.4, 1., v) * vec4(1.3 * t2 * t2 * t2 ,1.8  * t2 * t2 , t2* freqs[0], t2);


      //Let's add some stars
      //Thanks to http://glsl.heroku.com/e#6904.0
      vec2 seed = p.xy * 2.0;	
      seed = floor(seed * iResolution.x);
      vec3 rnd = nrand3( seed );
      vec4 starcolor = vec4(pow(rnd.y,40.0));

      //Second Layer
      vec2 seed2 = p2.xy * 2.0;
      seed2 = floor(seed2 * iResolution.x);
      vec3 rnd2 = nrand3( seed2 );
      starcolor += vec4(pow(rnd2.y,40.0));

      fragColor = mix(freqs[3]-.3, 1., v) * vec4(1.5*freqs[2] * t * t* t , 1.2*freqs[1] * t * t, freqs[3]*t, 1.0)+c2+starcolor;

    }

  `   
    return this.shaderToyFragment( fragment  ) 
  }

  get another()
  {
    var fragment = `

      void mainImage( out vec4 fragColor, in vec2 fragCoord )
      {
        vec2 uv = fragCoord.xy / iResolution.xy;
        fragColor = vec4(uv,0.5+0.5*sin(iGlobalTime),1.0);
      }

    `; return this.shaderToyFragment( fragment )

  }

  get ibilinear()
  {
    var fragment = `

      // https://www.shadertoy.com/view/MscXDS

      // Created by inigo quilez - iq/2014
      // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

      // Inverse bilienar interpolation: given four points defining a quadrilateral, compute the
      // uv coordinates of any point in the plane that would give result to that point as a 
      // bilinear interpolation of the four points.
      //
      // The problem resolves through a quadratic equation. More information in this article:
      //
      // http://www.iquilezles.org/www/articles/ibilinear/ibilinear.htm

      vec2 sincos( const in float x )
      {
        return vec2(sin(x), cos(x));
      }
      vec3 rotatez( const in vec3 vPos, const in vec2 vSinCos )
      {
        return vec3( vSinCos.y * vPos.x + vSinCos.x * vPos.y, -vSinCos.x * vPos.x + vSinCos.y * vPos.y, vPos.z);
      }
            
      vec3 rotatez( const in vec3 vPos, const in float fAngle )
      {
        return rotatez( vPos, sincos(fAngle) );
      }
      vec2 rotatez( const in vec2 vPos, const in float fAngle )
      {
        return rotatez( vec3(vPos, 0.0), sincos(fAngle) ).xy;
      }
      mat4 rotatez( const in mat4 vPos, const in float fAngle )
      {
        return mat4(rotatez( vec3(vPos[0].xy, 0.0), sincos(fAngle) ).xy, 0.0, 0.0,
                      rotatez( vec3(vPos[1].xy, 0.0), sincos(fAngle) ).xy, 0.0, 0.0,
                      rotatez( vec3(vPos[2].xy, 0.0), sincos(fAngle) ).xy, 0.0, 0.0,
                      rotatez( vec3(vPos[3].xy, 0.0), sincos(fAngle) ).xy, 0.0, 0.0);
      }

      float cross( in vec2 a, in vec2 b ) { return a.x*b.y - a.y*b.x; }


      #define PI 3.14159265359
      #define E 2.7182818284
      #define GR 1.61803398875
      #define EPS (.01*(1.0+saw(time)))

      #define time (float(__LINE__)+iGlobalTime/PI)

      float saw(float x)
      {
          return acos(cos(x))/3.14;
      }
      vec2 saw(vec2 x)
      {
          return acos(cos(x))/3.14;
      }
      vec3 saw(vec3 x)
      {
          return acos(cos(x))/3.14;
      }
      vec4 saw(vec4 x)
      {
          return acos(cos(x))/3.14;
      }
      vec3 phase(float map)
      {
          return vec3(saw(map),
                      saw(4.0*PI/3.0+map),
                      saw(2.0*PI/3.0+map));
      }

      //a is up
      //b is center
      //d is right
      vec3 invBilinear( in vec3 p, in vec3 a, in vec3 b, in vec3 c)
      {
          vec3 duv = p-b;
          
          vec3 xdir = c-b;
          vec3 ydir = a-b;
          
          
          float theta = PI/2.0;//time;
          
          xdir = rotatez(xdir, theta);
          ydir = rotatez(ydir, theta);
          
          float w = length(cross(xdir, ydir));
          
          return vec3(dot(duv, xdir), dot(duv, ydir), w);
      }

      float sdSegment( in vec2 p, in vec2 a, in vec2 b )
      {
        vec2 pa = p - a;
        vec2 ba = b - a;
        float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
        return length( pa - ba*h );
      }

      vec3  hash3( float n ) { return fract(sin(vec3(n,n+1.0,n+2.0))*43758.5453123); }

      void mainImage( out vec4 fragColor, in vec2 fragCoord )
      {
        vec3 p = vec3((-iResolution.xy + 2.0*fragCoord.xy)/iResolution.y, 0.0);
          
          // background
          vec3 col = vec3( 0.35 + 0.1*p.y );

          vec2 r = (.5*cos(1.06*iGlobalTime))*vec2(cos(iGlobalTime), sin(iGlobalTime));
          float s = .5;
          
          // move points
          vec3 a = vec3(r+s*cos( 1.11*iGlobalTime + vec2(0.1,4.0) ), 0.0);
          vec3 b = vec3(r+s*cos( 1.12*iGlobalTime + vec2(1.0,3.0) ), 0.0);
          vec3 c = vec3(r+s*cos( 1.13*iGlobalTime + vec2(2.0,2.0) ), 0.0);

          // area of the quad
          vec3 uv = invBilinear( p, a, b, c );
          
          // quad borders
          float h = GR/iResolution.y;
          float axis = 1.0-smoothstep(h,2.0*h,sdSegment(p.xy,a.xy,b.xy));
          axis += 1.0-smoothstep(h,2.0*h,sdSegment(p.xy,c.xy,b.xy));
          axis += 1.0-smoothstep(h,2.0*h,sdSegment(p.xy,a.xy,c.xy));

        fragColor = vec4( col, 1.0 );
          fragColor.rgb = vec3(saw(abs(uv.x/uv.z)*PI), saw(abs(uv.y/uv.z)*PI), axis);
          fragColor.a = 1.0;
      }

    `; return this.shaderToyFragment( fragment ) 
  }

  get galaxy()
  {
    var fragment = `
      // http://glslsandbox.com/e#18021.0

      #ifdef GL_ES
      precision mediump float;
      #endif

      uniform float time;
      uniform vec2 mouse;
      uniform vec2 resolution;

      #define iterations 17
      #define formuparam 0.53

      #define volsteps 20
      #define stepsize 0.1

      #define zoom   0.800
      #define tile   0.850
      #define speed  0.010 

      #define brightness 0.0015
      #define darkmatter 0.300
      #define distfading 0.730
      #define saturation 0.850


      void main(void)
      {
        //get coords and direction
        vec2 uv=gl_FragCoord.xy/resolution.xy-.5;
        uv.y*=resolution.y/resolution.x;
        vec3 dir=vec3(uv*zoom,1.);
        float time=time*speed+.25;

        //mouse rotation
        float a1=.5+mouse.x/resolution.x*2.;
        float a2=.8+mouse.y/resolution.y*2.;
        mat2 rot1=mat2(cos(a1),sin(a1),-sin(a1),cos(a1));
        mat2 rot2=mat2(cos(a2),sin(a2),-sin(a2),cos(a2));
        dir.xz*=rot1;
        dir.xy*=rot2;
        vec3 from=vec3(1.,.5,0.5);
        from+=vec3(time*2.,time,-2.);
        from.xz*=rot1;
        from.xy*=rot2;
        
        //volumetric rendering
        float s=0.1,fade=1.;
        vec3 v=vec3(0.);
        for (int r=0; r<volsteps; r++) {
          vec3 p=from+s*dir*.5;
          p = abs(vec3(tile)-mod(p,vec3(tile*2.))); // tiling fold
          float pa,a=pa=0.;
          for (int i=0; i<iterations; i++) { 
            p=abs(p)/dot(p,p)-formuparam; // the magic formula
            a+=abs(length(p)-pa); // absolute sum of average change
            pa=length(p);
          }
          float dm=max(0.,darkmatter-a*a*.001); //dark matter
          a*=a*a; // add contrast
          if (r>6) fade*=1.-dm; // dark matter, don't render near
          //v+=vec3(dm,dm*.5,0.);
          v+=fade;
          v+=vec3(s,s*s,s*s*s*s)*a*brightness*fade; // coloring based on distance
          fade*=distfading; // distance fading
          s+=stepsize;
        }
        v=mix(vec3(length(v)),v,saturation); //color adjust
        gl_FragColor = vec4(v*.01,1.);  
        
      }
    ` ; return fragment
   
  }

  get closeToNeuron()
  {
    var fragment = `

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

#define PI 3.14159

float hash(float n) {
  return fract(sin(n)*43758.5435);
}

float noise(vec3 x) {
  vec3 p = floor(x);
  vec3 f = fract(x);
  
  f = f*f*(3.0 - 2.0*f);
  float n = p.x + p.y*57.0 + p.z*113.0;
  
  return mix(
    mix(
      mix(hash(n + 000.0), hash(n + 001.0), f.x),
      mix(hash(n + 057.0), hash(n + 058.0), f.x),
      f.y),
    mix(
      mix(hash(n + 113.0), hash(n + 114.0), f.x),
      mix(hash(n + 170.0), hash(n + 171.0), f.x),
      f.y),
    f.z);
}

float map(vec3 p) {
  p.z += time*0.5;
  float n = abs(dot(cos(p*PI), sin(p.yzx*PI)));
  return .45 - n*.33 + 0.02*smoothstep(0.7, 1.0, noise(10.0*p)) + 0.01*noise(40.0*p);
}

float march(vec3 ro, vec3 rd) {
  float t = 0.0;
  
  for(int i = 0; i < 100; i++) {
    float h = map(ro + rd*t);
    if(abs(h) < 0.001 || t >= 10.0) break;
    t += h*0.5;
  }
  
  return t;
}

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

float shadow(vec3 p, vec3 l) {
  float res = 1.0;
  float t = 0.002;
  
  for(int i = 0; i < 100; i++) {
    float h = map(p + l*t);
    if(abs(h) < 0.0 || t >= 7.0) break;
    t += h;
    res = min(res, 16.0*h/t);
  }
  
  return clamp(res, 0.0, 1.0);
}

mat3 camera(vec3 eye, vec3 lat) {
  vec3 ww = normalize(lat - eye);
  vec3 uu = normalize(cross(vec3(0, 1, 0), ww));
  vec3 vv = normalize(cross(ww, uu));
  
  return mat3(uu, vv, ww);
}

void main( void ) {
  vec2 uv = -1.0 + 2.0*(gl_FragCoord.xy/resolution);
  uv.x *= resolution.x/resolution.y;
  vec2 mo = -1.5 + 3.0*mouse;
  
  vec3 col = vec3(0);
  
  vec3 ro = vec3(0, 0, -3);
  vec3 rd = camera(ro, vec3(4.0*mo.x, 2.0*mo.y, 0.0))*normalize(vec3(uv, 1.97));
  
  float i = march(ro, rd);
  
  if(i < 10.0) {
    vec3 pos = ro + rd*i;
    vec3 nor = normal(pos);
    vec3 ref = reflect(rd, nor);
    
    vec3 lig = normalize(vec3(0.8, 0.7, -0.6));
    vec3 bli = -lig;
    
    float amb = 0.5 + 0.5*nor.y;
    float dif = clamp(dot(lig, nor), 0.0, 1.0);
    float bac = clamp(dot(bli, nor), 0.0, 1.0);
    float spe = pow(clamp(dot(ref, lig), 0.0, 1.0), 8.0);
    float fre = pow(clamp(1.0 + dot(rd, nor), 0.0, 1.0), 2.0);
    
    float sha = shadow(pos, lig);
    
    col  = 0.2*amb*vec3(1);
    col += 1.2*dif*vec3(1)*sha;
    col += 0.15*bac*vec3(1);
    
    vec3 mat = vec3(0.4, 0.7, 0.3);
    pos.z += time*0.5;
    float f = smoothstep(0.7, 1.0, noise(10.0*pos));
    mat = mix(mat, vec3(1.0, 0.2, 0.2), smoothstep(0.0, 1.0, 100.0*f));
    col *= mat;
    
    col += 0.2*spe*vec3(1)*dif*sha;
    col += 0.2*fre*vec3(1);
  }
  
  col = mix(col, vec3(0.9, 1.0, 0.9), 1.0 - exp(-i*0.5));
  
  gl_FragColor = vec4(col, 1);
}


    `;return fragment
  }

  get tejut()
  {
    var frag = `
#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 resolution;

#define FORMUPARAM 0.599
#define ITERATIONS 105
#define INNER_ITERS 10
#define ZOOM 1.2

void main()
{

    vec2 uv = (gl_FragCoord.xy/resolution.xy)-.5;
  uv *= ZOOM;
  //uv += vec2(.15 * sin(time * .2), .1 * cos(time * .1));

  
    float t = time * .1 + ((.25+.05*sin(time*.1))/(length(uv.xy)+.07))* 2.2;
    float si = sin(t);
    float co = cos(t);
    mat2 ma = mat2(co, si, -si, co);

    float c = 0.0;
    float v1 = 0.0;
    float v2 = 0.0;
  
    for (int i = 0; i < ITERATIONS; i++)
    {
        float s = float(i) * .035;
        vec3 p = s * vec3(uv, 1.0 + sin(time * .015));
        p.xy *= ma;
        p += vec3(.22,.3, s-1.5-sin(t*.13)*.1);
        for (int i = 0; i < INNER_ITERS; i++)
        {
            p = abs(p) / dot(p,p) - FORMUPARAM;
        }
        v1 += dot(p,p)*.0015 * (2.8+sin(length(uv.xy*18.0)+.5-t*.7));
        v2 += dot(p,p)*.0025 * (1.5+sin(length(uv.xy*13.5)+1.21-t*.3));
        c = length(p.xy*.3) * .85;
    }

    float len = length(uv);
    v1 *= smoothstep(.7, .0, len);
    v2 *= smoothstep(.6, .0, len);

    float re = clamp(c, 0.0, 1.0);
    float gr = clamp((v1+c)*.25, 0.0, 1.0);
    float bl = clamp(v2, 0.0, 1.0);
    vec3 col = vec3(re, gr, bl) + smoothstep(0.15, .0, len) * .9;

    gl_FragColor=vec4(col, 1.0);
}    
    `; return frag
  }
  
  // earth with clouds 
  // https://www.shadertoy.com/view/ldyXRw
  get earth()
  {
    var frag = `
#define SHADERTOY

#ifdef __cplusplus
#define _in(T) const T &
#define _inout(T) T &
#define _out(T) T &
#define _begin(type) type {
#define _end }
#define _mutable(T) T
#define _constant(T) const T
#define mul(a, b) (a) * (b)
#endif

#if defined(GL_ES) || defined(GL_SHADING_LANGUAGE_VERSION)
#define _in(T) const in T
#define _inout(T) inout T
#define _out(T) out T
#define _begin(type) type (
#define _end )
#define _mutable(T) T
#define _constant(T) const T
#define mul(a, b) (a) * (b)
precision mediump float;
#endif

#ifdef HLSL
#define _in(T) const in T
#define _inout(T) inout T
#define _out(T) out T
#define _begin(type) {
#define _end }
#define _mutable(T) static T
#define _constant(T) static const T
#define vec2 float2
#define vec3 float3
#define vec4 float4
#define mat2 float2x2
#define mat3 float3x3
#define mat4 float4x4
#define mix lerp
#define fract frac
#define mod fmod
#pragma pack_matrix(row_major)
#endif

#ifdef HLSLTOY
cbuffer uniforms : register(b0) {
	float2 u_res;
	float u_time;
	float2 u_mouse;
};
void mainImage(_out(float4) fragColor, _in(float2) fragCoord);
float4 main(float4 uv : SV_Position) : SV_Target{ float4 col; mainImage(col, uv.xy); return col; }
#endif

#if defined(__cplusplus) || defined(SHADERTOY)
#define u_res iResolution
#define u_time iGlobalTime
#define u_mouse iMouse
#endif

#ifdef GLSLSANDBOX
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
#define u_res resolution
#define u_time time
#define u_mouse mouse
void mainImage(_out(vec4) fragColor, _in(vec2) fragCoord);
void main() { mainImage(gl_FragColor, gl_FragCoord.xy); }
#endif

#ifdef UE4
_constant(vec2) u_res = vec2(0, 0);
_constant(vec2) u_mouse = vec2(0, 0);
_mutable(float) u_time = 0;
#endif

#define PI 3.14159265359

struct ray_t {
	vec3 origin;
	vec3 direction;
};
#define BIAS 1e-4 // small offset to avoid self-intersections

struct sphere_t {
	vec3 origin;
	float radius;
	int material;
};

struct plane_t {
	vec3 direction;
	float distance;
	int material;
};

struct hit_t {
	float t;
	int material_id;
	vec3 normal;
	vec3 origin;
};
#define max_dist 1e8
_constant(hit_t) no_hit = _begin(hit_t)
	float(max_dist + 1e1), // 'infinite' distance
	-1, // material id
	vec3(0., 0., 0.), // normal
	vec3(0., 0., 0.) // origin
_end;

// ----------------------------------------------------------------------------
// Various 3D utilities functions
// ----------------------------------------------------------------------------

ray_t get_primary_ray(
	_in(vec3) cam_local_point,
	_inout(vec3) cam_origin,
	_inout(vec3) cam_look_at
){
	vec3 fwd = normalize(cam_look_at - cam_origin);
	vec3 up = vec3(0, 1, 0);
	vec3 right = cross(up, fwd);
	up = cross(fwd, right);

	ray_t r = _begin(ray_t)
		cam_origin,
		normalize(fwd + up * cam_local_point.y + right * cam_local_point.x)
	_end;
	return r;
}

_constant(mat3) mat3_ident = mat3(1, 0, 0, 0, 1, 0, 0, 0, 1);

#ifndef HLSL
mat3 transpose(
	_in(mat3) m
){
	return mat3(
		m[0][0], m[1][0], m[2][0],
		m[0][1], m[1][1], m[2][1],
		m[0][2], m[1][2], m[2][2]);
}
#endif

mat2 rotate_2d(
	_in(float) angle_degrees
){
	float angle = radians(angle_degrees);
	float _sin = sin(angle);
	float _cos = cos(angle);
	return mat2(_cos, -_sin, _sin, _cos);
}

mat3 rotate_around_z(
	_in(float) angle_degrees
){
	float angle = radians(angle_degrees);
	float _sin = sin(angle);
	float _cos = cos(angle);
	return mat3(_cos, -_sin, 0, _sin, _cos, 0, 0, 0, 1);
}

mat3 rotate_around_y(
	_in(float) angle_degrees
){
	float angle = radians(angle_degrees);
	float _sin = sin(angle);
	float _cos = cos(angle);
	return mat3(_cos, 0, _sin, 0, 1, 0, -_sin, 0, _cos);
}

mat3 rotate_around_x(
	_in(float) angle_degrees
){
	float angle = radians(angle_degrees);
	float _sin = sin(angle);
	float _cos = cos(angle);
	return mat3(1, 0, 0, 0, _cos, -_sin, 0, _sin, _cos);
}

// http://http.developer.nvidia.com/GPUGems3/gpugems3_ch24.html
vec3 linear_to_srgb(
	_in(vec3) color
){
	const float p = 1. / 2.2;
	return vec3(pow(color.r, p), pow(color.g, p), pow(color.b, p));
}
vec3 srgb_to_linear(
	_in(vec3) color
){
	const float p = 2.2;
	return vec3(pow(color.r, p), pow(color.g, p), pow(color.b, p));
}

#ifdef __cplusplus
vec3 faceforward(
	_in(vec3) N,
	_in(vec3) I,
	_in(vec3) Nref
){
	return dot(Nref, I) < 0 ? N : -N;
}
#endif

float checkboard_pattern(
	_in(vec2) pos,
	_in(float) scale
){
	vec2 pattern = floor(pos * scale);
	return mod(pattern.x + pattern.y, 2.0);
}

float band (
	_in(float) start,
	_in(float) peak,
	_in(float) end,
	_in(float) t
){
	return
	smoothstep (start, peak, t) *
	(1. - smoothstep (peak, end, t));
}

// from https://www.shadertoy.com/view/4sSSW3
// original http://orbit.dtu.dk/fedora/objects/orbit:113874/datastreams/file_75b66578-222e-4c7d-abdf-f7e255100209/content
void fast_orthonormal_basis(
	_in(vec3) n,
	_out(vec3) f,
	_out(vec3) r
){
	float a = 1. / (1. + n.z);
	float b = -n.x*n.y*a;
	f = vec3(1. - n.x*n.x*a, b, -n.x);
	r = vec3(b, 1. - n.y*n.y*a, -n.y);
}

// ----------------------------------------------------------------------------
// Analytical surface-ray intersection routines
// ----------------------------------------------------------------------------

// geometrical solution
// info: http://www.scratchapixel.com/old/lessons/3d-basic-lessons/lesson-7-intersecting-simple-shapes/ray-sphere-intersection/
void intersect_sphere(
	_in(ray_t) ray,
	_in(sphere_t) sphere,
	_inout(hit_t) hit
){
	vec3 rc = sphere.origin - ray.origin;
	float radius2 = sphere.radius * sphere.radius;
	float tca = dot(rc, ray.direction);
	if (tca < 0.) return;

	float d2 = dot(rc, rc) - tca * tca;
	if (d2 > radius2) return;

	float thc = sqrt(radius2 - d2);
	float t0 = tca - thc;
	float t1 = tca + thc;

	if (t0 < 0.) t0 = t1;
	if (t0 > hit.t) return;

	vec3 impact = ray.origin + ray.direction * t0;

	hit.t = t0;
	hit.material_id = sphere.material;
	hit.origin = impact;
	hit.normal = (impact - sphere.origin) / sphere.radius;
}


// ----------------------------------------------------------------------------
// Volumetric utilities
// ----------------------------------------------------------------------------

struct volume_sampler_t {
	vec3 origin; // start of ray
	vec3 pos; // current pos of acccumulation ray
	float height;

	float coeff_absorb;
	float T; // transmitance

	vec3 C; // color
	float alpha;
};

volume_sampler_t begin_volume(
	_in(vec3) origin,
	_in(float) coeff_absorb
){
	volume_sampler_t v = _begin(volume_sampler_t)
		origin, origin, 0.,
		coeff_absorb, 1.,
		vec3(0., 0., 0.), 0.
	_end;
	return v;
}

float illuminate_volume(
	_inout(volume_sampler_t) vol,
	_in(vec3) V,
	_in(vec3) L
);

void integrate_volume(
	_inout(volume_sampler_t) vol,
	_in(vec3) V,
	_in(vec3) L,
	_in(float) density,
	_in(float) dt
){
	// change in transmittance (follows Beer-Lambert law)
	float T_i = exp(-vol.coeff_absorb * density * dt);
	// Update accumulated transmittance
	vol.T *= T_i;
	// integrate output radiance (here essentially color)
	vol.C += vol.T * illuminate_volume(vol, V, L) * density * dt;
	// accumulate opacity
	vol.alpha += (1. - T_i) * (1. - vol.alpha);
}


// ----------------------------------------------------------------------------
// Noise function by iq from https://www.shadertoy.com/view/4sfGzS
// ----------------------------------------------------------------------------

float hash(
	_in(float) n
){
	return fract(sin(n)*753.5453123);
}

float noise_iq(
	_in(vec3) x
){
	vec3 p = floor(x);
	vec3 f = fract(x);
	f = f*f*(3.0 - 2.0*f);

#if 1
    float n = p.x + p.y*157.0 + 113.0*p.z;
    return mix(mix(mix( hash(n+  0.0), hash(n+  1.0),f.x),
                   mix( hash(n+157.0), hash(n+158.0),f.x),f.y),
               mix(mix( hash(n+113.0), hash(n+114.0),f.x),
                   mix( hash(n+270.0), hash(n+271.0),f.x),f.y),f.z);
#else
	vec2 uv = (p.xy + vec2(37.0, 17.0)*p.z) + f.xy;
	vec2 rg = texture2D(iChannel0, (uv + 0.5) / 256.0, -100.0).yx;
	return mix(rg.x, rg.y, f.z);
#endif
}

#define noise(x) noise_iq(x)

// ----------------------------------------------------------------------------
// Fractional Brownian Motion
// depends on custom basis function
// ----------------------------------------------------------------------------

#define DECL_FBM_FUNC(_name, _octaves, _basis) float _name(_in(vec3) pos, _in(float) lacunarity, _in(float) init_gain, _in(float) gain) { vec3 p = pos; float H = init_gain; float t = 0.; for (int i = 0; i < _octaves; i++) { t += _basis * H; p *= lacunarity; H *= gain; } return t; }

DECL_FBM_FUNC(fbm, 4, noise(p))

// ----------------------------------------------------------------------------
// Planet
// ----------------------------------------------------------------------------
_constant(sphere_t) planet = _begin(sphere_t)
	vec3(0, 0, 0), 1., 0
_end;

#define max_height .4
#define max_ray_dist (max_height * 4.)

vec3 background(
	_in(ray_t) eye
){
#if 0
	return vec3(.15, .3, .4);
#else
	_constant(vec3) sun_color = vec3(1., .9, .55);
	float sun_amount = dot(eye.direction, vec3(0, 0, 1));

	vec3 sky = mix(
		vec3(.0, .05, .2),
		vec3(.15, .3, .4),
		1.0 - eye.direction.y);
	sky += sun_color * min(pow(sun_amount, 30.0) * 5.0, 1.0);
	sky += sun_color * min(pow(sun_amount, 10.0) * .6, 1.0);

	return sky;
#endif
}

void setup_scene()
{
}

void setup_camera(
	_inout(vec3) eye,
	_inout(vec3) look_at
){
#if 0
	eye = vec3(.0, 0, -1.93);
	look_at = vec3(-.1, .9, 2);
#else
	eye = vec3(0, 0, -2.5);
	look_at = vec3(0, 0, 2);
#endif
}

// ----------------------------------------------------------------------------
// Clouds
// ----------------------------------------------------------------------------
#define CLOUDS

#define anoise (abs(noise(p) * 2. - 1.))
DECL_FBM_FUNC(fbm_clouds, 4, anoise)

#define vol_coeff_absorb 30.034
_mutable(volume_sampler_t) cloud;

float illuminate_volume(
	_inout(volume_sampler_t) cloud,
	_in(vec3) V,
	_in(vec3) L
){
	return exp(cloud.height) / .055;
}

void clouds_map(
	_inout(volume_sampler_t) cloud,
	_in(float) t_step
){
	float dens = fbm_clouds(
		cloud.pos * 3.2343 + vec3(.35, 13.35, 2.67),
		2.0276, .5, .5);

	#define cld_coverage .29475675 // higher=less clouds
	#define cld_fuzzy .0335 // higher=fuzzy, lower=blockier
	dens *= smoothstep(cld_coverage, cld_coverage + cld_fuzzy, dens);

	dens *= band(.2, .35, .65, cloud.height);

	integrate_volume(cloud,
		cloud.pos, cloud.pos, // unused dummies 
		dens, t_step);
}

void clouds_march(
	_in(ray_t) eye,
	_inout(volume_sampler_t) cloud,
	_in(float) max_travel,
	_in(mat3) rot
){
	const int steps = 75;
	const float t_step = max_ray_dist / float(steps);
	float t = 0.;

	for (int i = 0; i < steps; i++) {
		if (t > max_travel || cloud.alpha >= 1.) return;
			
		vec3 o = cloud.origin + t * eye.direction;
		cloud.pos = mul(rot, o - planet.origin);

		cloud.height = (length(cloud.pos) - planet.radius) / max_height;
		t += t_step;
		clouds_map(cloud, t_step);
	}
}

void clouds_shadow_march(
	_in(vec3) dir,
	_inout(volume_sampler_t) cloud,
	_in(mat3) rot
){
	const int steps = 5;
	const float t_step = max_height / float(steps);
	float t = 0.;

	for (int i = 0; i < steps; i++) {
		vec3 o = cloud.origin + t * dir;
		cloud.pos = mul(rot, o - planet.origin);

		cloud.height = (length(cloud.pos) - planet.radius) / max_height;
		t += t_step;
		clouds_map(cloud, t_step);
	}
}

// ----------------------------------------------------------------------------
// Terrain
// ----------------------------------------------------------------------------
#define TERR_STEPS 120
#define TERR_EPS .005
#define rnoise (1. - abs(noise(p) * 2. - 1.))

DECL_FBM_FUNC(fbm_terr, 3, noise(p))
DECL_FBM_FUNC(fbm_terr_r, 3, rnoise)

DECL_FBM_FUNC(fbm_terr_normals, 7, noise(p))
DECL_FBM_FUNC(fbm_terr_r_normals, 7, rnoise)

vec2 sdf_terrain_map(_in(vec3) pos)
{
	float h0 = fbm_terr(pos * 2.0987, 2.0244, .454, .454);
	float n0 = smoothstep(.35, 1., h0);

	float h1 = fbm_terr_r(pos * 1.50987 + vec3(1.9489, 2.435, .5483), 2.0244, .454, .454);
	float n1 = smoothstep(.6, 1., h1);
	
	float n = n0 + n1;
	
	return vec2(length(pos) - planet.radius - n * max_height, n / max_height);
}

vec2 sdf_terrain_map_detail(_in(vec3) pos)
{
	float h0 = fbm_terr_normals(pos * 2.0987, 2.0244, .454, .454);
	float n0 = smoothstep(.35, 1., h0);

	float h1 = fbm_terr_r_normals(pos * 1.50987 + vec3(1.9489, 2.435, .5483), 2.0244, .454, .454);
	float n1 = smoothstep(.6, 1., h1);

	float n = n0 + n1;

	return vec2(length(pos) - planet.radius - n * max_height, n / max_height);
}

vec3 sdf_terrain_normal(_in(vec3) p)
{
#define F(t) sdf_terrain_map_detail(t).x
	vec3 dt = vec3(0.001, 0, 0);

	return normalize(vec3(
		F(p + dt.xzz) - F(p - dt.xzz),
		F(p + dt.zxz) - F(p - dt.zxz),
		F(p + dt.zzx) - F(p - dt.zzx)
	));
#undef F
}

// ----------------------------------------------------------------------------
// Lighting
// ----------------------------------------------------------------------------
vec3 setup_lights(
	_in(vec3) L,
	_in(vec3) normal
){
	vec3 diffuse = vec3(0, 0, 0);

	// key light
	vec3 c_L = vec3(7, 5, 3);
	diffuse += max(0., dot(L, normal)) * c_L;

	// fill light 1 - faked hemisphere
	float hemi = clamp(.25 + .5 * normal.y, .0, 1.);
	diffuse += hemi * vec3(.4, .6, .8) * .2;

	// fill light 2 - ambient (reversed key)
	float amb = clamp(.12 + .8 * max(0., dot(-L, normal)), 0., 1.);
	diffuse += amb * vec3(.4, .5, .6);

	return diffuse;
}

vec3 illuminate(
	_in(vec3) pos,
	_in(vec3) eye,
	_in(mat3) local_xform,
	_in(vec2) df
){
	// current terrain height at position
	float h = df.y;
	//return vec3 (h);

	vec3 w_normal = normalize(pos);
#define LIGHT
#ifdef LIGHT
	vec3 normal = sdf_terrain_normal(pos);
	float N = dot(normal, w_normal);
#else
	float N = w_normal.y;
#endif

	// materials
	#define c_water vec3(.015, .110, .455)
	#define c_grass vec3(.086, .132, .018)
	#define c_beach vec3(.153, .172, .121)
	#define c_rock  vec3(.080, .050, .030)
	#define c_snow  vec3(.600, .600, .600)

	// limits
	#define l_water .05
	#define l_shore .17
	#define l_grass .211
	#define l_rock .351

	float s = smoothstep(.4, 1., h);
	vec3 rock = mix(
		c_rock, c_snow,
		smoothstep(1. - .3*s, 1. - .2*s, N));

	vec3 grass = mix(
		c_grass, rock,
		smoothstep(l_grass, l_rock, h));
		
	vec3 shoreline = mix(
		c_beach, grass,
		smoothstep(l_shore, l_grass, h));

	vec3 water = mix(
		c_water / 2., c_water,
		smoothstep(0., l_water, h));

#ifdef LIGHT
	vec3 L = mul(local_xform, normalize(vec3(1, 1, 0)));
	shoreline *= setup_lights(L, normal);
	vec3 ocean = setup_lights(L, w_normal) * water;
#else
	vec3 ocean = water;
#endif
	
	return mix(
		ocean, shoreline,
		smoothstep(l_water, l_shore, h));
}

// ----------------------------------------------------------------------------
// Rendering
// ----------------------------------------------------------------------------
vec3 render(
	_in(ray_t) eye,
	_in(vec3) point_cam
){
	mat3 rot_y = rotate_around_y(27.);
	mat3 rot = mul(rotate_around_x(u_time * -12.), rot_y);
	mat3 rot_cloud = mul(rotate_around_x(u_time * 8.), rot_y);

	sphere_t atmosphere = planet;
	atmosphere.radius += max_height;

	hit_t hit = no_hit;
	intersect_sphere(eye, atmosphere, hit);
	if (hit.material_id < 0) {
		return background(eye);
	}

	float t = 0.;
	vec2 df = vec2(1, max_height);
	vec3 pos;
	float max_cld_ray_dist = max_ray_dist;
	
	for (int i = 0; i < TERR_STEPS; i++) {
		if (t > max_ray_dist) break;
		
		vec3 o = hit.origin + t * eye.direction;
		pos = mul(rot, o - planet.origin);

		df = sdf_terrain_map(pos);

		if (df.x < TERR_EPS) {
			max_cld_ray_dist = t;
			break;
		}

		t += df.x * .4567;
	}

#ifdef CLOUDS
	cloud = begin_volume(hit.origin, vol_coeff_absorb);
	clouds_march(eye, cloud, max_cld_ray_dist, rot_cloud);
#endif
	
	if (df.x < TERR_EPS) {
		vec3 c_terr = illuminate(pos, eye.direction, rot, df);
		vec3 c_cld = cloud.C;
		float alpha = cloud.alpha;
		float shadow = 1.;

#ifdef CLOUDS // clouds ground shadows
		pos = mul(transpose(rot), pos);
		cloud = begin_volume(pos, vol_coeff_absorb);
		vec3 local_up = normalize(pos);
		clouds_shadow_march(local_up, cloud, rot_cloud);
		shadow = mix(.7, 1., step(cloud.alpha, 0.33));
#endif

		return mix(c_terr * shadow, c_cld, alpha);
	} else {
		return mix(background(eye), cloud.C, cloud.alpha);
	}
}

#define FOV tan(radians(30.))
// ----------------------------------------------------------------------------
// Main Rendering function
// depends on external defines: FOV
// ----------------------------------------------------------------------------

void mainImage(
	_out(vec4) fragColor,
#ifdef SHADERTOY
	vec2 fragCoord
#else
	_in(vec2) fragCoord
#endif
){
	// assuming screen width is larger than height 
	vec2 aspect_ratio = vec2(u_res.x / u_res.y, 1);

	vec3 color = vec3(0, 0, 0);

	vec3 eye, look_at;
	setup_camera(eye, look_at);

	setup_scene();

	vec2 point_ndc = fragCoord.xy / u_res.xy;
#ifdef HLSL
		point_ndc.y = 1. - point_ndc.y;
#endif
	vec3 point_cam = vec3(
		(2.0 * point_ndc - 1.0) * aspect_ratio * FOV,
		-1.0);

	ray_t ray = get_primary_ray(point_cam, eye, look_at);

	color += render(ray, point_cam);

	fragColor = vec4(linear_to_srgb(color), 1);
}
      
    `; return this.shaderToyFragment( frag )
  }
  
  
}  

              
            
!
999px

Console