70 lines
1.6 KiB
JavaScript
70 lines
1.6 KiB
JavaScript
/*
|
|
* SHADER SESSION WITH FLOPINE
|
|
* JUNE 2021
|
|
*
|
|
* Flopine:
|
|
* https://twitter.com/FlopineYeah
|
|
* https://www.instagram.com/flopine_makes_shaders/
|
|
*
|
|
* We're curiouslyminded (eliza & ilithya):
|
|
* https://www.curiouslyminded.xyz
|
|
* https://www.twitch.tv/curiouslyminded
|
|
* https://www.youtube.com/curiouslyminded
|
|
*
|
|
*/
|
|
|
|
let camera, scene, renderer, clock;
|
|
let uniforms;
|
|
|
|
function init() {
|
|
const container = document.getElementById("shadercollab");
|
|
|
|
clock = new THREE.Clock();
|
|
camera = new THREE.Camera();
|
|
camera.position.z = 1;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
const geometry = new THREE.PlaneBufferGeometry(2, 2);
|
|
|
|
uniforms = {
|
|
u_time: { type: "f", value: 1.0 },
|
|
u_resolution: { type: "v2", value: new THREE.Vector2() },
|
|
};
|
|
|
|
const material = new THREE.ShaderMaterial({
|
|
uniforms,
|
|
vertexShader: document.getElementById("vertex").textContent,
|
|
fragmentShader: document.getElementById("fragment").textContent
|
|
});
|
|
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
scene.add(mesh);
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
|
container.appendChild(renderer.domElement);
|
|
|
|
onWindowResize();
|
|
window.addEventListener("resize", onWindowResize);
|
|
}
|
|
|
|
function onWindowResize() {
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
uniforms.u_resolution.value.x = renderer.domElement.width;
|
|
uniforms.u_resolution.value.y = renderer.domElement.height;
|
|
}
|
|
|
|
function render() {
|
|
uniforms.u_time.value = clock.getElapsedTime();
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function animate() {
|
|
render();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
init();
|
|
animate(); |