javascript - 使用 webgl 的景深

标签 javascript webgl

我想在 webgl 中模拟“景深”效果, 将相机移动一圈:https://en.wikibooks.org/wiki/OpenGL_Programming/Depth_of_Field

在 OpenGl 中,我会使用累积缓冲区。但不幸的是 webgl 不知道这样的缓冲区。

是否可以使用混合来模拟这样的效果?

最佳答案

模拟景深的一种简单方法是

  • 将场景渲染为纹理
  • 使用渲染器场景将纹理模糊到另一个纹理
  • 使用深度信息混合 2 个纹理(焦点场景纹理 + 模糊场景纹理)。

an example here .单击微小的 * 并调整“自由度” slider 。按 d 几次以查看不同的纹理。

关于javascript - 使用 webgl 的景深,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35771536/

相关文章:

javascript - 使用 PhantomJS 更改 userAgent 并不能解决旧网站问题

javascript - CSSOM 和 DOM 构造是在并行线程上进行的吗?

javascript - CodePen 中带有巨大数组的奇怪 JavaScript 行为

javascript - 第二个 onclick 事件不起作用(首先做一些更改,第二个需要撤消它们)

javascript - 如何在多个模型上正确应用矩阵变换?

glsl - 如果禁用 VertexAttribArray,WebGL 2.0 整数属性会抛出类型错误

javascript - 外部 SVG 作为 Google map api 标记 - 是或否

javascript - 在 glMatrix、Sylvester 和 CanvasMatrix 之间做出选择?

animation - 使用来自 Three.js 中 COLLADA 文件的解析数据的骨骼动画

GLSL 定义计算还是替换文本?