шейдер gl-response-expo с внешним вводом текстур изображения - PullRequest
Новая
       15

шейдер gl-response-expo с внешним вводом текстур изображения

2 голосов
/ 16 марта 2019

Я пытаюсь использовать шейдеры gl-реагировать на экспо, чтобы применить некоторые эффекты к некоторым изображениям в проекте Экспо. Изображения с внешнего URL (например, http://i.imgur.com/rkiglmm.jpg).

Я могу сделать простые шейдеры, которые не используют текстурный ввод, и он отлично работает. Но я не нахожу правильный способ передачи изображения в шейдер. Я пытаюсь реализовать пример DiamondCrop с этого сайта (http://greweb.me/2016/06/glreactconf/) и все другие простые примеры, которые я нашел, которые передают изображение в шейдер. Но ни один из них не работает.

Это мое определение шейдера: 

import React from "react";
import { Shaders, Node, GLSL } from "gl-react";

const frags = {
    diamond: GLSL`
    precision highp float;
    varying vec2 uv;
    uniform sampler2D t;
    void main () {
      gl_FragColor = mix(
        texture2D(t, uv),
        vec4(0.0),
        step(0.5, abs(uv.x - 0.5) + abs(uv.y - 0.5))
      );
    }`
}



const shaders = Shaders.create({
  DiamondCrop: {
    frag: frags.image
  }
});

const DiamondCrop = ({ children: t }) => (
  <Node
    shader={shaders.DiamondCrop}
    // uniformsOptions={{
    //     t: { interpolation: "nearest" },
    //   }}
    uniforms={ { t } }
  >
  </Node>
);

export { DiamondCrop }

Я попытался передать изображение следующими способами: 

// 1

<Surface style={{width: 200, height: 200}}>
    <DiamondCrop>
        {{uri:'http://i.imgur.com/rkiglmm.jpg'}}
    </DiamondCrop>
</Surface>


// 2

<Surface style={{width: 200, height: 200}}>
    <DiamondCrop>
        {{image:{uri:'http://i.imgur.com/rkiglmm.jpg'}}}
    </DiamondCrop>
</Surface>


// 3

<Surface style={{width: 200, height: 200}}>
    <DiamondCrop>
        http://i.imgur.com/rkiglmm.jpg
    </DiamondCrop>
</Surface>


// 4

<Surface style={{width: 200, height: 200}}>
    <DiamondCrop>
        {'http://i.imgur.com/rkiglmm.jpg'}
    </DiamondCrop>
</Surface>

И ошибки, которые я получаю, следующие: 

// 1 (on 'expo red screen of death')

undefined is not an object (evaluating '_expo2.default.FileSystem')


// 2 (Expo warning; nothing appears on the Surface region)

Node#1(DiamondCrop#2), uniform t: no loader found for value, Object {
  "image": Object {
    "uri": "http://i.imgur.com/rkiglmm.jpg",
  },
}, Object {
  "image": Object {
    "uri": "http://i.imgur.com/rkiglmm.jpg",
  },
}


// 3 (Expo warning; nothing appears on the Surface region)

Node#1(DiamondCrop#2), uniform t: no loader found for value, http://i.imgur.com/rkiglmm.jpg, http://i.imgur.com/rkiglmm.jpg


// 4 (Expo warning; nothing appears on the Surface region)

Node#1(DiamondCrop#2), uniform t: no loader found for value, http://i.imgur.com/rkiglmm.jpg, http://i.imgur.com/rkiglmm.jpg

Может ли кто-нибудь указать мне правильные направления для выполнения этой задачи?

1 Ответ

0 голосов
/ 15 июня 2019

Этот вопрос довольно старый, но я хотел написать ответ для тех, кто может быть связан с gl с помощью response-native и Expo.

TL; DR Причина, по которой это происходит, в том, что библиотека gl-реакции-expo устарела, она делает import Expo from "Expo", что устарело (фактически разрушает всю вещь) в V33 expo SDK .

Я сделал репозиторий github, в котором размещены исправленные библиотеки, вы можете использовать это. Вот ссылка gl-expo-library Кроме того, если вы хотите придерживаться исходных библиотек, перейдите в папку node_modules, перейдите в fodler gl-реагировать-expo и найдите в файлах переменную _expo2 и измените _expo2.default на _expo. Это сделает свое дело.

Приветствия:)

...