Canvas 使用OGL流程图效果设置此WebGL的透明背景？

我正在尝试从部分透明的PNG图像创建流程图效果。我已经为这个问题挣扎了好几个小时了，我甚至不知道这是纹理的错，还是流程图效果或者其他什么问题。如何将背景设置为透明而不是黑色

渲染画布的外观

  const vertex = /* glsl */ `
attribute vec2 uv;
attribute vec2 position;
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = vec4(position, 0, 1);
}
`
  const fragment = /* glsl */ `
precision highp float;
precision highp int;
uniform sampler2D texture;
uniform sampler2D tFlow;
uniform float uTime;
varying vec2 vUv;
uniform vec4 res;

void main() {

    // R and G values are velocity in the x and y direction
    // B value is the velocity length
    vec3 flow = texture2D(tFlow, vUv).rgb;
    // Use flow to adjust the uv lookup of a texture
    vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
    uv += flow.xy * 0.05;
    vec3 tex = texture2D(texture, uv).rgb;
    gl_FragColor.rgb = tex;
    gl_FragColor.a = 1.0;

}
`
  {
    const renderer = new Renderer({
      dpr: 2,
      alpha: true,
      premultiplyAlpha: false,
    })
    const gl = renderer.gl
    const canvas = document.body.appendChild(gl.canvas)
    gl.clearColor(1, 1, 1, 1)

    // Variable inputs to control flowmap
    let aspect = 1
    const mouse = new Vec2(-1)
    const velocity = new Vec2()
    let imgSize = [600, 600]

    const flowmap = new Flowmap(gl, { falloff: 0.2, dissipation: 0.9 })
    // Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
    const geometry = new Geometry(gl, {
      position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
      uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) },
    })
    const texture = new Texture(gl, {
      minFilter: gl.LINEAR,
      magFilter: gl.LINEAR,
      premultiplyAlpha: true,
    })
    const img = new Image()
    img.onload = () => (texture.image = img)

    img.src = "/static/sowa@2x-863f69426831e1cc05d417dc45111419.png"
    let a1, a2
    var imageAspect = imgSize[1] / imgSize[0]
    if (imgSize[1] / imgSize[0] < imageAspect) {
      a1 = 1
      a2 = imgSize[1] / imgSize[0] / imageAspect
    } else {
      a1 = (imgSize[0] / imgSize[1]) * imageAspect
      a2 = 1
    }
    const program = new Program(gl, {
      vertex,
      fragment,
      uniforms: {
        uTime: { value: 0 },
        texture: { value: texture },
        res: {
          value: new Vec4(imgSize[0], imgSize[1], a1, a2),
        },
        // Note that the uniform is applied without using an object and value property
        // This is because the class alternates this texture between two render targets
        // and updates the value property after each render.
        tFlow: flowmap.uniform,
      },
    })

    const mesh = new Mesh(gl, { geometry, program })
    // Create handlers to get mouse position and velocity
    const isTouchCapable = "ontouchstart" in window
    if (isTouchCapable) {
      window.addEventListener("touchstart", updateMouse, false)
      window.addEventListener("touchmove", updateMouse, false)
    } else {
      window.addEventListener("mousemove", updateMouse, false)
    }
    let lastTime
    const lastMouse = new Vec2()

    function resize() {
      renderer.setSize(imgSize[0], imgSize[1])
      aspect = imgSize[0] / imgSize[1]
    }
    window.addEventListener("resize", resize, false)
    resize()

    function updateMouse(e) {
      if (e.changedTouches && e.changedTouches.length) {
        e.x = e.changedTouches[0].pageX
        e.y = e.changedTouches[0].pageY
      }
      const positionX = e.x - canvas.getBoundingClientRect().x
      const positionY = e.y - canvas.getBoundingClientRect().y
      // Get mouse value in 0 to 1 range, with y flipped
      mouse.set(
        positionX / gl.renderer.width,
        1.0 - positionY / gl.renderer.height
      )
      // Calculate velocity
      if (!lastTime) {
        // First frame
        lastTime = performance.now()
        lastMouse.set(positionX, positionY)
      }

      const deltaX = positionX - lastMouse.x
      const deltaY = positionY - lastMouse.y

      lastMouse.set(positionX, positionY)

      let time = performance.now()

      // Avoid dividing by 0
      let delta = Math.max(14, time - lastTime)
      lastTime = time
      velocity.x = deltaX / delta
      velocity.y = deltaY / delta
      // Flag update to prevent hanging velocity values when not moving
      velocity.needsUpdate = true
    }
    requestAnimationFrame(update)
    function update(t) {
      requestAnimationFrame(update)
      // Reset velocity when mouse not moving
      if (!velocity.needsUpdate) {
        mouse.set(-1)
        velocity.set(0)
      }
      velocity.needsUpdate = false
      // Update flowmap inputs
      flowmap.aspect = aspect
      flowmap.mouse.copy(mouse)
      // Ease velocity input, slower when fading out
      flowmap.velocity.lerp(velocity, velocity.len ? 0.5 : 0.1)
      flowmap.update()
      program.uniforms.uTime.value = t * 0.01
      renderer.render({ scene: mesh })
    }
  }

---

我应该在哪里寻找答案？这是OGL内部的事情吗？

您需要做两个更改

在程序声明中，需要添加transparent:true 在片段着色器中，将输出更改为gl_FragColor=texture2Dtexture，uv； 第一个更改将混合类型更改为使用alpha-默认情况下，WebGL混合处于禁用状态

---

第二个使用纹理的alpha通道。在原始示例中，仅使用rgb红色、绿色和蓝色通道。

您需要进行两项更改

在程序声明中，需要添加transparent:true 在片段着色器中，将输出更改为gl_FragColor=texture2Dtexture，uv； 第一个更改将混合类型更改为使用alpha-默认情况下，WebGL混合处于禁用状态

---

第二个使用纹理的alpha通道。在最初的示例中，仅使用rgb红色、绿色和蓝色通道。

哇，非常感谢，现在它是白色的，这对我来说是一个巨大的不同。我对WebGL完全陌生，是否有可能使其透明，以便我可以在背景中看到其他DOM元素？它应该是透明的，假设您的纹理具有alpha通道。如果您是指WebGL画布本身，您需要将alpha:true传递给渲染器声明，然后将透明颜色alpha更改为0，例如gl.clearColor0，0，0；使用gl.clearColor0,0,0,0，它再次变黑。这是沙箱，因为cors，我无法加载图像，但您可以清楚地看到它是不透明的。在第46行下方，添加alpha:trueWow，非常感谢它现在是白色的，这对我来说是一个巨大的不同。我对WebGL完全陌生，是否有可能使其透明，以便我可以在背景中看到其他DOM元素？它应该是透明的，假设您的纹理具有alpha通道。如果您是指WebGL画布本身，您需要将alpha:true传递给渲染器声明，然后将透明颜色alpha更改为0，例如gl.clearColor0，0，0；使用gl.clearColor0,0,0,0，它再次变黑。这是沙箱，因为cors，我无法加载图像，但您可以清楚地看到它是不透明的。在第46行下方，添加alpha:true