search

felixmariotto / three-mesh-ui

⏹ Make VR user interfaces for Three.js
https://felixmariotto.github.io/three-mesh-ui/#basic_setup
MIT License
1.26k stars 134 forks source link

Is there a way to support arbitrary Chinese characters? #240

Closed ClytzeL closed 1 year ago

ClytzeL commented 1 year ago

Do all the Chinese characters involved must declare with MSDF? my dependencies "three": "^0.143.0", "three-mesh-ui": "^6.4.5", "react": "^18.1.0", "react-dom": "^18.1.0",

swingingtom commented 1 year ago

Hello @ClytzeL , Yes. This is called 'charset'. When you create your MSDF font ( png + json ) you need to provide the list of all characters that would be available as texture.

Three-mesh-ui should work for chinese characters as long as you don't need vertical writing.

ClytzeL commented 1 year ago

Hello @swingingtom , Thanks for answer.There is a scene. My text content is not sure and maybe contains any(I do not know in developing) chinese characters. I can not provide the list of all chinese characters .So,I doute without create my MSDF font,is there a way to solve this question ? Thank you !

francis9527 commented 1 year ago

If it cannot support any Chinese language, then it will not be suitable for China

hecodeit commented 1 year ago

For font like CJK(Chinese, Japanese, Korean), it's always too big font file size. Even if create MSDF font ( png + json ) will too big file size too.

There is another way, I think: Can use 2d Canvas render character, with CanvasTexture as color map of mesh. This method using system font, so don't need embed font or MSDF text.

I testing both with Quest 2 and PICO 4, it's working well.

Check this project: https://github.com/enijar/react-xr-ui/blob/main/src/components/layer.tsx

For three-mesh-ui, maybe can make 2d canvas text component for the purpose?

ClytzeL commented 1 year ago

For font like CJK(Chinese, Japanese, Korean), it's always too big font file size. Even if create MSDF font ( png + json ) will too big file size too.

There is another way, I think: Can use 2d Canvas render character, with CanvasTexture as color map of mesh. This method using system font, so don't need embed font or MSDF text.

I testing both with Quest 2 and PICO 4, it's working well.

Check this project: https://github.com/enijar/react-xr-ui/blob/main/src/components/layer.tsx

For three-mesh-ui, maybe can make 2d canvas text component for the purpose?

Thank you for your reply. I am currently trying canvasTexture, and I will consider iterating to higher quality text in the future. I plan to use troika-three-text in the future: https://www.npmjs.com/package/troika-three-text