You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

145 lines
4.1 KiB

6 months ago
/**
* @author santiago / @glitch_life
* wrapper of https://www.npmjs.com/package/isosurface by https://github.com/mikolalysenko
*
* Returns BufferGeometry from SDF
*/
import {
BufferAttribute,
BufferGeometry,
FloatType,
Mesh,
OrthographicCamera,
PlaneGeometry,
Scene,
ShaderMaterial,
Vector2,
WebGLRenderTarget
} from 'three';
import { surfaceNet } from './../libs/surfaceNet.js';
class SDFGeometryGenerator {
constructor( renderer ) {
this.renderer = renderer;
}
generate( res = 64, distFunc = 'float dist( vec3 p ){ return length(p) - 0.5; }', bounds = 1 ) {
let w, h;
if ( res == 8 ) [ w, h ] = [ 32, 16 ];
else if ( res == 16 ) [ w, h ] = [ 64, 64 ];
else if ( res == 32 ) [ w, h ] = [ 256, 128 ];
else if ( res == 64 ) [ w, h ] = [ 512, 512 ];
else if ( res == 128 ) [ w, h ] = [ 2048, 1024 ];
else if ( res == 256 ) [ w, h ] = [ 4096, 4096 ];
else if ( res == 512 ) [ w, h ] = [ 16384, 8096 ];
else if ( res == 1024 ) [ w, h ] = [ 32768, 32768 ];
else throw new Error( 'THREE.SDFGeometryGenerator: Resolution must be in range 8 < res < 1024 and must be ^2' );
const maxTexSize = this.renderer.capabilities.maxTextureSize;
if ( w > maxTexSize || h > maxTexSize ) throw new Error( 'THREE.SDFGeometryGenerator: Your device does not support this resolution ( ' + res + ' ), decrease [res] param.' );
const [ tilesX, tilesY ] = [ ( w / res ), ( h / res ) ];
const sdfCompute = `
varying vec2 vUv;
uniform float tileNum;
uniform float bounds;
[#dist#]
void main() { gl_FragColor=vec4( ( dist( vec3( vUv, tileNum ) * 2.0 * bounds - vec3( bounds ) ) < 0.00001 ) ? 1.0 : 0.0 ); }
`;
const sdfRT = this.computeSDF( w, h, tilesX, tilesY, bounds, sdfCompute.replace( '[#dist#]', distFunc ) );
const read = new Float32Array( w * h * 4 );
this.renderer.readRenderTargetPixels( sdfRT, 0, 0, w, h, read );
sdfRT.dispose();
//
const mesh = surfaceNet( [ res, res, res ], ( x, y, z ) => {
x = ( x + bounds ) * ( res / ( bounds * 2 ) );
y = ( y + bounds ) * ( res / ( bounds * 2 ) );
z = ( z + bounds ) * ( res / ( bounds * 2 ) );
let p = ( x + ( z % tilesX ) * res ) + y * w + ( Math.floor( z / tilesX ) * res * w );
p *= 4;
return ( read[ p + 3 ] > 0 ) ? - 0.000000001 : 1;
}, [[ - bounds, - bounds, - bounds ], [ bounds, bounds, bounds ]] );
const ps = [], ids = [];
const geometry = new BufferGeometry();
mesh.positions.forEach( p => {
ps.push( p[ 0 ], p[ 1 ], p[ 2 ] );
} );
mesh.cells.forEach( p => ids.push( p[ 0 ], p[ 1 ], p[ 2 ] ) );
geometry.setAttribute( 'position', new BufferAttribute( new Float32Array( ps ), 3 ) );
geometry.setIndex( ids );
return geometry;
}
computeSDF( width, height, tilesX, tilesY, bounds, shader ) {
const rt = new WebGLRenderTarget( width, height, { type: FloatType } );
const scn = new Scene();
const cam = new OrthographicCamera();
const tiles = tilesX * tilesY;
let currentTile = 0;
Object.assign( cam, { left: width / - 2, right: width / 2, top: height / 2, bottom: height / - 2 } ).updateProjectionMatrix();
cam.position.z = 2;
const tileSize = width / tilesX;
const geometry = new PlaneGeometry( tileSize, tileSize );
while ( currentTile ++ < tiles ) {
const c = currentTile - 1;
const [ px, py ] = [ ( tileSize ) / 2 + ( c % tilesX ) * ( tileSize ) - width / 2, ( tileSize ) / 2 + Math.floor( c / tilesX ) * ( tileSize ) - height / 2 ];
const compPlane = new Mesh( geometry, new ShaderMaterial( {
uniforms: {
res: { value: new Vector2( width, height ) },
tileNum: { value: c / ( tilesX * tilesY - 1 ) },
bounds: { value: bounds }
},
vertexShader: 'varying vec2 vUv;void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}',
fragmentShader: shader
} ) );
compPlane.position.set( px, py, 0 );
scn.add( compPlane );
}
this.renderer.setRenderTarget( rt );
this.renderer.render( scn, cam );
this.renderer.setRenderTarget( null );
//
geometry.dispose();
scn.traverse( function ( object ) {
if ( object.material !== undefined ) object.material.dispose();
} );
return rt;
}
}
export { SDFGeometryGenerator };