<!DOCTYPE html>
<html lang="en">
<head>
<title>SubFactory</title>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Skeleton: Responsive CSS Boilerplate</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/skeleton.css">
<link rel="stylesheet" href="./css/custom.css">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="./images/favicon.png">
<!-- Shaders -->
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
// #extension GL_OES_standard_derivatives : enable
uniform float iTime;
uniform vec2 iMouse;
uniform vec2 iResolution;
uniform sampler2D iChannel0;
vec2 GetGradient(vec2 intPos, float t) {
float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
float angle = 6.283185 * rand + 4.0 * t * rand;
return vec2(cos(angle), sin(angle));
}
float Pseudo3dNoise(vec3 pos) {
vec2 i = floor(pos.xy);
vec2 f = pos.xy - i;
vec2 blend = f * f * (3.0 -(2.0 * f));
float noiseVal =
mix(
mix(
dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
blend.x),
mix(
dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
blend.x),
blend.y
);
return noiseVal / 0.7;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
float time = (80.-(1.*uvm.y)) * sin(iTime / 30000.);
float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
float val = sin(noiseVal * time + (sin(time) * time / 10.));
fragColor.rgba = vec4(vec3(val), 1.0);
}
void main() {
mainImage(gl_FragColor, gl_FragCoord.xy);
}
</script>
<style>
body {
background-color: black;
}
.shaderhero {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#hecksshader {
position: absolute;
left: 0px;
top: 0px;
z-index: -100;
width: 100%;
height: 100%;
opacity: 0.9;
}
.shadercontainer {
position: relative;
}
.shadertitle {
position: absolute;
display: block;
padding: 10rem 0;
margin-left: auto;
margin-right: auto;
width: 75%;
opacity: 0.98;
z-index: -1;
}
.hidden_desktop{
visibility: visible;
display: block;
}
.hidden_mobile {
visibility: hidden;
display: none;
}
@media (min-width: 1000px) {
.hidden_desktop{
visibility: hidden;
display: none;
}
.hidden_mobile {
visibility: visible;
display: block;
}
}
#shadersoundsystem {
left: 0px;
top: 0px;
z-index: -50;
width: 100%;
opacity: 0.2
}
</style>
</head>
<body>
<audio autoplay>
<source src="./audio/SubfactoryClip_Faded2.wav">
</audio>
<div class="shaderhero">
<canvas id="hecksshader"></canvas>
<img src="./images/02_Sub_Factory_Facebook_Banner.jpg" class="shadertitle hidden_mobile">
<img src="./images/01_Sub_Factory_Flyer_A6_Web.jpg" class="shadertitle hidden_desktop">
</div>
<!--<img src="./images/soundsystem.svg" id="shadersoundsystem">-->
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
let camera, scene, renderer;
let uniforms;
let texture;
let downsample_quality = 1.;
init();
render();
function init() {
camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry( 2, 2 );
const loader = new THREE.TextureLoader();
const texture = loader.load('noise.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
uniforms = {
iTime: { value: 1.0 },
iResolution: { value: new THREE.Vector2(1.0,1.0) },
iMouse: { value: new THREE.Vector2(0.0,0.0) },
iChannel0: { value: texture },
};
const material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const canvas = document.querySelector('#hecksshader');
renderer = new THREE.WebGLRenderer({antialias: true, canvas});
document.addEventListener( 'pointermove', onPointerMove);
}
function onPointerMove(event) {
var clientX = event.clientX;
var clientY = event.clientY;
var mouseX = clientX;
var mouseY = 1 - clientY;
uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
}
function rendererNeedsResize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
return true;
}
function render() {
requestAnimationFrame( render );
if ( rendererNeedsResize(renderer)) {
const canvas = renderer.domElement;
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
}
uniforms[ 'iTime' ].value = performance.now();
renderer.render( scene, camera );
}
</script>
</body>
</html>