opengl - 使用 P3D 的纹理透明度
问题描述
我目前正在使用 P3D 编写“Doom”克隆。我没有使用任何外部库。当我使用蒙版纹理时,我遇到了一个奇怪的伪影。我尝试了几种方法来修复它,但无济于事:(。DISABLE_DEPTH_MASK 抑制了伪影,但后来我的精灵排序都错了。
如果有人能指出我正确的方向,我将不胜感激!我非常接近拥有功能强大的引擎!(忽略“厄运”面孔和士兵精灵,当然,它们只是我正在使用的临时资产……)
解决方案
您必须使用/启用Blending。如果您想渲染不是完全不透明但具有部分或完全透明区域的精灵,则使用此技术
在场景环境完成后,士兵已在最后渲染。必须启用深度测试。
在使用 Alpha 通道渲染士兵精灵(纹理)之前启用混合。
gl.glEnable(GL.GL_BLEND);
gl.glBlendFunc(GL.GL_SRC_ALPHA,GL.GL_ONE_MINUS_SRC_ALPHA);
并在以下情况下禁用混合:
gl.glDisable(GL.GL_BLEND);
请注意,士兵精灵的“黑色”背景必须具有 0.0(完全透明)的 alpha 通道,而士兵本身的 alpha 通道必须是 1.0(完全不透明)。常见的 PNG 图像实现了这一点。
解释:
当士兵被渲染时,背景已经被绘制并且背景颜色(环境的颜色)已经存储在帧缓冲区中。
混合函数为:
dest.rgba = dest.rgba * (1 - src.a) + src.rgba * src.a
其中dest.rgba
是帧缓冲区src.rgba
中的颜色,是精灵的颜色。
如果精灵的 Alpha 通道是 1.0 ( src.a = 1.0
; opaque),那么
dest.rgba = dest.rgba * (1.0 - 1.0) + src.rgba * 1.0
dest.rgba = src.rgba
如果精灵的 Alpha 通道为 0.0(src.a = 0.0
; 透明),则
dest.rgba = dest.rgba * (1.0 - 0.0) + src.rgba * 0.0
dest.rgba = dest.rgba
推荐阅读
- vue.js - 通过 azure 管道部署 Nuxt webapp
- javascript - Rollup 车把助手
- django - 如何在 Django 中创建共享模型?
- macos - 运行:打开服务器:打开服务:监听 tcp:8086:绑定:地址已在启动 influxdb 时使用
- angular - 使用 --prod --aot 使用相同的代码库构建两个单独的构建
- android - How retrieve data from firebase using query according value?
- c# - 不同视觉树之间的 Caliburn.Micro 动作绑定
- azure - 如何使用现有密钥对从 Azure CLi 创建 VM?
- python - 如何在熊猫中将数组更改为数据框
- javascript - 从 JavaScript 调用 PHP 会阻止 grid.js 工作