Skip to content

Commit

Permalink
Examples: Simplified webgl_marchingcubes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Oct 28, 2021
1 parent dfec73d commit 296e07f
Showing 1 changed file with 34 additions and 152 deletions.
186 changes: 34 additions & 152 deletions examples/webgl_marchingcubes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
let effectController;

let time = 0;

const clock = new THREE.Clock();

init();
Expand Down Expand Up @@ -74,13 +75,13 @@
// MATERIALS

materials = generateMaterials();
current_material = "shiny";
current_material = 'shiny';

// MARCHING CUBES

resolution = 28;

effect = new MarchingCubes( resolution, materials[ current_material ].m, true, true );
effect = new MarchingCubes( resolution, materials[ current_material ], true, true, 100000 );
effect.position.set( 0, 0, 0 );
effect.scale.set( 700, 700, 700 );

Expand Down Expand Up @@ -133,7 +134,7 @@

// environment map

const path = "textures/cube/SwedishRoyalCastle/";
const path = 'textures/cube/SwedishRoyalCastle/';
const format = '.jpg';
const urls = [
path + 'px' + format, path + 'nx' + format,
Expand All @@ -154,77 +155,24 @@
const hatchingMaterial = createShaderMaterial( ToonShaderHatching, light, ambientLight );
const dottedMaterial = createShaderMaterial( ToonShaderDotted, light, ambientLight );

const texture = new THREE.TextureLoader().load( "textures/uv_grid_opengl.jpg" );
const texture = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

const materials = {

"chrome": {
m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
h: 0, s: 0, l: 1
},

"liquid": {
m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
h: 0, s: 0, l: 1
},

"shiny": {
m: new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
h: 0, s: 0.8, l: 0.2
},

"matte": {
m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
h: 0, s: 0, l: 1
},

"flat": {
m: new THREE.MeshLambertMaterial( { color: 0x000000 } ),
h: 0, s: 0, l: 1
},

"textured": {
m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
h: 0, s: 0, l: 1
},

"colors": {
m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: true } ),
h: 0, s: 0, l: 1
},

"multiColors": {
m: new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: true } ),
h: 0, s: 0, l: 1
},

"plastic": {
m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
h: 0.6, s: 0.8, l: 0.1
},

"toon1": {
m: toonMaterial1,
h: 0.2, s: 1, l: 0.75
},

"toon2": {
m: toonMaterial2,
h: 0.4, s: 1, l: 0.75
},

"hatching": {
m: hatchingMaterial,
h: 0.2, s: 1, l: 0.9
},

"dotted": {
m: dottedMaterial,
h: 0.2, s: 1, l: 0.9
}

'shiny': new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
'chrome': new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
'liquid': new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
'matte': new THREE.MeshPhongMaterial( { specular: 0x111111, shininess: 1 } ),
'flat': new THREE.MeshLambertMaterial( { /*TODO flatShading: true */ } ),
'textured': new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
'colors': new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: true } ),
'multiColors': new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: true } ),
'plastic': new THREE.MeshPhongMaterial( { specular: 0x888888, shininess: 250 } ),
'toon1': toonMaterial1,
'toon2': toonMaterial2,
'hatching': hatchingMaterial,
'dotted': dottedMaterial
};

return materials;
Expand All @@ -240,10 +188,10 @@

const material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );

material.uniforms[ "uDirLightPos" ].value = light.position;
material.uniforms[ "uDirLightColor" ].value = light.color;
material.uniforms[ 'uDirLightPos' ].value = light.position;
material.uniforms[ 'uDirLightColor' ].value = light.color;

material.uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
material.uniforms[ 'uAmbientLightColor' ].value = ambientLight.color;

return material;

Expand All @@ -257,30 +205,19 @@

return function () {

const mat_old = materials[ current_material ];
mat_old.h = m_h.getValue();
mat_old.s = m_s.getValue();
mat_old.l = m_l.getValue();

current_material = id;

const mat = materials[ id ];
effect.material = mat.m;

m_h.setValue( mat.h );
m_s.setValue( mat.s );
m_l.setValue( mat.l );

effect.enableUvs = ( current_material === "textured" ) ? true : false;
effect.enableColors = ( current_material === "colors" || current_material === "multiColors" ) ? true : false;
effect.material = materials[ id ];
effect.enableUvs = ( current_material === 'textured' ) ? true : false;
effect.enableColors = ( current_material === 'colors' || current_material === 'multiColors' ) ? true : false;

};

};

effectController = {

material: "shiny",
material: 'shiny',

speed: 1.0,
numBlobs: 10,
Expand All @@ -291,18 +228,6 @@
wallx: false,
wallz: false,

hue: 0.0,
saturation: 0.8,
lightness: 0.1,

lhue: 0.04,
lsaturation: 1.0,
llightness: 0.5,

lx: 0.5,
ly: 0.5,
lz: 1.0,

dummy: function () {}

};
Expand All @@ -313,7 +238,7 @@

// material (type)

h = gui.addFolder( "Materials" );
h = gui.addFolder( 'Materials' );

for ( const m in materials ) {

Expand All @@ -322,42 +247,18 @@

}

// material (color)

h = gui.addFolder( "Material color" );

const m_h = h.add( effectController, "hue", 0.0, 1.0, 0.025 );
const m_s = h.add( effectController, "saturation", 0.0, 1.0, 0.025 );
const m_l = h.add( effectController, "lightness", 0.0, 1.0, 0.025 );

// light (point)

h = gui.addFolder( "Point light color" );

h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" );
h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" );
h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" );

// light (directional)

h = gui.addFolder( "Directional light orientation" );

h.add( effectController, "lx", - 1.0, 1.0, 0.025 ).name( "x" );
h.add( effectController, "ly", - 1.0, 1.0, 0.025 ).name( "y" );
h.add( effectController, "lz", - 1.0, 1.0, 0.025 ).name( "z" );

// simulation

h = gui.addFolder( "Simulation" );
h = gui.addFolder( 'Simulation' );

h.add( effectController, "speed", 0.1, 8.0, 0.05 );
h.add( effectController, "numBlobs", 1, 50, 1 );
h.add( effectController, "resolution", 14, 100, 1 );
h.add( effectController, "isolation", 10, 300, 1 );
h.add( effectController, 'speed', 0.1, 8.0, 0.05 );
h.add( effectController, 'numBlobs', 1, 50, 1 );
h.add( effectController, 'resolution', 14, 100, 1 );
h.add( effectController, 'isolation', 10, 300, 1 );

h.add( effectController, "floor" );
h.add( effectController, "wallx" );
h.add( effectController, "wallz" );
h.add( effectController, 'floor' );
h.add( effectController, 'wallx' );
h.add( effectController, 'wallz' );

}

Expand Down Expand Up @@ -439,25 +340,6 @@

updateCubes( effect, time, effectController.numBlobs, effectController.floor, effectController.wallx, effectController.wallz );

// materials

if ( effect.material instanceof THREE.ShaderMaterial ) {

effect.material.uniforms[ "uBaseColor" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );

} else {

effect.material.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness );

}

// lights

light.position.set( effectController.lx, effectController.ly, effectController.lz );
light.position.normalize();

pointLight.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );

// render

renderer.render( scene, camera );
Expand Down

0 comments on commit 296e07f

Please sign in to comment.