Dynamic infinite function traversal

Hi, I am trying to model a 3D infinite function and be able to traverse it using mouse gestures, which I suppose requires updating the scene dynamically as some parts of it get out of view and some other need drawing as they were not in the view before the mouse event but should be after.

To clarify, imagine 3D fractal which needs to be traversed infinitely on every direction.

I started playing with the library and managed to draw a long segment of points (spheres) where only the visible ones get added to the scene, however I am doing this by redrawing the line after each mouse event, which I don’t think is the way to go for a more complex (more elements) model.

I was wondering if there is some function in the library which will help me adding only what needs to be added, and removing the objects non-visible after each mouse event, or the program have to do all that?

Thank you in advance.

If you want to draw fractals using three.js you should create them in a shader - not sure if that’s what you are already doing without seeing your code. Essentially, you draw a flat plane across the entire screen (a fullscreen quad) and then set up a custom material that draws your fractal onto the plane.

There are loads of articles about drawing the mandelbrot set with three.js, such as this one:

These should serve as a good starting point for drawing other kinds of fractals.

However, if you haven’t used the GLSL shader language to create custom materials using the three.js ShaderMaterial before, I would start out with some simple tutorials. You should be able to get up to speed with this in a couple of hours, then you can come back to creating the fractal.

Here’s one tutorial that doesn’t seem too outdated. I haven’t read it closely but it should help you get started: https://blog.cjgammon.com/threejs-custom-shader-material

1 Like

Hi looeee, Thank you for your reply.

Fractals were just an image I added to clarify the idea of adding to the model dynamically while traversing it, but my function is not fractal and it requires 3D.

At a first glance through the ShaderMaterial I got the impression it is used for 2D rendering. Isn’t that so?

You might want to take a look at some shadertoy.com experiments, most of them use raymarching to render fractals and such, though this is quite expensive. What you see at shadertoy is just a single quad (2 triangles) covering the screen with all computation moved to the fragment shader, you could find a nice one with camera movement and replace the function used to get the distance with yours.

Contouring the implicit surface like the volume component (second video) of my engine does is more complicated to implement and to manage efficiently, and no contouring approach will give you a fine detailed representation as raymarching does.

1 Like

Thank you, Fyrestar