regl fake-3d 静态图变动态图, 使用深度信息图片

最新推荐文章于 2024-08-16 09:50:42 发布

阿豪boy

最新推荐文章于 2024-08-16 09:50:42 发布

阅读量103

点赞数

文章标签：深度学习 html cv python 神经网络

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064561

版权

原文链接: regl fake-3d 静态图变动态图, 使用深度信息图片

上一篇: regl 水纹波动效果

下一篇: regl 圆形色盘

https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/

通过额外的一张含有深度信息的图片, 实现只让水动, 当然也可以实现出上面文章的效果, 做成类似3d的样子, 不知道有没有滤波器或者和tf结合直接找到原图的深度信息, 这样可以省去使用ps抠图的步骤

import REGL from "regl";
import { getImg } from "../../utils";
// https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/
export default async () => {
  const contentImg = await getImg("/img/water.jpg");
  const contentImgMap = await getImg("/img/water-maps.jpg");
  const regl = REGL();
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1,
  });
  const draw = regl({
    frag: `
    uniform sampler2D texture;
    uniform sampler2D textureMap;
    precision mediump float;
    uniform vec4 color;
    uniform float tick;
    void main () {
      float frequency=100.0;
      float amplitude=0.005;
      vec4 colorMap = texture2D(textureMap, gl_PointCoord.xy);
      float distortion= colorMap.r/2.0 *  sin(gl_PointCoord.y*frequency + tick/5.0)*amplitude;
      float dx = gl_PointCoord.y*0.2;
      float dy = gl_PointCoord.x* -0.2;
      float x = gl_PointCoord.x + distortion;
      float y = gl_PointCoord.y+ 0.0;
      vec2 uv = vec2(x,y);
      gl_FragColor = texture2D(texture, uv);
    }`,
    vert: `
    precision mediump float;
    attribute vec2 position;
    void main () {
      gl_Position = vec4(position, 0, 1);
      gl_PointSize =  500.0;
    }`,
    attributes: {
      position: [[0, 0]],
    },
    uniforms: {
      color: [1, 0, 0, 1],
      texture: regl.texture(contentImg),
      textureMap: regl.texture(contentImgMap),
      tick: regl.prop("tick"),
    },
    primitive: "points",
    count: 1,
  });
  regl.frame(({ tick }) => {
    draw({ tick });
  });
};