troika-3d-text standalone with react-native

[jmatsushita]

Hi there,

Great module! Have you considered allowing to use troika-3d-text standalone with react-native? I've tried to use your module via react-three-fiber and https://github.com/react-spring/drei` but I run into the following bundler error: https://github.com/react-spring/drei/issues/19

It works great with react-native-web, but I think the downloading and building code might be the culprit. Is it possible to generate the sdf assets offline and then pass the resulting asset to troika-3d-text or does this defeat the purpose of the module and I'm better off with three-bmfont-text?

Thanks,

Jun

[lojjic]

Hmm. Honestly I haven't given any thought to react-native at all. I'm definitely not opposed to trying to make it work, but I have no experience with it or how it might differ from the web. Is there an easy way I could test it out with my total lack of knowledge? 😬

I also haven't really considered offline sdf generation, since getting away from that was the main driver behind why I wrote this module in the first place. I suppose it could be possible but it feels like such a step backward that I'd need a really compelling reason.

[lojjic]

I'm curious if the latest release (included in drei 0.0.41) improves the react-native situation at all. It removes a hard dependency on document and introduces a main-thread fallback when web workers are not supported, which may get it closer at least. @jmatsushita would you be able to test it out and report back?

[drcmda]

I also haven't really considered offline sdf generation, since getting away from that was the main driver behind why I wrote this module in the first place. I suppose it could be possible but it feels like such a step backward that I'd need a really compelling reason.

@lojjic

the upside to this is of course that troika would become cross platform. when r3f runs in RN it isn't constrained to a web view any longer, it runs natively in opengles. with microsofts recent work on RN this may soon extend to all platforms: android, ios, windows, macos, linux.

the catch is that these platforms do not use browser tech (ajax requests, stuff like that). if troika would allow users to still use it somehow it would become the defacto standard for text in x-platforms gl apps. 👍

[lojjic]

@drcmda De facto standard?! LOL no pressure! 😄

I feel like RN support should be possible without resorting to offline generation. Those two items I mentioned above may get us most of the way there, but since I have zero RN experience I'm going to need help verifying it and identifying additional issues.

[drcmda]

RN is more or less established but the new batch is about to come. microsoft is making it their official platform api, so people that develop for windows will use RN, and macos probably, too. im really excited for what will happen to the gpu space, where we're not tied to webgl any longer, yet we can use threejs and javascript, as it is.

RN compatible is basically plain javascript, so no ajax, document, window, all the browser stuff falls out. you would most likely import things via bundle splitting:

const font = await import(`/fonts/${name}.woff`)

so we will have the raw data, or arraybuffers ready. if troika can somehow handle that, it's good to go! 🤝

[lojjic]

I'm speculating but it sounds like XMLHttpRequest is supported, so I'm thinking the loading part should work if the bundled font is supplied as a data: URI...? I'd be willing to add alternative loading methods e.g. the import if there's a good way to detect the RN environment.

[lojjic]

Closing this. Feel free to reopen if you can provide info on what issue(s) may actually be occurring.

[jmatsushita]

Here's some news from the future ;) Happy to open a new issue if you prefer.

I've tried this again and got this error. I suppose that the canvas is now used to store the glyph atlases. Maybe we could pass the expo-gl Canvas instance through to [webgl-sdf-generator](https://github.com/lojjic/webgl-sdf-generator)?

I'll try and do a reproducer repo that has minimal dependencies.

[jmatsushita]

Added a simple repro repo https://github.com/jmatsushita/expo-drei-troika

[lojjic]

Cross-linking for reference: https://github.com/pmndrs/drei/issues/1396

[lojjic]

Thank you @jmatsushita, that's helpful!

[CristobalAlvarez]

@jmatsushita did you achieve use text? im having the same error here, with a simple component. Im using React Native with Expo.

import { Text } from "@react-three/drei/native";
import React from "react";

const SimpleText = () => {
  return (
    <Text color="black" anchorX="center" anchorY="middle">
      hello world!
    </Text>
  );
};

export default SimpleText;

[hhsaez]

@jmatsushita I'm also interested to know if you manage to use text from RN. I'm not using RN myself, but I'm trying to get text working when rendering using Three within web workers, and I'm getting the same error. Did you find any workaround?

[hmbrg]

Even if this issue is resolved, this package sadly will not work in React Native since the metro bundler has no support for bundling code for web workers.

[lojjic]

@hmbrg Troika's workers are pre-bundled (inline), so that shouldn't matter. It also is able to run on the main thread if worker support is not available.