Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ray Tracing Example</title>
- <style>
- html{
- background: white;
- }
- body{
- background: white;
- position: relative;
- margin: 0 auto;
- }
- #viewport{
- width: 100%;
- height: 100%;
- }
- </style>
- <script type="x-shader/x-vertex" id="vertexshader">
- #define STEPS 50
- varying float PointIntensity;
- uniform vec3 camera;
- uniform mat4 inverseProjectionMatrix;
- uniform vec3 dimension;
- varying vec2 vUv;
- //determines if the position is inside the volume
- bool inside(vec3 posVec){
- bool value = false;
- if(posVec.x <0.0 ||posVec.x > 41.0 ){
- value = false;
- }
- else if(posVec.y <0.0 ||posVec.y > 41.0 ){
- value = false;
- }
- else if(posVec.z <0.0 ||posVec.z > 41.0 ){
- value = false;
- }
- else{
- value = true;
- }
- return value;
- }
- vec3 unproject( vec2 coord ){
- vec4 screen = vec4( coord, 0, 1.0 );
- mat4 uInvMVProjMatrix = modelViewMatrix *inverseProjectionMatrix;
- vec4 homogenous = uInvMVProjMatrix * 2.0 * ( screen - vec4( 0.5 ) );
- return homogenous.xyz / homogenous.w;
- }
- float getDensity(vec3 PointPos){
- float stepsize = 1.0;
- float emptyStep = 15.0;
- vec3 leap;
- bool hit = false;
- float density = 0.000;
- // Ray direction from the camera through the current point in the Plane
- vec3 dir = unproject(uv);
- vec3 RayDirection = normalize(dir);
- vec3 start = PointPos;
- for(int i = 0; i<STEPS; i++){
- vec3 alteredPosition = start;
- alteredPosition.x += 20.5;
- alteredPosition.y += 20.5;
- alteredPosition.z += 20.5;
- bool insideTest = inside(alteredPosition);
- if(insideTest){
- // advance from the start position
- start = start + RayDirection * stepsize;
- hit = true;
- }else{
- leap = start + RayDirection * emptyStep;
- bool tooFar = inside(leap);
- if(tooFar){
- start = start + RayDirection * stepsize;
- }else{
- start = leap;
- }
- }
- }
- if(hit){
- density = 1.000;
- }
- return density;
- }
- void main() {
- vUv = uv;
- PointIntensity = getDensity(position);
- vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
- gl_Position = projectionMatrix * mvPosition;
- }
- </script>
- <script type="x-shader/x-fragment" id="fragmentshader">
- varying float PointIntensity;
- varying vec2 vUv;
- void main() {
- //Rays that have traversed the volume (cube) should leave a red point on the viewplane, Rays that just went through empty space a black point
- gl_FragColor= vec4(PointIntensity,0.0, 0.0, 1.0);
- }
- </script>
- <script src="ressources/three.min.js"></script>
- <script src="ressources/TrackballControls.js"></script>
- <script src="ressources/jquery-2.0.3.min.js"></script>
- <script src="ressources/keys.js"></script>
- </head>
- <body>
- <canvas id="viewport" style=" position: relative;">
- </canvas>
- <script>
- //Dimensions of the volume (cube)
- var xDimension = 41.0;
- var yDimension = 41.0;
- var zDimension = 41.0;
- var browserWidth = window.innerWidth;
- var browserHeight = window.innerHeight;
- $('#viewport').height(browserHeight);
- $('#viewport').width(browserWidth);
- var camera, renderer, scene, Mesh, shaderMaterial;
- init();
- $('body').keydown(function(event) {
- var keycode = event.which;
- handleKeyEvent(keycode);
- });
- function init(){
- camera = new THREE.PerspectiveCamera( 60, browserWidth / browserHeight, 1, 500 );
- camera.position.z = 75;
- camera.lookAt(new THREE.Vector3(0,0,0));
- scene = new THREE.Scene();
- scene.fog = new THREE.Fog( 0x777777, 1, 500 );
- uniforms = {
- camera: {type: "v3", value: camera.position},
- dimension: {type: "v3", value: new THREE.Vector3(xDimension, yDimension, zDimension)},
- inverseProjectionMatrix: { type: "m4", value: camera.projectionMatrixInverse }
- };
- shaderMaterial = new THREE.ShaderMaterial( {
- uniforms: uniforms,
- vertexShader: document.getElementById( 'vertexshader' ).textContent,
- fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
- transparent: false,
- wireframe: false
- });
- shaderMaterial.needsUpdate = true,
- viewplane = new THREE.PlaneGeometry(60, 60, 250, 250);
- Mesh = new THREE.Mesh(viewplane, shaderMaterial);
- Mesh.position.z = -55;
- camera.add(Mesh);
- scene.add(camera);
- renderer = new THREE.WebGLRenderer({canvas: viewport});
- renderer.setClearColor( scene.fog.color, 1 );
- renderer.setSize( browserWidth, browserHeight );
- controls = new THREE.TrackballControls(camera);
- controls.target.set( 0, 0,0);
- controls.rotateSpeed = 0.4;
- controls.zoomSpeed = 1.2;
- controls.panSpeed = 0.4;
- controls.noZoom = false;
- controls.noPan = false;
- controls.staticMoving = true;
- controls.dynamicDampingFactor = 0.10;
- controls.keys = [ 65, 83, 68 ];
- animate();
- }
- function animate() {
- requestAnimationFrame( animate );
- uniforms.inverseProjectionMatrix.value = camera.projectionMatrixInverse;
- shaderMaterial.uniforms[ 'camera' ].value = camera.position.clone();
- controls.update();
- renderer.render( scene, camera );
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement