I’ve been working on a brick visualiser built with three.js and react-three-fiber which generates and visualises a brick texture canvas with thousands of bricks that a user can customise. This to display what customised bricks would appear like on different building types.
The brick image gets generated in an html canvas which then gets applied as a CanvasTexture to a mesh plane’s MeshBasicMaterial, which is positioned behind another mesh plane with a building image CanvasTexture applied to it’s MeshBasicMaterial. A user can zoom the Orthographic camera in or out.
Here’s some screen shots:
Zoomed In
Zoomed Out
As you can see, there’s a Moire effect from the thousands of bricks which occurs when zoomed out even though LinearMipmapLinearFilter has been applied to the texture’s minFilter to generate mipmaps.
FloatType assigned to texture
I found that assigning FloatType to the texture’s type resolved the Moire effect but has now muted the textures colors. The brick texture must have the exact same colours as the original canvas image which was generated (colours were correct without FloatType assigned).
sRGBEncoding has always been assigned to the textures encoding and outputEncoding of the renderer is also sRGBEncoding. Is there a setting on the texture or material I’m missing to both resolve the Miore effect but maintain the textures original image colours?