Texture muted by FloatType which was used to resolve Miore effect

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?

Assigning THREE.FloatType to a canvas texture is something that I have never seen before. They are always THREE.UnsignedByteType.

How does the result look like when you extract the data from the canvas via getImageData(), transform them from Uint8ClampedArray to Float32Array and then create an instance of DataTexture?

1 Like


The canvas context imageData on the DataTexture seems to be positioned differently than before even though the canvas height and width was used to create them. It could be because of how the original software processes the canvas tiles.

The texture turns black when I converting the imageData to float array with:
const floatArr = new Float32Array(imageData.data)

.

Do you mind demonstrating the issue with a live example? three.js dev template - module - JSFiddle - Code Playground

BTW: I don’t think this works. The values in an Uint8ClampedArray are in the range [0,255]. You have to convert them to floats before creating an instance of Float32Array.

2 Likes

I can’t share a live version unfortunately but thanks for the useful tips and feedback! I’ll experiment with DataTexture further

One thing that comes in my mind: After creating a data texture you have to set the needsUpdate flag to true. Otherwise the data are not uploaded to the GPU and the texture stays black.

1 Like