如何解决Headless puppeteer 无法正确渲染 WebGL
我正在尝试截取我的 WebGL 应用的屏幕截图,但结果不正确。
在有头模式下运行 puppeteer 工作正常,但我需要在无头模式下运行。
我在 shadertoy 上托管了我的着色器,以简化这里的工作。
着色器非常简单,它使用 PRNG 绘制星空。
Puppeteer 版本: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
是未定义的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。