无头木偶操纵者无法正确渲染 WebGL
Headless puppeteer not rendering WebGL correctly
我正在尝试截取我的 WebGL 应用程序的屏幕截图,但结果不正确。
运行 有头模式下的木偶操纵者工作得很好,但我需要无头模式。
我已将我的着色器托管在 shadertoy 上以简化这里的操作。
着色器非常简单,它使用PRNG绘制星空。
人偶版本:7.0.1
Chromium 版本: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())();
这是木偶操作者(无头)的结果:
它应该是这样的:
我的桌面上有黑色版本。我猜问题是你的着色器使用了未定义的行为
这一行
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
为负时根据规范未定义。
我正在尝试截取我的 WebGL 应用程序的屏幕截图,但结果不正确。
运行 有头模式下的木偶操纵者工作得很好,但我需要无头模式。
我已将我的着色器托管在 shadertoy 上以简化这里的操作。
着色器非常简单,它使用PRNG绘制星空。
人偶版本:7.0.1
Chromium 版本: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())();
这是木偶操作者(无头)的结果:
它应该是这样的:
我的桌面上有黑色版本。我猜问题是你的着色器使用了未定义的行为
这一行
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
为负时根据规范未定义。