Reactjs 具有外部图像纹理输入的gl react expo着色器

我正在尝试使用gl react expo着色器对世博会项目中的某些图像应用一些效果。图像来自外部url（如）

我可以制作不使用纹理输入的简单着色器，而且效果非常好。但是我没有找到将图像传递给着色器的正确方法。我试图从这个站点（）实现DiamondCrop示例，以及我发现的所有其他将图像传递到着色器的简单示例。但它们都不起作用

这是我的着色器定义：

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 }

---

有人能为我指出完成这项任务的正确方向吗？

这个问题很老了，但我想为那些可能对react native和Expo的gl相关内容感兴趣的人写一个答案

TL；DR发生这种情况的原因是因为库gl react expo已经过时，它正在从expo SDK的V33中弃用的“expo”导入expo

我制作了一个github repo，它承载了正确的库，您可能会想使用它。这里还有一个链接，如果您想保留原始库，请转到node_modules文件夹，转到gl react expo fodler并在文件中查找_expo2变量，然后将_expo2.default更改为_expo。它会成功的

---

干杯：）

我也面临同样的问题。我用的是你的#1，我想它应该是正确的。还没找到解决办法。嗨！谢谢你的回答！我一有时间就会试试你的解决方案，然后我会让你知道它是如何工作的。

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