# How do I make a new screenshot for a fix I've made for an example program?

**URL:** <https://discourse.threejs.org/t/how-do-i-make-a-new-screenshot-for-a-fix-ive-made-for-an-example-program/75928>\
**Category:** Questions\
**Created:** [January 2, 2025, 10:24pm UTC](https://discourse.threejs.org/t/how-do-i-make-a-new-screenshot-for-a-fix-ive-made-for-an-example-program/75928 "2025-01-02T22:24:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![erichaines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/erichaines/32/55238_2.png) [@erichaines](https://discourse.threejs.org/u/erichaines)\
**Post date:** [January 2, 2025, 10:24pm UTC](https://discourse.threejs.org/t/how-do-i-make-a-new-screenshot-for-a-fix-ive-made-for-an-example-program/75928/1 "2025-01-02T22:24:55Z")

</div>

I’ve made [a pull request](https://github.com/mrdoob/three.js/pull/30253) to fix a problem that’s appeared in an example (one that I originally submitted). It failed some automated inspection process, and I think the problem is that the screenshot no longer matches [the stored screenshot](https://github.com/mrdoob/three.js/blob/00fa06f2d8c87d244f6045cd7dcad5ee89ee88bc/examples/screenshots/webgl_geometry_teapot.jpg). Fair enough - I fixed the example so that the default shader, glossy, now looks glossy again.

How do I update this screenshot image so that it will properly pass? I could try hacking something about the right size, but have faith that won’t work. There must be a process…

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 2, 2025, 11:59pm UTC](https://discourse.threejs.org/t/how-do-i-make-a-new-screenshot-for-a-fix-ive-made-for-an-example-program/75928/2 "2025-01-02T23:59:06Z")

</div>

Running ‘npm run make-screenshot‘ script in the repo directory will generate new screenshots locally - you can then commit the one you’ve added and add it to the PR.

---

<div class="post-metadata">

**Author:** ![erichaines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/erichaines/32/55238_2.png) [@erichaines](https://discourse.threejs.org/u/erichaines)\
**Post date:** [January 3, 2025, 1:05am UTC](https://discourse.threejs.org/t/how-do-i-make-a-new-screenshot-for-a-fix-ive-made-for-an-example-program/75928/3 "2025-01-03T01:05:30Z")

</div>

Thanks for the fast response! I ended up running “npm make-screenshot webgl\_geometry\_teapot” three different ways on two different Windows machines. Lots of errors and warnings along the way, but it finally worked. I’ll record my steps here, so that anyone in the future might happen upon these attempts and see what went wrong and right.

The winning path (on my Windows box):

- Install nodist to get npm available
- Use Git bash to open a window and cd to the directory GitHub/three.js/examples/screenshots
- try “npm run make-screenshot webgl\_geometry\_teapot” - fails, giving a warning “cannot find package ‘chalk’”.
- do: npm install chalk
- Get obscure warnings, but it seems to install something.
- do: npm run make-screenshot webgl\_geometry\_teapot
- It works! File examples/screenshots/webgl\_geometry\_teapot.jpg generated
- Commit this file to my forked repo. It’s just that simple 🙂

My work computer has npm, so I tried things from there on my fork. I made sure to update npm itself to the latest with “npm install -g npm”.

But then, no go with “npm make-screenshot webgl\_geometry\_teapot” from the screenshots directory:

```javascript
C:\Users\ehaines\Documents\_documents\Github\three.js\examples\screenshots>npm make-screenshot webgl_geometry_teapot

internal/modules/cjs/loader.js:983
  throw err;
  ^

Error: Cannot find module 'node:path'
Require stack:
- C:\Users\ehaines\AppData\Roaming\npm\node_modules\npm\lib\cli.js
- C:\Users\ehaines\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
←[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)←[39m
←[90m at Function.Module._load (internal/modules/cjs/loader.js:862:27)←[39m
←[90m at Module.require (internal/modules/cjs/loader.js:1042:19)←[39m
←[90m at require (internal/modules/cjs/helpers.js:77:18)←[39m
    at Object.<anonymous> (C:\Users\ehaines\AppData\Roaming\npm\node_modules\←[4mnpm←[24m\lib\cli.js:10:18)
←[90m at Module._compile (internal/modules/cjs/loader.js:1156:30)←[39m
←[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)←[39m
←[90m at Module.load (internal/modules/cjs/loader.js:1000:32)←[39m
←[90m at Function.Module._load (internal/modules/cjs/loader.js:899:14)←[39m
←[90m at Module.require (internal/modules/cjs/loader.js:1042:19)←[39m {
  code: ←[32m'MODULE_NOT_FOUND'←[39m,
  requireStack: [
    ←[32m'C:\\Users\\ehaines\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\cli.js'←[39m,
    ←[32m'C:\\Users\\ehaines\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js'←[39m
  ]
}

```

So I decided to bite the bullet and install npm on my home Windows machine as npm suggests, using nodist. It installed, and then I got this in a CMD window:

> C:\Users\erich\Documents\GitHub\three.js\examples\screenshots\>npm run make-screenshot webgl\_geometry\_teapot
> 
> > three@0.172.0 make-screenshot  
> > node test/e2e/puppeteer.js --make webgl\_geometry\_teapot
> 
> node:internal/modules/esm/resolve:844  
> throw new ERR\_MODULE\_NOT\_FOUND(packageName, fileURLToPath(base), null);  
> ^
> 
> Error [ERR\_MODULE\_NOT\_FOUND]: Cannot find package ‘chalk’ imported from C:\Users\erich\Documents\GitHub\three.js\test\e2e\puppeteer.js  
> at packageResolve (node:internal/modules/esm/resolve:844:9)  
> at moduleResolve (node:internal/modules/esm/resolve:901:20)  
> at defaultResolve (node:internal/modules/esm/resolve:1121:11)  
> at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)  
> at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)  
> at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)  
> at ModuleWrap. (node:internal/modules/esm/module\_job:85:39)  
> at link (node:internal/modules/esm/module\_job:84:36) {  
> code: ‘ERR\_MODULE\_NOT\_FOUND’  
> }
> 
> Node.js v20.10.0  
> npm notice  
> npm notice New major version of npm available! 10.2.3 → 11.0.0  
> npm notice Changelog: [Release v11.0.0 · npm/cli · GitHub](https://github.com/npm/cli/releases/tag/v11.0.0)  
> npm notice Run npm install -g npm@11.0.0 to update!  
> npm notice

So it says to install the latest npm, which I try to do and this fails:

> C:\Users\erich\Documents\GitHub\three.js\examples\screenshots\>npm install -g npm@11.0.0  
> npm ERR! code EBADENGINE  
> npm ERR! engine Unsupported engine  
> npm ERR! engine Not compatible with your version of node/npm: npm@11.0.0  
> npm ERR! notsup Not compatible with your version of node/npm: npm@11.0.0  
> npm ERR! notsup Required: {“node”:“^20.17.0 || \>=22.9.0”}  
> npm ERR! notsup Actual: {“npm”:“10.2.3”,“node”:“v20.10.0”}
> 
> npm ERR! A complete log of this run can be found in: C:\Users\erich\AppData\Local\npm-cache\_logs\2025-01-03T00\_44\_34\_647Z-debug-0.log

One last try: git bash. I start it up and run and get:

```javascript
erich@DESKTOP-8O2QMBH MINGW64 ~/Documents/GitHub/three.js/examples/screenshots (dev)
$ npm run make-screenshot webgl_geometry_teapot

> three@0.172.0 make-screenshot
> node test/e2e/puppeteer.js --make webgl_geometry_teapot

node:internal/modules/esm/resolve:844
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'chalk' imported from C:\Users\erich\Documents\GitHub\three.js\test\e2e\puppeteer.js
    at packageResolve (node:internal/modules/esm/resolve:844:9)
    at moduleResolve (node:internal/modules/esm/resolve:901:20)
    at defaultResolve (node:internal/modules/esm/resolve:1121:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

```

Node.js v20.10.0

I tried updating npm, just to see, and I get a similar error.

Looking the original error over, hey, let’s try “npm install chalk” and see if that helps. Doing so gives lots of warnings (which I won’t show here) but says “added 796 packages, and audited 797 packages in 26s”

And, it then ran! With only one error!

```javascript
erich@DESKTOP-8O2QMBH MINGW64 ~/Documents/GitHub/three.js/examples/screenshots (dev)
$ npm run make-screenshot webgl_geometry_teapot

> three@0.172.0 make-screenshot
> node test/e2e/puppeteer.js --make webgl_geometry_teapot

Screenshot generated for file webgl_geometry_teapot
1 screenshots successfully generated.
Closing...
ERROR: The process "35572" not found.

```

---

<div class="post-metadata">

**Author:** ![erichaines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/erichaines/32/55238_2.png) [@erichaines](https://discourse.threejs.org/u/erichaines)\
**Post date:** [January 3, 2025, 1:28am UTC](https://discourse.threejs.org/t/how-do-i-make-a-new-screenshot-for-a-fix-ive-made-for-an-example-program/75928/4 "2025-01-03T01:28:50Z")

</div>

I spoke too soon! I thought the screenshot would solve the problem, but my PR continues to give failure warnings:

> List of failed screenshots: webgl\_buffergeometry\_attributes\_integer

My fix has nothing to do with this entirely separate example. What should I do? I think it’s unreasonable for me to upload a new screenshot for this example. It might “fix” my PR, but it would be changing a screenshot I should not change.

---

<div class="post-metadata">

**Author:** ![erichaines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/erichaines/32/55238_2.png) [@erichaines](https://discourse.threejs.org/u/erichaines)\
**Post date:** [January 3, 2025, 4:50pm UTC](https://discourse.threejs.org/t/how-do-i-make-a-new-screenshot-for-a-fix-ive-made-for-an-example-program/75928/5 "2025-01-03T16:50:00Z")

</div>

Happy finish: the PR was approved anyway. Good! I was a bit worried the “test failed” flag would doom it.