nraynaud · November 24, 2014 03:02
diff --git a/test_wireframe.html b/test_wireframe.html
 <!DOCTYPE html >
 <html>
 <head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Visual CAM</title>
    <script src="webapp/libs/require.js"></script>
    <script src="webapp/config.js"></script>
    <script>
        requirejs.config({
            baseUrl: 'webapp'
        });
    </script>
    <link rel="shortcut icon" href="webapp/images/icon_fraise_48.png"/>
    <link rel="stylesheet" href="webapp/twoDView.css" type="text/css">
    <link rel="stylesheet" href="webapp/threeDView.css" type="text/css">
    <link rel="stylesheet" href="webapp/libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="webapp/libs/font-awesome-4.2.0/css/font-awesome.min.css">
    <style>

        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #fafafa;
            color: #444;
        }

        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
        }

        canvas {
            flex: 1;
        }
    </style>
    <script>
        require(['jQuery', 'THREE', 'libs/threejs/STLLoader', 'libs/threejs/postprocessing/EffectComposer',
                    'libs/threejs/postprocessing/RenderPass', 'libs/threejs/postprocessing/ShaderPass',
                    'libs/threejs/OrbitControls', 'libs/threejs/postprocessing/CopyShader'],
                function ($, THREE, STLLoader, EffectComposer, RenderPass, ShaderPass, OrbitControls, CopyShader) {
                    var $container = $('body');
                    var renderer = new THREE.WebGLRenderer({antialias: false, alpha: true, precision: 'highp', autoClear: true});
                    $container.append(renderer.domElement);
                    var outputWidth = $container.width();
                    var outputHeight = $container.height();
                    renderer.sortObjects = false;
                    renderer.setSize(outputWidth, outputHeight);
                    renderer.setViewport(0, 0, outputWidth, outputHeight);
                    renderer.clear();
                    new STLLoader().load('webapp/samples/soap.stl', function (geometry) {
                        function draw() {
                            new TerrainPipeline(geometry);
                        }

                        window.draw = draw;
                        draw();
                    });

                    function TerrainPipeline(geometry) {
                        var scene = new THREE.Scene();
                        var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0xFEEFFE}));
                        //scene.add(mesh);
                        var pointsGeom = new THREE.BufferGeometry();
                        // we add the vertices to force webgl to raster on at least 1 pixel
                        // in case a "mountain" is spiky enough to slip thought the sampling grid.
                        pointsGeom.addAttribute('position', geometry.attributes.position.clone());
                        //scene.add(new THREE.PointCloud(pointsGeom));
                        // we should add all the edges too because a whole "ridge" might be sharp enough to slip through
                        // the raster grid but I have a problem where the end of some lines "poke" slightly through the surface
                        // I don't know why.
                        scene.add(new THREE.WireframeHelper(mesh));
                        mesh.geometry.computeBoundingBox();
                        var bbox = mesh.geometry.boundingBox;
                        var bboxSize = mesh.geometry.boundingBox.size();
                        var center = bbox.center();
                        var modelRatio = bboxSize.y / bboxSize.x;
                        var displaySideMm = 1 < modelRatio ? bboxSize.y : bboxSize.x;
                        var halfDisplaySide = displaySideMm / 2;
                        var camera = new THREE.OrthographicCamera(-halfDisplaySide, halfDisplaySide, halfDisplaySide, -halfDisplaySide, 1, 100);
                        scene.add(camera);
                        camera.position.x = center.x;
                        camera.position.y = center.y;
                        camera.position.z = bbox.max.z + 1;
                        camera.lookAt(center);
                        camera.far = bbox.max.z - bbox.min.z + 1;
                        console.log('near, far', camera.near, camera.far);
                        camera.updateProjectionMatrix();
                        var operation = {
                            sizeAttenuation: false,
                            linewidth: 10,
                            vertexShader: [
                                'void main() {',
                                '   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
                                '}'].join('\n'),
                            // depth encoding : http://aras-p.info/blog/2009/07/30/encoding-floats-to-rgba-the-final/
                            fragmentShader: [
                                'highp float factor = (exp2(24.0) - 1.0) / exp2(24.0);',
                                'vec3 EncodeFloatRGB(highp float v) {',
                                '   vec3 enc = fract(vec3(1.0, 255.0, 255.0 * 255.0) * factor * v);',
                                '   enc -= enc.yzz * vec3(1.0 / 255.0, 1.0 / 255.0, 0.0);',
                                '   return enc;',
                                '}',
                                'highp float DecodeFloatRGB(vec3 rgb) {',
                                '   return dot(rgb, vec3(1.0, 1.0 / 255.0, 1.0 / 255.0 / 255.0)) / factor;',
                                '}',
                                'void main() {',
                                '   gl_FragData[0] = vec4(EncodeFloatRGB(1.0 - gl_FragCoord.z).rg, 0.0, 1.0);',
                                '}'].join('\n')
                        };
                        scene.overrideMaterial = new THREE.ShaderMaterial(operation);
                        renderer.render(scene, camera);
                    }
                });
    </script>
 </head>
 <body>

 </body>

 </html>
	<!DOCTYPE html >
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Visual CAM</title>
	<script src="webapp/libs/require.js"></script>
	<script src="webapp/config.js"></script>
	<script>
	requirejs.config({
	baseUrl: 'webapp'
	});
	</script>
	<link rel="shortcut icon" href="webapp/images/icon_fraise_48.png"/>
	<link rel="stylesheet" href="webapp/twoDView.css" type="text/css">
	<link rel="stylesheet" href="webapp/threeDView.css" type="text/css">
	<link rel="stylesheet" href="webapp/libs/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="webapp/libs/font-awesome-4.2.0/css/font-awesome.min.css">
	<style>

	body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fafafa;
	color: #444;
	}

	body {
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	}

	canvas {
	flex: 1;
	}
	</style>
	<script>
	require(['jQuery', 'THREE', 'libs/threejs/STLLoader', 'libs/threejs/postprocessing/EffectComposer',
	'libs/threejs/postprocessing/RenderPass', 'libs/threejs/postprocessing/ShaderPass',
	'libs/threejs/OrbitControls', 'libs/threejs/postprocessing/CopyShader'],
	function ($, THREE, STLLoader, EffectComposer, RenderPass, ShaderPass, OrbitControls, CopyShader) {
	var $container = $('body');
	var renderer = new THREE.WebGLRenderer({antialias: false, alpha: true, precision: 'highp', autoClear: true});
	$container.append(renderer.domElement);
	var outputWidth = $container.width();
	var outputHeight = $container.height();
	renderer.sortObjects = false;
	renderer.setSize(outputWidth, outputHeight);
	renderer.setViewport(0, 0, outputWidth, outputHeight);
	renderer.clear();
	new STLLoader().load('webapp/samples/soap.stl', function (geometry) {
	function draw() {
	new TerrainPipeline(geometry);
	}

	window.draw = draw;
	draw();
	});

	function TerrainPipeline(geometry) {
	var scene = new THREE.Scene();
	var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0xFEEFFE}));
	//scene.add(mesh);
	var pointsGeom = new THREE.BufferGeometry();
	// we add the vertices to force webgl to raster on at least 1 pixel
	// in case a "mountain" is spiky enough to slip thought the sampling grid.
	pointsGeom.addAttribute('position', geometry.attributes.position.clone());
	//scene.add(new THREE.PointCloud(pointsGeom));
	// we should add all the edges too because a whole "ridge" might be sharp enough to slip through
	// the raster grid but I have a problem where the end of some lines "poke" slightly through the surface
	// I don't know why.
	scene.add(new THREE.WireframeHelper(mesh));
	mesh.geometry.computeBoundingBox();
	var bbox = mesh.geometry.boundingBox;
	var bboxSize = mesh.geometry.boundingBox.size();
	var center = bbox.center();
	var modelRatio = bboxSize.y / bboxSize.x;
	var displaySideMm = 1 < modelRatio ? bboxSize.y : bboxSize.x;
	var halfDisplaySide = displaySideMm / 2;
	var camera = new THREE.OrthographicCamera(-halfDisplaySide, halfDisplaySide, halfDisplaySide, -halfDisplaySide, 1, 100);
	scene.add(camera);
	camera.position.x = center.x;
	camera.position.y = center.y;
	camera.position.z = bbox.max.z + 1;
	camera.lookAt(center);
	camera.far = bbox.max.z - bbox.min.z + 1;
	console.log('near, far', camera.near, camera.far);
	camera.updateProjectionMatrix();
	var operation = {
	sizeAttenuation: false,
	linewidth: 10,
	vertexShader: [
	'void main() {',
	' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
	'}'].join('\n'),
	// depth encoding : http://aras-p.info/blog/2009/07/30/encoding-floats-to-rgba-the-final/
	fragmentShader: [
	'highp float factor = (exp2(24.0) - 1.0) / exp2(24.0);',
	'vec3 EncodeFloatRGB(highp float v) {',
	' vec3 enc = fract(vec3(1.0, 255.0, 255.0 * 255.0) * factor * v);',
	' enc -= enc.yzz * vec3(1.0 / 255.0, 1.0 / 255.0, 0.0);',
	' return enc;',
	'}',
	'highp float DecodeFloatRGB(vec3 rgb) {',
	' return dot(rgb, vec3(1.0, 1.0 / 255.0, 1.0 / 255.0 / 255.0)) / factor;',
	'}',
	'void main() {',
	' gl_FragData[0] = vec4(EncodeFloatRGB(1.0 - gl_FragCoord.z).rg, 0.0, 1.0);',
	'}'].join('\n')
	};
	scene.overrideMaterial = new THREE.ShaderMaterial(operation);
	renderer.render(scene, camera);
	}
	});
	</script>
	</head>
	<body>

	</body>

	</html>