【发布时间】：2018-10-04 06:03:53
【问题描述】：
我目前有一个画布，我正在向其渲染 ThreeJS 场景。一切正常，但是，我想在它上面显示一个透明填充。
使用普通的画布，我会这样做
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
这当然行不通，因为我使用的是 WebGL，而且上下文不同。但我尝试将 fillStyle 应用于
renderer.context
什么都没有发生。 我通过控制台进行了检查，该属性确实出现在上下文中
WebGLRenderingContext {fillStyle: "rgba(204, 61, 202, 0.7 )", canvas: canvas#canvas, drawingBufferWidth: 475, drawingBufferHeight: 397}
但是，颜色仍然没有出现。
知道这是否可能吗？
【问题讨论】：
-
fillStyle与 WebGL 无关。这是 Canvas 2D API 的属性。 -
对，那么我应该使用什么来在 webgl 画布上应用透明颜色？
-
您可以应用简单的后处理通道，这将为您提供最大的视觉外观灵活性。
-
我学会了如何应用着色器，但我不知道如何实际编写一个。有什么资源可以让我找到在整个场景中应用透明颜色的方法吗？
-
这是一个没有
EffectComposer的基本后处理示例。首先，将场景渲染到渲染目标中。接下来，您通过将渲染目标用作自定义着色器的输入纹理来应用后期处理。 jsfiddle.net/mrzp9nvd/2