|
@@ -35,9 +35,7 @@
|
|
|
|
|
|
<div id="container"></div>
|
|
|
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - curvature estimation of a geometry by <a href="http://codercat.club" target="_blank" rel="noopener">CoderCat</a></div>
|
|
|
- <div class="label" style="position: absolute;left: 20%;bottom: 10%;">Raw curvature values</div>
|
|
|
- <div class="label" style="position: absolute;left: 68%;bottom: 10%;">Curvature driving specular + texture </div>
|
|
|
-
|
|
|
+
|
|
|
<script src="../build/three.js"></script>
|
|
|
<script src="js/Detector.js"></script>
|
|
|
|
|
@@ -45,29 +43,6 @@
|
|
|
<script src="js/loaders/OBJLoader.js"></script>
|
|
|
<script src="js/libs/dat.gui.min.js"></script>
|
|
|
|
|
|
- <script id="vertexShader" type="x-shader/x-vertex">
|
|
|
-
|
|
|
- attribute float curvature;
|
|
|
-
|
|
|
- varying vec3 vPos;
|
|
|
- varying vec3 vNormal;
|
|
|
- varying vec3 vViewPosition;
|
|
|
- varying float vCurvature;
|
|
|
-
|
|
|
- void main() {
|
|
|
-
|
|
|
- vec3 p = position;
|
|
|
- vPos = p;
|
|
|
- vec4 modelViewPosition = modelViewMatrix * vec4( p , 1.0 );
|
|
|
- vViewPosition = -modelViewPosition.xyz;
|
|
|
- gl_Position = projectionMatrix * modelViewPosition;
|
|
|
- vNormal = normalMatrix * normal;
|
|
|
- vCurvature = curvature;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- </script>
|
|
|
-
|
|
|
<script id="vertexShaderRaw" type="x-shader/x-vertex">
|
|
|
|
|
|
attribute float curvature;
|
|
@@ -96,122 +71,15 @@
|
|
|
|
|
|
</script>
|
|
|
|
|
|
- <script id="fragmentShader" type="x-shader/x-fragment">
|
|
|
-
|
|
|
- varying vec3 vPos;
|
|
|
- varying vec3 vNormal;
|
|
|
- varying vec3 vViewPosition;
|
|
|
- varying float vCurvature;
|
|
|
-
|
|
|
- vec4 permute( vec4 x ){ return mod((( x * 34.0 ) + 1.0 ) * x, 289.0); }
|
|
|
- vec4 taylorInvSqrt( vec4 r ){ return 1.79284291400159 - 0.85373472095314 * r; }
|
|
|
- vec3 fade( vec3 t ) { return t * t * t * ( t * ( t * 6.0 - 15.0 ) + 10.0 ); }
|
|
|
-
|
|
|
- float cnoise( vec3 P ){
|
|
|
- vec3 Pi0 = floor( P ); // Integer part for indexing
|
|
|
- vec3 Pi1 = Pi0 + vec3( 1.0 ); // Integer part + 1
|
|
|
- Pi0 = mod( Pi0, 289.0 );
|
|
|
- Pi1 = mod( Pi1, 289.0 );
|
|
|
- vec3 Pf0 = fract( P ); // Fractional part for interpolation
|
|
|
- vec3 Pf1 = Pf0 - vec3( 1.0 ); // Fractional part - 1.0
|
|
|
- vec4 ix = vec4( Pi0.x, Pi1.x, Pi0.x, Pi1.x );
|
|
|
- vec4 iy = vec4( Pi0.yy, Pi1.yy );
|
|
|
- vec4 iz0 = Pi0.zzzz;
|
|
|
- vec4 iz1 = Pi1.zzzz;
|
|
|
-
|
|
|
- vec4 ixy = permute( permute( ix ) + iy );
|
|
|
- vec4 ixy0 = permute( ixy + iz0 );
|
|
|
- vec4 ixy1 = permute( ixy + iz1 );
|
|
|
-
|
|
|
- vec4 gx0 = ixy0 / 7.0;
|
|
|
- vec4 gy0 = fract( floor( gx0 ) / 7.0 ) - 0.5;
|
|
|
- gx0 = fract( gx0 );
|
|
|
- vec4 gz0 = vec4( 0.5 ) - abs( gx0 ) - abs( gy0 );
|
|
|
- vec4 sz0 = step( gz0, vec4( 0.0 ));
|
|
|
- gx0 -= sz0 * ( step( 0.0, gx0 ) - 0.5 );
|
|
|
- gy0 -= sz0 * ( step( 0.0, gy0 ) - 0.5 );
|
|
|
-
|
|
|
- vec4 gx1 = ixy1 / 7.0;
|
|
|
- vec4 gy1 = fract( floor( gx1 ) / 7.0 ) - 0.5;
|
|
|
- gx1 = fract( gx1 );
|
|
|
- vec4 gz1 = vec4( 0.5 ) - abs( gx1 ) - abs( gy1 );
|
|
|
- vec4 sz1 = step( gz1, vec4( 0.0 ) );
|
|
|
- gx1 -= sz1 * ( step( 0.0, gx1 ) - 0.5 );
|
|
|
- gy1 -= sz1 * ( step( 0.0, gy1 ) - 0.5 );
|
|
|
-
|
|
|
- vec3 g000 = vec3( gx0.x, gy0.x, gz0.x );
|
|
|
- vec3 g100 = vec3( gx0.y, gy0.y, gz0.y );
|
|
|
- vec3 g010 = vec3( gx0.z, gy0.z, gz0.z );
|
|
|
- vec3 g110 = vec3( gx0.w, gy0.w, gz0.w );
|
|
|
- vec3 g001 = vec3( gx1.x, gy1.x, gz1.x );
|
|
|
- vec3 g101 = vec3( gx1.y, gy1.y, gz1.y );
|
|
|
- vec3 g011 = vec3( gx1.z, gy1.z, gz1.z );
|
|
|
- vec3 g111 = vec3( gx1.w, gy1.w, gz1.w );
|
|
|
-
|
|
|
- vec4 norm0 = taylorInvSqrt( vec4( dot( g000, g000 ), dot( g010, g010 ), dot( g100, g100 ), dot( g110, g110 ) ) );
|
|
|
- g000 *= norm0.x;
|
|
|
- g010 *= norm0.y;
|
|
|
- g100 *= norm0.z;
|
|
|
- g110 *= norm0.w;
|
|
|
- vec4 norm1 = taylorInvSqrt( vec4( dot( g001, g001 ), dot( g011, g011 ), dot( g101, g101 ), dot( g111, g111 ) ) );
|
|
|
- g001 *= norm1.x;
|
|
|
- g011 *= norm1.y;
|
|
|
- g101 *= norm1.z;
|
|
|
- g111 *= norm1.w;
|
|
|
-
|
|
|
- float n000 = dot( g000, Pf0 );
|
|
|
- float n100 = dot( g100, vec3( Pf1.x, Pf0.yz ) );
|
|
|
- float n010 = dot( g010, vec3( Pf0.x, Pf1.y, Pf0.z ) );
|
|
|
- float n110 = dot( g110, vec3( Pf1.xy, Pf0.z ) );
|
|
|
- float n001 = dot( g001, vec3( Pf0.xy, Pf1.z ) );
|
|
|
- float n101 = dot( g101, vec3( Pf1.x, Pf0.y, Pf1.z ) );
|
|
|
- float n011 = dot( g011, vec3( Pf0.x, Pf1.yz ) );
|
|
|
- float n111 = dot( g111, Pf1);
|
|
|
-
|
|
|
- vec3 fade_xyz = fade( Pf0 );
|
|
|
- vec4 n_z = mix( vec4( n000, n100, n010, n110 ), vec4( n001, n101, n011, n111 ), fade_xyz.z );
|
|
|
- vec2 n_yz = mix( n_z.xy, n_z.zw, fade_xyz.y );
|
|
|
- float n_xyz = mix( n_yz.x, n_yz.y, fade_xyz.x );
|
|
|
- return 2.2 * n_xyz;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- void main() {
|
|
|
- vec3 V = vViewPosition; //view vector
|
|
|
- vec3 N = vNormal; //normal vector
|
|
|
- vec3 L = vec3( 50.0, 22.0, 50.0 ); //imaginary light
|
|
|
- vec3 R = reflect( -L, N ); //reflection from light
|
|
|
-
|
|
|
- //specular coefficient
|
|
|
- float spec = vCurvature * vCurvature * max( 0.0, dot( R, normalize( V ) ) / 5.0 );
|
|
|
- vec4 specColor = vec4( 1.0, 1.0, 1.0, 1.0 );
|
|
|
-
|
|
|
- //calculate noise coefficient
|
|
|
- float x = cnoise( 10.0 * vPos );
|
|
|
- vec4 diffuseColor = vec4(x, x, x, 1.0 );
|
|
|
- float diffuse = pow( vCurvature , 2.0 );
|
|
|
-
|
|
|
- if ( spec < 0.1 ) diffuse = 0.0;
|
|
|
- diffuseColor.xyz = diffuse * diffuseColor.xyz;
|
|
|
-
|
|
|
- gl_FragColor = spec * specColor + diffuseColor;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- </script>
|
|
|
-
|
|
|
<script>
|
|
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
|
|
var container;
|
|
|
|
|
|
- var camera, scene, sceneLeft, renderer;
|
|
|
-
|
|
|
- var ninjaMesh, curvatureAttribute;
|
|
|
+ var camera, scene, renderer;
|
|
|
|
|
|
- var windowHalfX = window.innerWidth / 2;
|
|
|
- var windowHalfY = window.innerHeight / 2;
|
|
|
+ var ninjaMeshRaw, curvatureAttribute;
|
|
|
|
|
|
init();
|
|
|
animate();
|
|
@@ -276,10 +144,9 @@
|
|
|
//initialize the scene
|
|
|
function init() {
|
|
|
|
|
|
- sceneRight = new THREE.Scene();
|
|
|
- sceneLeft = new THREE.Scene();
|
|
|
+ scene = new THREE.Scene();
|
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 75, windowHalfX / window.innerHeight, 0.1, 1000 );
|
|
|
+ camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
|
|
|
|
|
camera.position.x = -23;
|
|
|
camera.position.y = 2;
|
|
@@ -421,15 +288,6 @@
|
|
|
var curvatureFiltered = new Float32Array( curvatureAttribute );
|
|
|
filterBoth(curvatureFiltered);
|
|
|
|
|
|
- var material = new THREE.ShaderMaterial ({
|
|
|
-
|
|
|
- vertexShader: document.getElementById( 'vertexShader' ).textContent,
|
|
|
- fragmentShader: document.getElementById( 'fragmentShader' ).textContent
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- ninjaMesh = new THREE.Mesh( bufferGeo, material );
|
|
|
-
|
|
|
var materialRaw = new THREE.ShaderMaterial ({
|
|
|
|
|
|
vertexShader: document.getElementById( 'vertexShaderRaw' ).textContent,
|
|
@@ -441,18 +299,15 @@
|
|
|
|
|
|
}
|
|
|
} );
|
|
|
- sceneRight.add( ninjaMesh );
|
|
|
- sceneLeft.add( ninjaMeshRaw );
|
|
|
- render();
|
|
|
- bufferGeo.attributes.curvature.needsUpdate = true;
|
|
|
- render();
|
|
|
- bufferGeo.attributes.curvature.needsUpdate = true;
|
|
|
+
|
|
|
+ scene.add( ninjaMeshRaw );
|
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
|
//init GUI
|
|
|
var params = {
|
|
|
+
|
|
|
filterConvex: function () {
|
|
|
|
|
|
var curvatureFiltered = new Float32Array( curvatureAttribute );
|
|
@@ -498,8 +353,7 @@
|
|
|
function onWindowResize( event ) {
|
|
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- windowHalfX = window.innerWidth / 2;
|
|
|
- camera.aspect = windowHalfX / window.innerHeight;
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
camera.updateProjectionMatrix();
|
|
|
|
|
|
}
|
|
@@ -514,13 +368,7 @@
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
- renderer.clear();
|
|
|
- renderer.setViewport( windowHalfX, 0, windowHalfX, window.innerHeight );
|
|
|
- renderer.render(sceneRight, camera);
|
|
|
-
|
|
|
- renderer.clearDepth();
|
|
|
- renderer.setViewport( 0, 0, windowHalfX, window.innerHeight );
|
|
|
- renderer.render(sceneLeft, camera);
|
|
|
+ renderer.render(scene, camera);
|
|
|
|
|
|
}
|
|
|
|