Three.js: SVGs are sometimes rendered incorrectly

Created on 10 Apr 2020  路  7Comments  路  Source: mrdoob/three.js

Description of the problem

This is a follow-up to #19077. The following svg is rendered correctly in firefox, chrome, and android, but incorrectly in three.js.

infinity.txt

Repro: https://jsfiddle.net/L3krx9ho/

Three.js version
  • [x] Dev
  • [x] r115
Browser
  • [ ] All of them
  • [x] Chrome 80.0.3987.149
  • [x] Firefox 74.0
  • [ ] Internet Explorer
OS
  • [ ] All of them
  • [ ] Windows
  • [ ] macOS
  • [x] Linux
  • [x] Android
  • [ ] iOS
Loaders

Most helpful comment

I stumbled on the source of the problem...

let geometry = new THREE.ShapeBufferGeometry( shape, 11 ); // 10, and the default 12, break

...but I have no idea what is causing the triangulation to break. FWIW, there are a lot of duplicate points that are removed.

fiddle: https://jsfiddle.net/m4sn6gcq/

I will likely not be spending any more time on this.

All 7 comments

This is the result if we use a similar approach like in the SVGLoader example:

https://jsfiddle.net/s7denhm3/

Probably related to #16950.

/cc @yomboprime

@eulertour

Do you know if your shape is specified as (a) shape-hole-hole, or (b) hole-shape-hole, or (c) hole-hole-shape?

Do you know if the winding order of the holes is opposite that of the shape?

It's shape-hole-hole (infinity outline, right hole, left hole), with the infinity outline going clockwise and the two holes going counterclockwise.

Well, that sounds correct...

/ping @mourner

I stumbled on the source of the problem...

let geometry = new THREE.ShapeBufferGeometry( shape, 11 ); // 10, and the default 12, break

...but I have no idea what is causing the triangulation to break. FWIW, there are a lot of duplicate points that are removed.

fiddle: https://jsfiddle.net/m4sn6gcq/

I will likely not be spending any more time on this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zsitro picture zsitro  路  3Comments

jlaquinte picture jlaquinte  路  3Comments

ghost picture ghost  路  3Comments

clawconduce picture clawconduce  路  3Comments

filharvey picture filharvey  路  3Comments