glb -> PNG works, next is exercise for creating links to all glbs

This commit is contained in:
John Poole 2026-03-04 18:39:27 -08:00
commit 3ab8f35844
4 changed files with 69 additions and 1 deletions

7
exercises/README.md Normal file
View file

@ -0,0 +1,7 @@
This project/task is complex in that you have STL files marshalled from various repositories and then need to create derivative glb (glTF binary) versions and then create PNG images from the glb. I have desigend this so that the directory tree paths remain intact which helps identify the file's provenance. This project took several days and I had to winnow out the errors in my back-and-forth sessions with ChatGPT.
Another quirk is that i use Gentoo Linux which often complicates matters. Running this on Raspbian, Debian, or Ubuntu may have some steps such as installing certain packages which I have not accounted for. I've created these exercises to demonstrate and reproducible step so the read has an understanding of what is happening.
This started off as a desire to have more readable images as the 14 pages color printed manual had many of the black shapes undiscernable. I started off with having a 3D rendition which is great and allows me to study a part if I cannot match with what was shipped to me. Then I gave further thought about a printed manifest and the interactive 3D experience cannot be in that form of a deliverable. So, I built upon the glbs and create a workflow that generates PNGs.
One caveat: by placing all the PNGs in one directory, and creating soft links to all the properly staged glbs, I am assuming there will be no name collision. But given that the Voron project consists of many projects, the potential for file name collisions is very real. I leave that as an enhancement if anyone cares to build off this project.

View file

@ -0,0 +1,56 @@
# Goal
Create a PNG file from a glb (= glTF binary = Graphics Library Transmission Format https://en.wikipedia.org/wiki/GlTF).
## Introduction
This exercise will walk thorugh the creation of a PNG from the included glb. The purpose is to show the steps taken to create the PNG which can be duplicated in a mass conversion script.
You will be using the command console.
The scripts run will create a small server; however, it will automatically select a port needed for the process so you do not have to be concerned of a port conflict, e.g. 3001, if you have another server running elsewhere on the system. The kernel selects a currently unused high-numbered port (typically in the 3276860999 range on Linux).
## Prerequisites
Node package: puppeteer
## Steps
Open a command console and change to the following subdirectory:
cd web/batch_glb_png/glbs
for this exercise, create a soft link within glbs to just one file, we're only goint to perform a single PNG to demonstrate the scripts. Normally, directory glbs will have links to the actual glbs staged (how those links are created is another exercise)
ln -s ../../'[o]_stealthburner_LED_carrier.stl.glb' .
Example:
~/work/Voron/voronstl/web/batch_glb_png/glbs $ ln -s ../../'[o]_stealthburner_LED_carrier.stl.glb' .
Change to to the upper directory from within ```web/batch_glb_png``` and then launch the conversion script. Note the run will use the job.json I created, when time comes when you want to use yours, then specify the path and filename to your PNG profile:
cd ../batch_glb_png
date;time node batch_render.js job.json
Example:
jlpoole@jp ~/work/Voron/voronstl/web/batch_glb_png $ date;time node batch_render.js job.json
Wed Mar 4 18:17:13 PST 2026
PAGE console: error Failed to load resource: the server responded with a status of 404 (Not Found)
PAGE console: warn [.WebGL-0x7a40014ea00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels
PAGE console: warn [.WebGL-0x7a40014ea00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels
PAGE console: warn [.WebGL-0x7a40014ea00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels
WROTE /home/jlpoole/work/Voron/voronstl/web/batch_glb_png/pngs/[o]_stealthburner_LED_carrier.stl.png
real 0m1.667s
user 0m1.327s
sys 0m0.423s
jlpoole@jp ~/work/Voron/voronstl/web/batch_glb_png $
Result: a PNG 1227 × 994:
![]([o]_stealthburner_LED_carrier.stl.png)
# Conclusion
Using the steps above, you created a single PNG from a glb.
The next step is to fill the glbs directory with links to the glbs perviously generated by Blender and then execute the same/similar command from within the '''web/batch_glb_png ''' directory:
node batch_render.js [your PNG specification, if you want]
that will create a PNG for every glb.

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

View file

@ -29,8 +29,13 @@ function listFiles(dir, suffix) {
} }
function sanitizeBasename(p) { function sanitizeBasename(p) {
// While sanitizing is generally a good idea, it causes the output to deviate
// from the input, which makes it harder to verify that the right files were
// processed. For now, just use the original filename making this step a nullity.
const b = path.basename(p); const b = path.basename(p);
return b.replace(/[^\w.\-]+/g, '_'); //return b.replace(/[^\w.\-]+/g, '_');
return b; // No sanitization, just the original path
} }
function mimeTypeFor(p) { function mimeTypeFor(p) {