let camera,
renderer1,
scene,
uniformsBlob,
uniformsPano,
container1 = document.getElementById("canvas_container1"),
bg = document.querySelector(".bg"),
floor = document.querySelector(".floor"),
btn_Light = document.querySelector(".btn_Light"),
timeout_Debounce,
lightOFF = true,
renderer2,
camera2,
scene2,
sprites = new THREE.Group(),
container2 = document.getElementById("canvas_container2"),
mouse = { x: 1 }
init();
animate();
function init() {
renderer1 = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer1.setSize(container1.clientWidth, container1.clientHeight);
renderer1.setPixelRatio(window.devicePixelRatio);
container1.appendChild(renderer1.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, container1.clientWidth / container1.clientHeight, 0.1, 1000);
camera.position.set(0, 0, 40);
const light1 = new THREE.DirectionalLight("#ffffff", 0.7);
light1.position.set(-10, 30, 20);
scene.add(light1);
const light2 = new THREE.DirectionalLight("#ffffff", 0.7);
light2.position.set(10, 30, 20);
scene.add(light2);
const light3 = new THREE.DirectionalLight("#fcfcfc", 0.3);
light3.position.set(0, -20, 10);
scene.add(light3);
const textureLoader = new THREE.TextureLoader();
const blobTexture = textureLoader.load("https://i.ibb.co/9sk6j71/blob1-ls1rst.jpg");
const panoTexture = textureLoader.load("https://i.ibb.co/ynL0QP5/pano-ex9djn.jpg");
/*** Blob ***/
let blobGeometry = new THREE.IcosahedronBufferGeometry(10, 50);
uniformsBlob = THREE.UniformsUtils.merge([uniformsBlob, THREE.UniformsLib["lights"]]);
Object.assign(uniformsBlob, {
t_texture: { type: "t", value: blobTexture },
u_time: { type: "f", value: 0.0 },
u_mouse1: { type: "v2", value: new THREE.Vector2(1, 1) },
u_mouse2: { type: "v2", value: new THREE.Vector2(20, 20) },
u_lightOFF: { type: "b", value: lightOFF },
u_effect_Switch: { type: "f", value: 0.0 },
u_textura_Zoom: { type: "f", value: 1.0 },
});
uniformsBlob.t_texture.value.anisotropy = 16
uniformsBlob.t_texture.value.wrapS = THREE.MirroredRepeatWrapping;
uniformsBlob.t_texture.value.wrapT = THREE.ClampToEdgeWrapping;
let shaderMaterialBlob = new THREE.ShaderMaterial({
uniforms: uniformsBlob,
fragmentShader: blobFragmentShader(),
vertexShader: blobVertexShader(),
lights: true,
});
blob = new THREE.Mesh(blobGeometry, shaderMaterialBlob);
blob.position.set(2, -2.2, 10);
scene.add(blob);
/*** Pano ****/
let panoGeometry = new THREE.PlaneBufferGeometry(54.5, 27.3);
uniformsPano = {
t_texture: { type: "t", value: panoTexture },
u_resolution: { type: "v2", value: new THREE.Vector2() },
u_time: { type: 'f', value: 0 },
u_mouse: { type: "v2", value: new THREE.Vector2() },
u_lightOFF: { type: "b", value: lightOFF },
u_randomColor: { type: "v3", value: new THREE.Vector3(0.2, 0.2, 0.2) },
u_panoScale: { type: "v2", value: new THREE.Vector2(10.1, 0.2) },
};
uniformsPano.u_resolution.value.x = renderer1.domElement.width;
uniformsPano.u_resolution.value.y = renderer1.domElement.height;
uniformsPano.t_texture.value.wrapS = THREE.ClampToEdgeWrapping;
uniformsPano.t_texture.value.wrapT = THREE.ClampToEdgeWrapping;
let shaderMaterialPano = new THREE.ShaderMaterial({
uniforms: uniformsPano,
fragmentShader: panoFragmentShader(),
vertexShader: panoVertexShader(),
});
pano = new THREE.Mesh(panoGeometry, shaderMaterialPano);
pano.position.set(0.5, -1.6, 10);
scene.add(pano);
/* Mouse Event Handler */
function norm(val, max, min) { return (val - min) / (max - min); }
window.addEventListener("mousemove", (e) => {
mouse.x = e.x;
let x = norm(-(container1.clientWidth / 2 - e.x), container1.clientWidth / 2, 0) + 0.999;
if (x > 0) uniformsBlob.u_mouse1.value.x = x - 1;
else uniformsBlob.u_mouse1.value.x = x + 1;
uniformsBlob.u_mouse1.value.y = norm(container1.clientHeight / 2 - e.y, container1.clientHeight / 2, 0);
uniformsBlob.u_mouse2.value.x = norm(e.x, container1.clientWidth, 0) + 0.5;
uniformsPano.u_mouse.value.x = uniformsBlob.u_mouse2.value.x - 0.5;
uniformsPano.u_mouse.value.y = uniformsBlob.u_mouse1.value.y
});
/* CANVAS 2 Particles */
let spriteSet = function () {
let h = window.innerHeight;
renderer2 = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer2.setSize(window.innerWidth, h);
renderer2.setPixelRatio(window.devicePixelRatio);
container2.appendChild(renderer2.domElement);
scene2 = new THREE.Scene();
//better to do this dynamically
camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / h, 0.1, 1000);
camera2.position.set(0, 0, 40);
if (h <= 500) camera2.position.set(0, 0, 40);
else if (h > 500 && h <= 600) camera2.position.set(0, -3, 50);
else if (h > 600 && h <= 700) camera2.position.set(0, -12, 60);
else if (h > 700 && h <= 800) camera2.position.set(0, -18, 60);
else if (h > 800 && h <= 900) camera2.position.set(0, -25, 60);
else camera2.position.set(0, -28, 60);
for (var i = 0; i < 1000; i++) {
spriteMaterial = new THREE.SpriteMaterial({
transparent: true,
opacity: 0.8,
});
let sprite = new THREE.Sprite(spriteMaterial);
sprite.position.set(
THREE.MathUtils.randFloat(-40, 40), //x
THREE.MathUtils.randFloat(-22, 17), //y
THREE.MathUtils.randFloat(-1, -6), //z
);
sprite.scale.set(0.8, 0.8);
//can't do in shader because is difference renderer from pano
if (sprite.position.y > 12 && sprite.position.y <= 17) spriteMaterial.color.set("#F9BE6E");
else if (sprite.position.y > 8 && sprite.position.y <= 12) spriteMaterial.color.set("#F9DA8A");
else if (sprite.position.y > 3 && sprite.position.y <= 8) spriteMaterial.color.set("#E29A50");
else if (sprite.position.y > 0 && sprite.position.y <= 3) spriteMaterial.color.set("#7A5437");
else if (sprite.position.y > -11 && sprite.position.y <= 0) spriteMaterial.color.set("#1B5A7D");
else if (sprite.position.y > -16 && sprite.position.y <= -11) spriteMaterial.color.set("#038BA5");
else if (sprite.position.y >= -22 && sprite.position.y <= -16) spriteMaterial.color.set("#CCD79F");
sprite.velocity = {
x: (Math.random() - 0.5) / 6,
z: -0.1 - Math.random() / 4
}
sprites.add(sprite);
}
scene2.add(sprites);
spriteSet = function () { };
}
btn_Light.addEventListener("click", e => {
if (lightOFF) {
sprites.visible = true;
bg.style.webkitFilter = "brightness(25%)";
floor.style.webkitFilter = "brightness(25%)";
btn_Light.innerHTML = "Light ON";
lightOFF = false;
btn_Light.style.color = "#3ef93e";
uniformsPano.u_lightOFF.value = false;
uniformsBlob.u_lightOFF.value = false;
spriteSet();
uniformsPano.u_panoScale.value.x = 80;
uniformsPano.u_panoScale.value.y = 0;
} else {
bg.style.webkitFilter = "brightness(100%)";
floor.style.webkitFilter = "brightness(100%)";
btn_Light.innerHTML = "Light OFF";
btn_Light.style.color = "#feaeae";
lightOFF = true;
uniformsBlob.u_lightOFF.value = true;
uniformsPano.u_lightOFF.value = true;
sprites.visible = false;
renderer2.clear();
if (uniformsBlob.u_effect_Switch.value == 0.0) {
uniformsBlob.u_effect_Switch.value = 0.08;
uniformsPano.u_randomColor.value.x = THREE.MathUtils.randFloat(-0.9, -0.5);
uniformsPano.u_randomColor.value.y = uniformsPano.u_randomColor.value.x;
uniformsPano.u_randomColor.value.z = uniformsPano.u_randomColor.value.x;
uniformsPano.u_panoScale.value.x = 10;
uniformsPano.u_panoScale.value.y = 5.4;
}
else {
uniformsBlob.u_effect_Switch.value = 0.0;
uniformsPano.u_panoScale.value.x = 40;
uniformsPano.u_panoScale.value.y = 0;
uniformsPano.u_randomColor.value.x = 0.2;
uniformsPano.u_randomColor.value.y = 0.2;
uniformsPano.u_randomColor.value.z = 0.2;
}
}
document.querySelector(".pngLights").classList.toggle("active"); //sakriva jedno png svetlo sa lampe
});
}
function blobVertexShader() {
return `
varying vec3 v_normal;
varying vec2 v_uv;
uniform float u_time;
uniform vec2 u_mouse1;
uniform bool u_lightOFF;
/*** Classic 3D Perlin noise, periodic version by Stefan Gustavson ***/
vec3 mod289(vec3 x){ return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 mod289(vec4 x){ return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 permute(vec4 x){ return mod289(((x*34.0)+1.0)*x); }
vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r;}
vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0);}
float pnoise(vec3 P, vec3 rep) {
vec3 Pi0 = mod(floor(P), rep);
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep);
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P);
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
void main() {
v_normal = normalMatrix * normal;
v_uv = uv;
// Static Boolean Uniform in conditional
if (u_lightOFF) {
float b = 6.0 * pnoise( (u_mouse1.y - u_mouse1.x)/10. * position + vec3( u_time*2.), vec3( 10.0 ) );
vec3 newPosition = position + normal * b;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
} else {
gl_Position = vec4( 0.0, 0.0, -50.0, 1.0 );
}
}
`
}
function blobFragmentShader() {
return `
varying vec3 v_normal;
varying vec2 v_uv;
uniform sampler2D t_texture;
uniform vec2 u_mouse2;
uniform float u_time;
uniform bool u_lightOFF;
uniform float u_effect_Switch;
uniform float u_textura_Zoom;
float random( vec3 scale, float seed ){
return fract( sin( dot( gl_FragCoord.xyz + seed, scale ) ) * 43758.5453 + seed ) ;
}
struct DirectionalLight {
vec3 direction;
vec3 color;
};
uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
void main() {
if (u_lightOFF) {
/*** Light ***/
vec3 lightFactor1 = vec3(0.0, 0.0, 0.0);
vec3 lightFactor2 = vec3(0.0, 0.0, 0.0);
vec3 lightFactor3 = vec3(0.0, 0.0, 0.0);
vec3 ecFromLight1 = normalize( directionalLights[0].direction );
float NdotL1 = max(0.1, dot(v_normal, ecFromLight1));
lightFactor1 += NdotL1 * directionalLights[0].color;
vec3 ecFromLight2 = normalize( directionalLights[1].direction );
float NdotL2 = max(0.1, dot(v_normal, ecFromLight2));
lightFactor2 += NdotL2 * directionalLights[1].color;
vec3 ecFromLight3 = normalize( directionalLights[2].direction );
float NdotL3 = max(0.0, dot(v_normal, ecFromLight3));
lightFactor3 += NdotL3 * directionalLights[2].color;
vec3 directionalLights = lightFactor1 + lightFactor2 + lightFactor3;
/*** texture Effect Distortion ***/
float effect = random( vec3( 12.9898, 78.233, 151.7182), 0.0 ) * u_effect_Switch;
vec4 color = texture2D( t_texture, (v_uv + effect + u_time/3.) + sin(u_mouse2) * u_textura_Zoom );
gl_FragColor = vec4( color.rgb * directionalLights, 1.0 );
} else {
gl_FragColor = vec4( 0.0, 0.0, 0.0, 0.0 );
}
}
`
}
function panoVertexShader() {
return `
varying vec2 v_uv;
void main() {
v_uv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`
}
function panoFragmentShader() {
return `
uniform sampler2D t_texture;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform bool u_lightOFF;
uniform vec3 u_randomColor;
uniform vec2 u_panoScale;
varying vec2 v_uv;
// voronoise by inigo quilez - iq/2013
vec3 hash3( vec2 p ) {
vec3 q = vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) );
return fract(sin(q)*43758.5453 + u_time+ sin(u_mouse.y)/2. );
}
float iqnoise( in vec2 x, float u, float v ) {
vec2 p = floor(x);
vec2 f = fract(x);
float k = 1.0+63.0*pow(1.0-v,4.0);
float va = 0.0;
float wt = 0.0;
for (int j=-2; j<=2; j++) {
for (int i=-2; i<=2; i++) {
vec2 g = vec2(float(i),float(j));
vec3 o = hash3(p + g)*vec3(u,u,1.0);
vec2 r = g - f + o.xy;
float d = dot(r,r);
float ww = pow( 1.0-smoothstep(0.0,1.414,sqrt(d)), k );
va += o.z*ww;
wt += ww;
}
}
return va/wt;
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
st *= u_panoScale.x + 5.0 + sin(u_mouse.y)/2. * u_panoScale.y;
float n = iqnoise(st, u_mouse.x, 0.0);
if (u_lightOFF) {
gl_FragColor = vec4(vec3(n + u_randomColor.r, n + u_randomColor.g, n + u_randomColor.b) ,1.0);
} else {
vec4 textura = texture2D( t_texture, v_uv + vec2(u_mouse.x, 0.0)/10. );
gl_FragColor = vec4( textura.rgb * vec3(n), 1.0);
}
}
`
}
function animate() {
uniformsBlob.u_time.value += 0.0015;
uniformsPano.u_time.value += 0.01;
for (var i = 0; i < sprites.children.length; i++) {
if (lightOFF) { break; }
let pos = sprites.children[i].position;
let velocity = sprites.children[i].velocity;
pos.x = pos.x - (velocity.x);
pos.z = pos.z - (velocity.z);
velocity.z = velocity.z - Math.sin(mouse.x) / 200;
pos.z <= -5 ? sprites.children[i].visible = false : sprites.children[i].visible = true;
if (pos.z >= 61 || pos.z <= -20) {
pos.z = -5;
velocity.z = -0.1 - Math.random() / 4;
}
if (pos.x <= -40 || pos.x >= 40) velocity.x = velocity.x * -0.8;
}
renderer1.render(scene, camera);
if (renderer2 && !lightOFF) renderer2.render(scene2, camera2);
requestAnimationFrame(animate);
}
/* Resize */
window.addEventListener("resize", () => {
clearTimeout(timeout_Debounce);
timeout_Debounce = setTimeout(onWindowResize, 20);
});
function onWindowResize() {
camera.aspect = container1.clientWidth / container1.clientHeight;
camera.updateProjectionMatrix();
renderer1.setSize(container1.clientWidth, container1.clientHeight);
if (renderer2 && !lightOFF) {
let h = window.innerHeight;
if (h <= 500) camera2.position.set(0, 0, 40);
else if (h > 500 && h <= 600) camera2.position.set(0, -3, 50);
else if (h > 600 && h <= 700) camera2.position.set(0, -12, 60);
else if (h > 700 && h <= 800) camera2.position.set(0, -18, 60);
else if (h > 800 && h <= 900) camera2.position.set(0, -25, 60);
else camera2.position.set(0, -28, 60);
camera2.aspect = window.innerWidth / h;
camera2.updateProjectionMatrix();
renderer2.setSize(window.innerWidth, h);
}
uniformsPano.u_resolution.value.x = renderer1.domElement.width;
uniformsPano.u_resolution.value.y = renderer1.domElement.height;
}
/* Call for action */
setInterval(() => { btn_Light.classList.toggle("blink") }, 3000);
!
