<p>just as the title says, I'd like to experiment with 3D surfaces which are defined by implicit functions.</p>
<p>For instance, let's say I have an implicit curve of the form x^2 + y^2 + z^2 = 50^2, where &quot;50&quot; is the &quot;radius&quot;. You might recognize this as a sphere, but that's not the point. How can I tell javascript to look through and find all points in 3D space in a region that satisfy this equation, and then render them as a solid mesh or with shader?</p>
<p>This is the almost-default code I'm using that js-fiddle loads for me:</p>
<pre><code>import { OrbitControls } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;
init();
animate();

//3D implicit functions

//end of 3D implicit functions


function init() {

    const upButton = document.createElement('button');
upButton.textContent = '↑';
const downButton = document.createElement('button');
downButton.textContent = '↓';
const leftButton = document.createElement('button');
leftButton.textContent = '←';
const rightButton = document.createElement('button');
rightButton.textContent = '→';

// Add buttons to the document body
document.body.appendChild(upButton);
document.body.appendChild(downButton);
document.body.appendChild(leftButton);
document.body.appendChild(rightButton);   


// Event listeners for button clicks
const speed = 0.05; // Adjust movement speed as needed

upButton.addEventListener('click', () =&gt; {
  mesh.position.y += speed;
});

downButton.addEventListener('click', () =&gt; {
  mesh.position.y -= speed;
});

leftButton.addEventListener('click', () =&gt; {
  mesh.position.x -= speed;
});

rightButton.addEventListener('click', () =&gt; {
  mesh.position.x += speed;
});

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
        
        const controls = new OrbitControls( camera, renderer.domElement );
        controls.minDistance = 0.5;
        controls.maxDistance = 5;
    


}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}
</code></pre>

CC BY-SA 4.0
2024-08-07T18:29:10.317Z
The common method is called Marching Cubes.
Yves Daoust
CC BY-SA 4.0
2024-08-08T16:12:18.113Z
Hmm, well, marching cubes doesn't look "smooth", are there alternatives to just color and project the pixels, or anything in the three.js library that might make rendering this more efficient, and with anti-aliasing applied?
QuestionsA
CC BY-SA 4.0
2024-08-08T16:15:48.443Z
Marching cubes is as smooth as you want by refining the grid. You can even improve the smoothness by computing the true surface normals at the vertices.
Yves Daoust
CC BY-SA 4.0
2024-08-09T23:49:22.527Z
Marching Cubes works well for implicit functions. You can make it even smoother by finding the vertices via half step approximation — you home in on the vertex location by taking smaller and smaller steps. Also note that when using floats that cracks will form if you do not sort the input vertices.
shawn_halayka
CC BY-SA 4.0
2024-08-09T23:52:27.807Z
… and you do not simply say that a pixel/voxel is either on or off, you use the actual value calculated by the implicit function. Then you set the isosurface’s isovalue to suit your taste. Do you know the basics of fractal geometry?
shawn_halayka
<shader><mathematics><mesh><javascript>
How can I render implicit equations in JavaScript on JSFiddle (which imports three.js)?
QuestionsA
# How can I render implicit equations in JavaScript on JSFiddle (which imports three.js)?

(Asked by: username_0 on 2024-08-07)

just as the title says, I'd like to experiment with 3D surfaces which are defined by implicit functions.

For instance, let's say I have an implicit curve of the form x^2 + y^2 + z^2 = 50^2, where "50" is the "radius". You might recognize this as a sphere, but that's not the point. How can I tell javascript to look through and find all points in 3D space in a region that satisfy this equation, and then render them as a solid mesh or with shader?

This is the almost-default code I'm using that js-fiddle loads for me:

```
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;
init();
animate();

//3D implicit functions

//end of 3D implicit functions

function init() {

    const upButton = document.createElement('button');
upButton.textContent = '↑';
const downButton = document.createElement('button');
downButton.textContent = '↓';
const leftButton = document.createElement('button');
leftButton.textContent = '←';
const rightButton = document.createElement('button');
rightButton.textContent = '→';

// Add buttons to the document body
document.body.appendChild(upButton);
document.body.appendChild(downButton);
document.body.appendChild(leftButton);
document.body.appendChild(rightButton);   

// Event listeners for button clicks
const speed = 0.05; // Adjust movement speed as needed

upButton.addEventListener('click', () => {
  mesh.position.y += speed;
});

downButton.addEventListener('click', () => {
  mesh.position.y -= speed;
});

leftButton.addEventListener('click', () => {
  mesh.position.x -= speed;
});

rightButton.addEventListener('click', () => {
  mesh.position.x += speed;
});

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
        
        const controls = new OrbitControls( camera, renderer.domElement );
        controls.minDistance = 0.5;
        controls.maxDistance = 5;
    

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

```

**Tags:** shader, mathematics, mesh, javascript

> **Comments:**
> **username_1**: The common method is called Marching Cubes.  
> **username_0**: Hmm, well, marching cubes doesn't look "smooth", are there alternatives to just color and project the pixels, or anything in the three.js library that might make rendering this more efficient, and with anti-aliasing applied?  
> **username_1**: Marching cubes is as smooth as you want by refining the grid. You can even improve the smoothness by computing the true surface normals at the vertices.  
> **username_2**: Marching Cubes works well for implicit functions. You can make it even smoother by finding the vertices via half step approximation — you home in on the vertex location by taking smaller and smaller steps. Also note that when using floats that cracks will form if you do not sort the input vertices.  
> **username_2**: … and you do not simply say that a pixel/voxel is either on or off, you use the actual value calculated by the implicit function. Then you set the isosurface’s isovalue to suit your taste. Do you know the basics of fractal geometry?  

---

## 0 answers

