heck
7 months ago
commit
01855b4b5d
2 changed files with 139 additions and 0 deletions
@ -0,0 +1,139 @@ |
|||||
|
<!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"> |
||||
|
#ifdef GL_FRAGMENT_PRECISION_HIGH |
||||
|
precision highp float; |
||||
|
#else |
||||
|
precision mediump float; |
||||
|
#endif |
||||
|
|
||||
|
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; |
||||
|
|
||||
|
float time = iTime * (iTime * 0.1); |
||||
|
vec2 uvm = iMouse.xy / iResolution.y; |
||||
|
float noiseVal = 0.5 + 0.5 * Pseudo3dNoise(vec3(uv *6.0, time/10.)); |
||||
|
|
||||
|
fragColor.rgb = vec3( 0.8+ 0.2*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.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() { |
||||
|
window.requestAnimationFrame( animate ); |
||||
|
uniforms[ 'iTime' ].value = performance.now() / 1000; |
||||
|
renderer.render( scene, camera ); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
|
After Width: | Height: | Size: 9.0 KiB |
Loading…
Reference in new issue