CODEWITHSUNDEEP
javascriptwebglpuppeteerchromiumheadless
Pedro Henrique
Pedro Henrique

Reputation: 782

Headless puppeteer not rendering WebGL correctly

I'm trying to take a screenshot of my WebGL app but the results are not right.

Running puppeteer in headful mode works just fine but I need it in headless mode.

I've hosted my shader on shadertoy to make things easier here.

The shader is really simple, it uses a PRNG to draw a starfield.

Puppeteer version: 7.0.1

Chromium version: 90.0.4403.0

Here is my shader:

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);
}

Here is my puppeteer code:

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())();

Here is the result from puppeteer (headless):

enter image description here

And this is what it should look like:

enter image description here

Upvotes: 0

Views: 830

Answers (1)

user128511
user128511

Reputation:

I get the black version on my desktop. My guess is the issue is your shader is using undefined behavior

This line

pow((v-0.97)/(1.0-0.97),50.0);

needs to be this

pow(clamp(v-0.97, 0.0, 1.0)/(1.0-0.97),50.0);

because pow(x, y) when x is negative is undefined according to the spec.

Upvotes: 1

Related Questions