Raytracing Example

<!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 vec3 dimension;


   //determines if the position is inside the volume
    bool inside(vec3 posVec){
            bool value = false;

            if(posVec.x <0.0 ||posVec.x > dimension.x ){
                value = false;
            }
            else if(posVec.y <0.0 ||posVec.y > dimension.y ){
                value = false;
            }
            else if(posVec.z <0.0 ||posVec.z > dimension.z ){
                value = false;
         }
         else{
            value = true;
         }
         return value;
        }


    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 = PointPos- camera;
        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() {


        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;

    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>


        </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();


function init(){
 camera = new THREE.PerspectiveCamera( 60, browserWidth / browserHeight, 1, 500 );

        camera.position.z = 85;

        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)},


    };


    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 );

       shaderMaterial.uniforms[ 'camera' ].value = camera.position.clone();

      controls.update();

        renderer.render( scene, camera );


    }


</script>
</body>
</html>