CODEWITHSUNDEEP
three.js
Ali Salehi
Ali Salehi

Reputation: 6999

Three.JS with Canvas Renderer, broken Textures

If you look at http://stemkoski.github.io/Three.js/Wireframe.html without enable webgl, you see a white diagnal line crossing the texture. This happens only in CanvasRenderer. Does anyone knows how can this be fixed.

Diagnal line crossing the texture

When WebGL is enabled, the output is correct, like below:enter image description here

Upvotes: 4

Views: 2514

Answers (1)

WestLangley
WestLangley

Reputation: 104833

The diagonal lines are an artifact of CanvasRenderer. You can compensate for them by setting material.overdraw = 0.5, or some number between 0 and 1.

The distortion in the checkerboard pattern when using CanvasRenderer is explained in the answer to ThreeJS Cube texture strange visual.

UPDATED: Material.overdraw used to be a boolean. It is now a number.

three.js r.61

Upvotes: 5

Related Questions