无法使用 WebGL、OGL 和 GLSL 着色器更改<画布>背景颜色

Can't change <canvas> background color with WebGL, OGL and GLSL Shaders

提问人:BoneStarr 提问时间:10/26/2023 最后编辑:BoneStarr 更新时间:10/27/2023 访问量:37

问:

我一直在为我正在尝试学习的这个教程演示挠头:https://tympanus.net/codrops/2021/01/05/creating-an-infinite-auto-scrolling-gallery-using-webgl-with-ogl-and-glsl-shaders/

正如您在演示 1 中看到的: https://codrops.com/Tutorials/InfiniteAutoScrollingGallery/

您可以通过更改 CSS 属性轻松更改 HTML 背景,也可以将“Background: color”添加到标签中,该标签也会更新它。

但是在演示 2:https://codrops.com/Tutorials/InfiniteAutoScrollingGallery/index2.html 由于某种原因,你不能?

我检查了一下,我相信这取决于画布是如何用 Vecs 预定义的背景属性设置的,而且它不透明,谁能帮忙解决这个问题?或者甚至有解决方法来内联修改画布背景颜色?

我相信这篇文章片段是罪魁祸首,因为它不在演示 1 中:

precision highp float;

uniform sampler2D tMap;

uniform vec2 uResolution;
uniform float uStrength;

varying vec2 vUv;

void main() {
  vec3 color;

  color.r = texture2D(tMap, vec2(vUv.x + uStrength, vUv.y)).r;
  color.g = texture2D(tMap, vUv).g;
  color.b = texture2D(tMap, vec2(vUv.x - uStrength, vUv.y)).b;

  gl_FragColor = vec4(color, 1.0);
}
css glsl webgl ogl

评论

0赞 vallentin 10/27/2023
如果整个画布都是使用该着色器填充的,那么很明显,因为 alpha 是 ,那么它永远不会是透明的1.0background-color
0赞 BoneStarr 10/27/2023
我将如何删除 alpha 的背景?如果我更改不透明度 gl_FragColor = vec4(color, 1.0);它使整个画布下降不透明度,我只想减少背景。

答: 暂无答案