metaShader

metaball test

by sjpt

HTML

<head>
</head>

<body>
        <div style="z-index:999; position:absolute; left: 0em; background-color: white; opacity: 80%; overflow: auto">
            <div id=msg></div>
            <div id=perfmsg></div>
            <br>
            exp<input type="radio" name="ff" onclick="funtype=2" checked="1"></button>
            cubic<input type="radio" name="ff" onclick="funtype=0"></button>
            square<input type="radio" name="ff" onclick="funtype=1"></button>
            <br>
            rad<input type="range" min="0.001" max="0.5" value="0.1" step="0.001"
                oninput="X.rad=this.value"/>
            <br>
            radInf<input type="range" min="1.01" max="4" value="1.5" step="0.001"
                oninput="X.radInfluence=this.value"/>
            <br>
            speed<input type="range" min="0" max="10" value="0" step="0.1"
                oninput="X.timek=20000/this.value"/>
            <br>
            spatdiv<input type="range" min="1" max="50" value="25" step="1"
                oninput="X.spatdiv=this.value"/>
            <br>
            <!-- expradinf<input type="range" min="0" max="8" value="1" step="0.001"
                oninput="expradinf=this.value"/>
            <br>
            -->
            spatial<input type="checkbox" checked="1" onclick="renders.spat = +!!this.checked"></button>
            fill<input type="checkbox" checked="1" onclick="renders.fill = +!!this.checked"></button>
            box<input type="checkbox" checked="1" onclick="renders.box = +!!this.checked"></button>
            <br>
            shade<input type="checkbox" checked="1" onclick="doshade=this.checked"></button>
            wire<input type="checkbox" onclick="dowire=this.checked"></button>
            points<input type="checkbox" onclick="dopoints=this.checked"></button>
            trivmarch<input type="checkbox" onclick="trivmarch=this.checked"></button>
            instancing<input type="checkbox" onclick="instancing=this.checked"...

CSS

input[type="range"] {width: 15em}

JavaScript

import * as THREE from "https://programbits.co.uk/three/three.module.js";
import { TrackballControls } from "https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/TrackballControls.js";
import * as Stats from "https://rawgit.com/mrdoob/three.js/dev/examples/jsm/libs/stats.module.js";

/**
 * Derived from MarchingCubes.js
* This version modified to do complete work on GPU sjpt 8 May 2020 to 19 May 2020
*
* works in four passes
*  1: spat: use a course grid and deciding which spheres are 'active' within each course voxel (output spatrt)
*  2: fill: compute the potential function at every point on the full grid (using spatrt for optimization)
*  3: box: for each voxel compute its marching cubes 'key'
*  4: march: run marching cubes on the voxels, up to 5 triangles, 15 vertices per voxel

 ***/
 var X = window.X = {
 	radInfluence: 1.5,
    rad: 0.1,          // radius of spheres
    timek: Infinity,
    spatdiv: 25        // numnber of spat phase subdivisions if equal for x,y,z
 }


var camera, renderer, canvas, framenum = 0, location, THREESingleChannelFormat, code, scene, controls,
Gldebug,// general
    stats,			    // for marching phase
    isol = 1,           // marching cubes isolation level
    expradinf = 2,      // radinf for exp code
    xnum = 100, ynum, znum,     // numbers for voxel boundary count (ynum and znum default to xnum)
    // edgeTable,       // unused table for edges
    triTable,           // table to drive mc
    span = 0.1,         // span of items for spatial check
    funtype = 2,        // 0 cubic, 1 quadratic, 2 exp
    n = 1000,           // number of particles
    controls,           // for interaction
    spatdivs,           // number of spat phase subdivisions, separate vec3 for x,y,z
    doshade = true,     // control final shading phase
    dowire = false,     // control final wireframe phase
    dopoints = false,   // control final points phase
    trywebgl2 = true,   // set to trye to use webgl2
    isWebGL2,          ...