expo / expo-three

Utilities for using THREE.js on Expo
MIT License
734 stars 89 forks source link

Textures based on bundled images doesn't appears in standalone app #54

Open Pavel-Mishin opened 6 years ago

Pavel-Mishin commented 6 years ago

Steps to Reproduce:

  1. Updated to SDK 28 flappy-bird-starter example from expo docs
  2. Do all staff accordingly to tutorial, until to adding background node to the scene On this step local project and standalone app works properly - there is background texture in both case
  3. Then i bundled background image by adding
    "assetBundlePatterns": [
      "assets/sprites/bg.png"
    ],

    to app.json.

And on this step local project worked properly, but in app installed from builded apk there is no background image, just black (with 2.. expo-three versions) or white (with 3.0.0-alpha.2) screen. There is bg.png in extracted by apktool folder, and i can use it for example for RN Image like this <Image source={Asset.fromModule(Files.sprites.bg)} style={{width: '100%', height: '100%'}}/>, and it appears properly in standalone app. I tried to remove Asset.fromModule().downloadAsync() since we have bundled file, i tried to create texture by Three.Texture constructor and THREE.TextureLoader().load passing to them, Expo.Asset, require(), or just string with path, and i tried to use different paths like "assets/sprites/bg.png", "./assets/sprites/bg.png", "/assets/sprites/bg.png", and so on. There is another game I develop, it use different than flappy asset system, and also tried different variants to get assets and create textures, but it have exactly the same issue. I tested it on Android 5.0 device.

EvanBacon commented 6 years ago

To get the asset loading in three.js you need a localUri. You can get this with Expo.Asset.fromModule().localUri. I'm not 100% sure how assets work with bundling in stand alone. I have some assets bundled in my game Pillar Valley that uses the newest expo-three / expo (SDK 28 as of writing this). It works there. Here is the source: https://github.com/EvanBacon/Expo-Pillar-Valley/blob/8804dd192f2e4affd5836ccfa6437cf0f013668c/client/Game/Game.js#L167-L169

Pavel-Mishin commented 6 years ago

@EvanBacon Thanks! I'll try to have deal with Expo.Asset.fromModule().localUri, and to research code of your project.

Pavel-Mishin commented 6 years ago

@EvanBacon Well, i tried to use approach from Pillar Valley - with caching images as files through expo-asset-utils (but i don't understand why do we need to cache bundled images) and creating textures through ExpoTHREE.loadAsync, but it didn't resolve the issue. Then I check Pillal Valley standalone build and... it have the same issue! Steps to Reproduce:

  1. Clone Expo-Pillar-Valley
  2. run yarn
  3. create Secret.js
  4. run exp start --localhost --dev, all works on this step
  5. run exp build:android and installing .apk on android 8.1 phone So in standalone app i got this screenshot_20180730-150510

P.S. Also, I tried to install Pillar Valley from Google Play on few devices, and there is the same problem with textures.

obasille commented 1 year ago

Hi @EvanBacon, I'm wondering if this issue can be addressed as it prevents expo-three from loading texture when building an Android APK. Please see this expo-three issue: https://github.com/expo/expo-three/issues/225