glsl - webgl 着色器调试/性能/成本

Question

我一直在使用 three.js 来试验和学习 GLSL 和 WebGL。我来自 3d 艺术世界，所以我了解网格、3d 数学、照明等的概念。虽然我确实查阅了 OpenGL 和 WebGL 文献(以及 gpu gems、eric lengyels 数学书等)，但我似乎遗漏了一些关键适用于图形的 CS 概念。

目前我正在使用颜色进行调试，同时使用 Canvas 检查器来查看绘制调用需要多长时间。

我感兴趣的是这样的问题:

GLSL 函数有多重。例如，在性能、MAD 指令等方面，除法与乘法或 sin 相比究竟如何？

说你有这样的东西

vec2 normalizedCoord = gl_FragCoord.xy / uniform_resolution.xy;
vs
vec2 normalizedCoord = gl_FragCoord.xy * uniform_resolution_inverse.xy;
vs
... the same with lowp/mediump/highp

精度/性能会怎样？

或类似的东西

vec4 someVec4 = ...;

float sum = dot(someVec4,vec4(1.));
vs 
float sum = someVec4.x + someVec4.y + someVec4.z + someVec4.w;

纹理查找的含义是什么，例如，进行某种采样 - SSAO 或类似的东西？

这是可以在 Michael Abrash Black book 之类的东西中找到的信息类型吗？

如果有人可以帮助我更好地表达这个问题，将不胜感激:)

Answer 1

我相信比我更缺乏经验的人可以给你一个更好的答案，但事实是。这取决于。

GPU 是并行化的，并且它们都是不同的，因此在一个 GPU 上花费一定时间可能在另一个 GPU 上花费更少的时间。

最重要的是，我不知道您所说的“ Canvas 检查器”是什么意思，但它可能无法告诉您需要多长时间，因为图形管道也是并行化的、多线程的、多进程的，至少从JavaScript 的 POV 你所能知道的只是提交命令需要多长时间，而不是执行它需要多长时间。例如，在 Chrome 中，命令被传递给 GPU 进程，JavaScript 继续运行。然后 GPU 进程将其传递给 GL/DirectX，这些进程又将命令传递给另一个进程，至少在大多数桌面操作系统上是这样。

人们谈论使用gl.finish找出某件事需要多长时间，但即使这样也行不通，因为它没有告诉您 GPU 运行需要多长时间。它告诉您 GPU 运行需要多长时间 + 同步所有这些进程需要多长时间。这有点像问“汽车跑了多快”，而您唯一可以测量的是汽车从停止状态到另一个停止状态。您可以判断一辆车在一定时间内从 A 点到达 B 点，但您无法衡量哪辆车的速度最快。一辆车可能在 1 秒内从 0 加速到 60，然后用 3 秒减速。对方0-20瞬间，4秒到达球门然后瞬间停止。两辆车都花了4秒。如果您只能测量它们花了 4 秒，那么您无法判断哪个击中速度更快。

更糟糕的是，您拥有平铺架构，就像所有 iOS 设备和许多 Android 设备中的架构一样，这些设备在拥有所有命令之前不会实际绘制。然后他们生成命令的“图 block ”来渲染屏幕的不同部分。

好吧，那离题太远了。

通常，更少的代码更快，纹理查找速度很慢，GPU 具有纹理缓存，因此在“典型”使用中，纹理在多边形上拉伸(stretch)，纹理缓存可以帮助很多。您可以通过执行随机纹理查找来终止纹理缓存。例如，制作一个随机纹理，使用该纹理计算另一个纹理的纹理坐标。这将完全杀死纹理缓存，GPU 将运行非常缓慢。

According to this调酒速度很快。点积速度很快。乘法和加法很快。线性插值很快。