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

#reactjs #react-native #opengl #shader #expo

#reactjs #react-native #opengl #шейдер #выставка

Вопрос:

Я пытаюсь использовать шейдеры gl-react-expo для применения некоторых эффектов к некоторым изображениям в проекте Expo. Изображения взяты с внешнего 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>
        View post on imgur.com

    </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:

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

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

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

Приветствую 🙂