javascript - 无头木偶无法正确渲染 WebGL
问题描述
我正在尝试截取我的 WebGL 应用程序的屏幕截图,但结果不正确。
在 headful 模式下运行 puppeteer 工作得很好,但我需要在 headless 模式下运行。
我已经在 shadertoy 上托管了我的着色器,以使这里的事情变得更容易。
着色器非常简单,它使用 PRNG 来绘制星空。
木偶版:7.0.1
铬版本:90.0.4403.0
这是我的着色器:
uint hash (uint v) {
v += (v << 10u);
v ^= (v >> 6u);
v += (v << 3u);
v ^= (v >> 11u);
v += (v << 15u);
return v;
}
uint hash (uvec2 v) { return hash(v.x^hash(v.y)); }
uint hash (uvec3 v) { return hash(v.x^hash(v.y)^hash(v.z)); }
uint hash (uvec4 v) { return hash(v.x^hash(v.y)^hash(v.z)^hash(v.w)); }
float floatConstruct (uint v) {
v &= 0x007FFFFFu; // ieee mantissa
v |= 0x3F800000u; // ieee one
return uintBitsToFloat(v)-1.0;
}
float random (vec2 v) { return floatConstruct(hash(floatBitsToUint(v))); }
void mainImage (out vec4 fragColor, in vec2 fragCoord) {
float v = random(fragCoord);
float c = pow((v-0.97)/(1.0-0.97),50.0);
fragColor = vec4(vec3(c), 1.0);
}
这是我的木偶代码:
const puppeteer = require("puppeteer");
const url = "https://www.shadertoy.com/embed/Wl3fD8?gui=true&t=10&paused=true&muted=false"
const crawl = async () => {
try {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
await page.waitForTimeout(5000);
await page.screenshot({ path: "screenshot.png" });
await browser.close();
} catch (e) {
console.log(e);
}
};
(async () => await crawl())();
这是 puppeteer(无头)的结果:
这就是它的样子:
解决方案
我在我的桌面上得到黑色版本。我的猜测是问题是您的着色器使用未定义的行为
这条线
pow((v-0.97)/(1.0-0.97),50.0);
必须是这个
pow(clamp(v-0.97, 0.0, 1.0)/(1.0-0.97),50.0);
因为根据规范未定义pow(x, y)
何时为负数。x
推荐阅读
- java - 为什么我不能将最终的 long 分配给 int?
- swift - SwiftUI:强制更新
- oracle - 用于读取嵌套 JSON 数据的 Oracle 查询
- powershell - 使用轻度匹配搜索复制位于多个子文件夹中的文件
- python-3.x - 用 theano 解决 pymc3 中的简单化学网络 odes
- pyspark - 如何在 databricks 中读取 kaggle zip 文件数据集
- html - 对齐div中的元素
- c++ - 需要澄清使用 Boost asio 的 SSL 客户端
- r - 通过循环迭代单向方差分析会在 R 中引发错误
- node.js - 为什么我在所有 meanstack 项目中不断收到相同的错误:无法加载资源:net::ERR_CONNECTION_REFUSED