diff --git a/public/index.js b/public/index.js index c5743c6..4b5ad61 100644 --- a/public/index.js +++ b/public/index.js @@ -1,6 +1,6 @@ function app(shaders) { const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 10); + const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 10); const renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); @@ -14,12 +14,22 @@ function app(shaders) { const controls = new THREE.OrbitControls(camera, renderer.domElement); + controls.minDistance = 1.1; + const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1.5, 1), new THREE.ShaderMaterial({ vertexShader: shaders[0], fragmentShader: shaders[1] })); - const testBox = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.75, 0.5), new THREE.MeshBasicMaterial({ color: 0x00FF00 })); + const testBox = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.75, 0.5), new THREE.ShaderMaterial({ + vertexShader: shaders[0], + fragmentShader: shaders[2], + uniforms: { + face: { + value: 1 + } + } + })); scene.add(box); scene.add(testBox); @@ -36,6 +46,6 @@ function app(shaders) { requestAnimationFrame(render); } -Promise.all([ fetch("/vertex.glsl"), fetch("/fragment.glsl") ]) // fetch both the shaders +Promise.all([ fetch("/vertex.glsl"), fetch("/outer_fragment.glsl"), fetch("/inner_fragment.glsl") ]) // fetch both the shaders .then(requests => Promise.all(requests.map(request => request.text()))) // convert the fetch responses to strings .then(app); \ No newline at end of file diff --git a/public/inner_fragment.glsl b/public/inner_fragment.glsl new file mode 100644 index 0000000..4a1e71e --- /dev/null +++ b/public/inner_fragment.glsl @@ -0,0 +1,50 @@ +in vec3 worldPosition; + +uniform int face; + +const vec2 corners[4] = vec2[](vec2(0.5, 0.5), vec2(-0.5, 0.5), vec2(-0.5, -0.5), vec2(0.5, -0.5)); + +bool ccw(vec2 A, vec2 B, vec2 C) { + return (C.y-A.y) * (B.x-A.x) > (B.y-A.y) * (C.x-A.x); +} + +bool intersect(vec2 A, vec2 B, vec2 C, vec2 D) { + return ccw(A,C,D) != ccw(B,C,D) && ccw(A,B,C) != ccw(A,B,D); +} + +void main() { + vec2 a = worldPosition.xz; + vec2 b = cameraPosition.xz; + + int intersectedFace = -1; + + for (int i = 0; i < 4; i++) { + int next = int(mod(float(i + 1), 4.0)); + + vec2 c = corners[i]; + vec2 d = corners[next]; + + if (intersect(a, b, c, d)) { + intersectedFace = i; + break; + } + } + + switch (intersectedFace) { + case -1: + gl_FragColor = vec4(1, 0, 1, 1); + break; + case 0: + gl_FragColor = vec4(1, 0, 0, 1); + break; + case 1: + gl_FragColor = vec4(0, 1, 0, 1); + break; + case 2: + gl_FragColor = vec4(0, 0, 1, 1); + break; + case 3: + gl_FragColor = vec4(0, 1, 1, 1); + break; + } +} \ No newline at end of file diff --git a/public/fragment.glsl b/public/outer_fragment.glsl similarity index 100% rename from public/fragment.glsl rename to public/outer_fragment.glsl