|
@@ -45,9 +45,9 @@
|
|
|
|
|
|
precision highp float;
|
|
precision highp float;
|
|
|
|
|
|
- uniform float time;
|
|
|
|
uniform vec2 resolution;
|
|
uniform vec2 resolution;
|
|
- uniform vec2 mouse;
|
|
|
|
|
|
+ uniform vec3 cameraPos;
|
|
|
|
+ uniform vec3 cameraDir;
|
|
|
|
|
|
const float EPS = 0.01;
|
|
const float EPS = 0.01;
|
|
const float OFFSET = EPS * 100.0;
|
|
const float OFFSET = EPS * 100.0;
|
|
@@ -201,8 +201,8 @@
|
|
vec2 p = ( gl_FragCoord.xy * 2.0 - resolution ) / min( resolution.x, resolution.y );
|
|
vec2 p = ( gl_FragCoord.xy * 2.0 - resolution ) / min( resolution.x, resolution.y );
|
|
|
|
|
|
// camera and ray
|
|
// camera and ray
|
|
- vec3 cPos = vec3( mouse.x - 0.5, mouse.y * 4.0 - 0.2, time );
|
|
|
|
- vec3 cDir = normalize( vec3( 0.0, -0.3, 1.0 ) );
|
|
|
|
|
|
+ vec3 cPos = cameraPos;
|
|
|
|
+ vec3 cDir = cameraDir;
|
|
vec3 cUp = cross( cDir, vec3( 1.0, 0.0 ,0.0 ) );
|
|
vec3 cUp = cross( cDir, vec3( 1.0, 0.0 ,0.0 ) );
|
|
vec3 cSide = cross( cDir, cUp );
|
|
vec3 cSide = cross( cDir, cUp );
|
|
float targetDepth = 1.3;
|
|
float targetDepth = 1.3;
|
|
@@ -273,13 +273,14 @@
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
camera = new THREE.Camera();
|
|
camera = new THREE.Camera();
|
|
|
|
+ camera.lookAt( new THREE.Vector3( 0.0, -0.3, 1.0 ) );
|
|
|
|
|
|
geometry = new THREE.PlaneBufferGeometry( 2.0, 2.0 );
|
|
geometry = new THREE.PlaneBufferGeometry( 2.0, 2.0 );
|
|
material = new THREE.RawShaderMaterial( {
|
|
material = new THREE.RawShaderMaterial( {
|
|
uniforms: {
|
|
uniforms: {
|
|
- time: { type: 'f', value: 0.0 },
|
|
|
|
resolution: { type: 'v2', value: new THREE.Vector2( 512, 512 ) },
|
|
resolution: { type: 'v2', value: new THREE.Vector2( 512, 512 ) },
|
|
- mouse: { type: 'v2', value: mouse },
|
|
|
|
|
|
+ cameraPos: { type: 'v3', value: camera.getWorldPosition() },
|
|
|
|
+ cameraDir: { type: 'v3', value: camera.getWorldDirection() },
|
|
},
|
|
},
|
|
vertexShader: document.getElementById( 'vertex_shader' ).textContent,
|
|
vertexShader: document.getElementById( 'vertex_shader' ).textContent,
|
|
fragmentShader: document.getElementById( 'fragment_shader' ).textContent
|
|
fragmentShader: document.getElementById( 'fragment_shader' ).textContent
|
|
@@ -319,9 +320,11 @@
|
|
|
|
|
|
stats.begin();
|
|
stats.begin();
|
|
|
|
|
|
- material.uniforms.time.value = timestamp * 0.001;
|
|
|
|
|
|
+ camera.position.set( mouse.x - 0.5, mouse.y * 4, timestamp * 0.001 );
|
|
|
|
+
|
|
material.uniforms.resolution.value = new THREE.Vector2( canvas.width, canvas.height );
|
|
material.uniforms.resolution.value = new THREE.Vector2( canvas.width, canvas.height );
|
|
- material.uniforms.mouse.value = mouse;
|
|
|
|
|
|
+ material.uniforms.cameraPos.value = camera.getWorldPosition();
|
|
|
|
+ material.uniforms.cameraDir.value = camera.getWorldDirection();
|
|
renderer.render( scene, camera );
|
|
renderer.render( scene, camera );
|
|
|
|
|
|
stats.end();
|
|
stats.end();
|