Pixelizing objects in 3d scene

Hello!

  1. Is it possible to make a stable feature in 3d scene like here (not necessasry exactly like there, I just want it to look like there)
    https://github.com/mats31/Dragon-Ball-Web-Application
    I want objects to “pixilize” when I am far from them and come “pixels” together when I’m approaching them.
    I made an “analog” of it in 3d scene, but it works in static (not reacting to approaching to obj) and very unstable: an obj pixelizes after several reloads of page. And the page itself eats all available memory after some time.
  2. Is it possible to translate coords where the player should be in a url?

Maybe someone realized this features in other engines (e.g. b4w)?

You can achieve a similar effect by using a custom shader. As you can see in this example, I use the image as a texture for a plane with a ShaderMaterial. The fragment shader computes are grid which is used to make certain parts of the surface totally transparent. I’ve added a few comments to the code in order to explain what’s happening.

https://jsfiddle.net/f2Lommf5/12931/

3 Likes

Nice effect, but it’s not exactly what I want. This is a flat one, I want something more 3D (vertexes should be dispersed in space and come together when I’m approaching).

Um, maybe you can use a similar approach like in the webgl_materials_video example. So your single pixel objects are simple box meshes. For each mesh, you create a new BoxBufferGeometry object and manipulate the texture coordinates like in the beneath code snippet. Since all meshes share a single material, they now render just a certain part of the common texture.

This approach should provide you more flexibility since you can independently animate the boxes. And you have a real 3D effect.

I believe you are describing “voxels”?

It’s like a pixel, but it’s volume based rather than surface. Minecraft is a good example of a voxelized world.

You could render slices into a texture. Put an orthographic camera above the world, and clip the world at constant height intervals. You could then loop through the texture and extract voxels with their colors in order to reduce the footprint of the texture.

You could also use a modified PointsMaterial each pixel will face camera and you can change their shape with map param.
Here is an example https://jsfiddle.net/f2Lommf5/13188/

Edit: I had some more fun with it https://jsfiddle.net/f2Lommf5/13256/
Any idea why I couldn’t use THREE.Points with THREE.PlaneGeometry?

2 Likes