Liquid-Metal-Prototype/index.html at master · RichardGeorgeDavis/Liquid-Metal-Prototype · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html lang="en">
<head>
  <title>Liquid Metal Prototype v0.1</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    body {
      margin: 0px;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div id="page-container"></div>
<script src="libs/three.min.js"></script>
<script src="libs/jquery.min.js"></script>

<script id="vertexShader" type="x-shader/x-vertex">
  uniform float iGlobalTime;
  uniform vec2 iResolution;
  uniform vec4 iMouse;
  uniform float audio1;
  uniform sampler2D iChannel0;
  uniform sampler2D iChannel1;

  varying vec2 vUv;
  void main() {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.5 );
    gl_Position = projectionMatrix * mvPosition;
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">

uniform float iGlobalTime;
uniform vec2 iResolution;
uniform vec4 iMouse;
uniform float audio1;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;

#define t iGlobalTime
mat2 m(float a){float c=cos(a), s=sin(a);return mat2(c,-s,s,c);}
float map(vec3 p){
    p.xz*= m(1.3);p.xy*= m(.4) ;
    vec3 q = p*3.5+t;
    return  p.x*p.y * length(p+vec3(sin(1.7)))*log(length(p)+1.) + sin(q.x+sin(q.z+sin(q.y)))*0.7 - 1.0 ;
}

void main(){
  vec2 p = gl_FragCoord.xy/iResolution.y - vec2(1.0,0.8) ;
    vec3 cl = vec3(0.8);
    float d = 5.5;
    for(int i=0; i<=5; i++) {
      vec3 p = vec3(0,.2,6.) + normalize(vec3(p, -3.0))*d ;
        float rz = map(p);
    float f =  clamp((rz - map(p+.1))*0.5*cos(iGlobalTime*.2)*p.x, -.1, .5 );
        vec3 l = vec3(0.1,0.2,0.4) + vec3(0.1, 2.5, 2.0)*f;
        cl = cl*l + (1.2-smoothstep(0.8, 2.5, rz))*.7*l;
    d += min(rz, 0.8 );
  }
    gl_FragColor = vec4(cl, 1.5);
}

</script>
<script>
  var container;
  var camera, scene, renderer;
  var uniforms, material, mesh;
  var mouseX = 0, mouseY = 0,
  lat = 0, lon = 0, phy = 0, theta = 0;
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  var startTime = Date.now();
  var clock = new THREE.Clock();

  init();

  animate();
  function init() {
    container = document.getElementById( 'page-container' );
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000000 );
    camera.position.z = 1.;
    scene = new THREE.Scene();

    uniforms = {
      iGlobalTime: { type: "f", value: 0.0 },
      audio1: { type: "f", value: 0.0 },
      iResolution: { type: "v2", value: new THREE.Vector2() },
      iChannel0:  { type: 't', value: THREE.ImageUtils.loadTexture( 'assets/tex1.png') },
    };
    uniforms.iChannel0.value.wrapS = uniforms.iChannel0.value.wrapT = THREE.RepeatWrapping;

    material = new THREE.ShaderMaterial( {
      uniforms: uniforms,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent
    });


    var geometry = new THREE.PlaneGeometry( 1, 1 );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.scale.x = window.innerWidth;
    mesh.scale.y = window.innerHeight;

    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();
    container.appendChild( renderer.domElement );
    uniforms.iResolution.value.x =  window.innerWidth;
    uniforms.iResolution.value.y = window.innerHeight;
    renderer.setSize( window.innerWidth, window.innerHeight );
  }
  function animate() {
    requestAnimationFrame( animate );
    render();
  }

  function render() {
    uniforms.iGlobalTime.value += clock.getDelta() *.5;
    renderer.render( scene, camera );
  }


   window.addEventListener( 'resize', onWindowResize, false );
    function onWindowResize() {

        windowHalfX = window.innerWidth / 2,
        windowHalfY = window.innerHeight / 2,

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );


        uniforms.iResolution.value.x = window.innerWidth;
        uniforms.iResolution.value.y = window.innerHeight;


    }


</script>


</body></html>