halibut.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, shrink-to-fit=0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <style>
        head, body{
            width:100%;
            height:100%;
            overflow: hidden;
            top:0;
            left:0;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
<script src="vendor/three.min.js"></script>
<script src="raymarcher.js"></script>

<script>

    var rm;
    function init() {

        rm = new RayMarcher();
        rm.loadFragmentShader("glsl/halibut.glsl", function (scope) {
            scope.setTexture( "map", "img/matcap.png" );
        } );
        document.body.appendChild( rm.domElement );

        rm.camera.position.set( 10, 18, -8 );

        window.addEventListener( "resize", onResize, false );
        onResize();
    }

    function onResize(e){

        rm.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {

        requestAnimationFrame( animate );

        var s = .01;
        rm.target.z += s;
        rm.camera.position.z += s;

        rm.update();
        rm.render();
    }

    init();
    animate();


</script>

</body>
</html>