Question

我无法在gl-react着色器中加载HtmlImageElement。有什么方法可以执行此操作，或者以某种方式将图像转换为可以在gl-react中用作均匀纹理的格式？

我是个反应迟钝的新手，正在为一个看似简单的问题而苦苦挣扎。我的代码基于以下简单代码示例：https://gl-react-cookbook.surge.sh/diamondcrop。但是，我没有要加载到gl-react中的图片网址，而是一个HtmlImageElement对象。如何将其加载到简单的gl-react着色器中？

这是简单的gl-react代码：

const shaders = Shaders.create({
  DiamondCrop: {
  frag: 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))
);
}
` },
});

export const DiamondCrop = ({ children: t }) =>
  <Node shader={shaders.DiamondCrop} uniforms={{ t }} />;

export default class Example extends Component {
  render() {
    return (
      <Surface width={300} height={300}>
        <DiamondCrop>
          https://i.imgur.com/5EOyTDQ.jpg // HERE, I WANT TO USE A LOADED IMAGE OBJECT INSTEAD!
        </DiamondCrop>
      </Surface>
    );
  }
};

使用gl-react显示HtmlImageElement吗？

0 个答案: