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

Questions
1

I’ve made a pull request 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. 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…

2

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.

3

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 :slight_smile:

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:

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
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:

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!

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.
4

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.

5

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