File tree Expand file tree Collapse file tree 2 files changed +462
-6
lines changed Expand file tree Collapse file tree 2 files changed +462
-6
lines changed Original file line number Diff line number Diff line change @@ -1997,22 +1997,22 @@ function updateLineEndPoints(deltaTime) {
1997
1997
* 最后再读取结果
1998
1998
1999
1999
我们的动态最近线段示例就是这样做的:结果从未离开 GPU。
2000
-
2000
+
2001
2001
再举一个例子:我曾经写过一个计算直方图的着色器,最初我是将结果读取回 JavaScript,计算出最小值和最大值,然后再使用这些最小值和最大值作为 uniform 参数,把图像绘制回 canvas,实现图像自动拉伸(auto-level)。
2002
-
2002
+
2003
2003
但后来我发现,与其将直方图读取回 JavaScript,
2004
2004
不如直接在 GPU 上运行一个着色器,让它对直方图纹理进行处理,
2005
2005
输出一个 2 像素的纹理,分别存储最小值和最大值。
2006
-
2006
+
2007
2007
然后我可以将这张 2 像素的纹理传入第三个着色器,
2008
2008
让它在 GPU 内部读取最小值和最大值来做图像处理,
2009
2009
无需再从 GPU 中读取数据来设置 uniform。
2010
-
2010
+
2011
2011
类似地,为了显示直方图本身,
2012
2012
起初我也是从 GPU 读取直方图数据,
2013
2013
但后来我改为编写一个着色器,直接在 GPU 上可视化直方图,
2014
2014
完全不需要将数据读取回 JavaScript。
2015
-
2015
+
2016
2016
通过这种方式,整个处理流程都保持在 GPU 上进行,
2017
2017
性能更高,效率更好。
2018
2018
@@ -2082,7 +2082,7 @@ function updateLineEndPoints(deltaTime) {
2082
2082
2083
2083
着色器的工作机制类似于` map` 函数——每个被调用的处理函数并不能决定其返回值的存储位置,这个决策完全由外部控制。在WebGL中,这个控制权取决于您配置的绘制方式。当调用` gl .drawXXX ` 时,系统会为每个需要计算的值调用着色器,询问"这个位置应该生成什么值?"
2084
2084
2085
- 整个过程就是如此简单直接 .]()
2085
+ 整个过程就是如此简单直接。
2086
2086
2087
2087
---
2088
2088
You can’t perform that action at this time.
0 commit comments