You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
4.2 KiB
136 lines
4.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - shader [Monjori]</title>
|
|
<meta charset="utf-8">
|
|
<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">
|
|
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;// normalize to about [-1..1]
|
|
}
|
|
|
|
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
vec2 uv = fragCoord.xy / iResolution.y;
|
|
//period = iTime % 360;
|
|
|
|
float time = iTime;
|
|
vec2 uvm = iMouse.xy / iResolution.y;
|
|
float noiseVal = 0.5 + 0.5 * Pseudo3dNoise(vec3(uv *4.0, time/10.));
|
|
|
|
fragColor.rgb = vec3(sin(noiseVal * time + (sin(time) * time / 10.)));
|
|
}
|
|
|
|
void main() {
|
|
mainImage(gl_FragColor, gl_FragCoord.xy);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container"></div>
|
|
|
|
<script type="module">
|
|
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
|
|
|
|
let camera, scene, renderer;
|
|
let uniforms;
|
|
let texture;
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
const container = document.getElementById( 'container' );
|
|
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.minFilter = THREE.NearestFilter;
|
|
texture.magFilter = THREE.NearestFilter;
|
|
texture.wrapS = THREE.RepeatWrapping;
|
|
texture.wrapT = THREE.RepeatWrapping;
|
|
|
|
let quality = 1
|
|
uniforms = {
|
|
iTime: { value: 1.0 },
|
|
iResolution: { value: new THREE.Vector2( window.innerWidth / quality, window.innerHeight / quality ) },
|
|
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 );
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
container.appendChild( renderer.domElement );
|
|
onWindowResize();
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
document.addEventListener( 'pointermove', onPointerMove);
|
|
}
|
|
|
|
function onPointerMove(event) {
|
|
var clientX = event.clientX;
|
|
var clientY = event.clientY;
|
|
|
|
var mouseX = clientX / window.innerWidth;
|
|
var mouseY = 1 - clientY / window.innerHeight;
|
|
|
|
uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
|
|
}
|
|
|
|
function onWindowResize() {
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
}
|
|
|
|
|
|
function animate() {
|
|
requestAnimationFrame( animate );
|
|
uniforms[ 'iTime' ].value = performance.now() / 1000;
|
|
renderer.render( scene, camera );
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|