Forum Replies Created
-
Found this in an old project I did two years ago:
Open your verge3d’s project js file (not visual_logic.js but projectname.js)1.
On top, after ‘use strict’: add thisimport { LUTPass } from "./modules/LUTPass/LUTPass.js"; import { LUTCubeLoader } from "./modules/LUTPass/LUTCubeLoader.js"; import { LUT3dlLoader } from "./modules/LUTPass/LUT3dlLoader.js"; import GUI from "lil-gui"; const lutsMap = { "name_of_your_cube_file.CUBE": null, };2. Further down, in createApp(){}, before loadScene() add this:
Object.keys(lutsMap).forEach((name) => { if (/\.cube$/i.test(name)) { new LUTCubeLoader().load("luts/" + name, (result) => { fillLutsMap(name, result, true); }); } else { new LUT3dlLoader().load("luts/" + name, (result) => { fillLutsMap(name, result, false); }); } }); function fillLutsMap(name, result, isCube) { delete lutsMap[name]; if (isCube && result.title == "Untitled") { result.title = name.replace(/.cube/i, ""); const idx = name.indexOf(" "); if (idx > 0) result.title = result.title.slice(0, idx); } else if (!result.title) result.title = name.replace(".3dl", ""); lutsMap[result.title] = result; }3. Then towards the end of the file, search runcode(),
Put this inside the function:
(I left out the GUI and the webgl2 fallback, if you need the gui, look up the code in the threejs module)if (!app.postprocessing) app.enablePostprocessing([]); const params = { enabled: false, lut: "name_of_your_cube_file", intensity: 0, use2DLut: false, }; const lutPass = new LUTPass(); app.postprocessing.composer.addPass(lutPass); setLutPassTexture(); function setLutPassTexture() { if (lutsMap[params.lut]) { const lut = lutsMap[params.lut]; lutPass.lut = params.use2DLut ? lut.texture : lut.texture3D; } }Files needed:
Make a directory ‘modules’ in the root, make a LUtPass directory there, add the three js files from the lutfiles modules
Put your CUBE file in the directory you set in point 2 (‘luts/)looked at one of cylindo’s demo’s: basically, it are prerendered turntables. It’s not realtime 3D, but rendered bitmaps. Cheaper for a few objects, expensive if you have a lot of objects and variable materials. They prob. have a custom pipeline to make it less labor intensive.
I did two such 2.5 configurators a couple of years ago, we basically rendered every configurable object to a transparent png and did imagestacking and -coloring serverside.
The second project was too large to do serverside and we needed more accurate coloring
control, so I wrote a photoshop plugin and workflow for that, it generated 3600 image combinations per hour (we needed like 300.000 final images). We ran it on one desktop with 3 additional Virtual Machines, and generated like 14.000 images per hour.thx,
had to rework it a bit, but I got it working like this:function renameChildrenOfClone(clonedObjectName) {
// Retrieve the cloned object from the scene using its name
const clonedObject = app.scene.getObjectByName(clonedObjectName);// Extract the index number from the parent object’s name
const indexMatch = clonedObjectName.match(/\d+$/);
const index = indexMatch ? indexMatch[0] : ”;for (let i = 0; i < clonedObject.children.length; i++) {
const child = clonedObject.children;if (child.name.startsWith(‘panel_frame’)) {
child.name = panel_frame${index};
} else if (child.name.startsWith(‘panel_glass’)) {
child.name = panel_glass${index};
}
}
}
