Question

我正在尝试使用gl-react-expo着色器在Expo项目中的某些图像上应用某些效果。图片来自外部网址（例如http://i.imgur.com/rkiglmm.jpg）。

我可以制作不使用纹理输入的简单着色器，并且效果很好。但是我没有找到将图像传递给着色器的正确方法。我正在尝试从此站点（http://greweb.me/2016/06/glreactconf/）实现DiamondCrop示例，以及我发现的所有其他将图像传递到着色器的简单示例。但是它们都不起作用。

这是我的着色器定义：

#include <ctype.h>

char input[100];
fgets(input, 100, stdin);
for (int i = 0; i < strlen(input) - 1; i++)
{
    if (isascii((int)input[i]) {
        /* If ASCII */
    } else {
       /*If non-ASCII */
    }
}

我尝试通过以下方式传递图像：

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>

有人可以指出正确的方向来完成这项任务吗？

Answer 1

这个问题已经很老了，但是我想为那些可能与react-native和Expo相关的gl相关的东西写一个答案。

TL; DR 发生这种情况的原因是因为gl-react-expo库已过时，它正在执行import Expo from "Expo"，在V33中已弃用（实际上破坏了整个事情） expo SDK的。

我制作了一个托管已更正库的github存储库，您可能想使用它。这是链接gl-expo-libraries，此外，如果您想坚持使用原始库，请转到node_modules文件夹，转到gl-react-expo fodler并在文件中查找_expo2变量，然后将_expo2.default更改为_expo 。会成功的。

干杯：）

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

1 个答案: