[Preview] Triangles and debug pages#13
Open
apresmoi wants to merge 5 commits intoLayoutitStudio:mainfrom
Open
Conversation
Adds a new "triangle" shape that renders an arbitrary planar polygon (N >= 3 vertices) as a single matrix3d-transformed SVG. Includes a mergePolygons pass that consolidates coplanar same-color adjacent triangles into N-vertex polygons, plus a parseObj loader for .obj imports. Bundles the existing OBJ samples under public/gallery/obj/ and an internal /debug/* set of pages (sphere, platonic, triangle-editor, spans, obj) for testing.
- Add `polygon` shape (alongside `triangle`) — same renderer, accepts N >= 3 vertices. - Drop bbox requirement for triangle/polygon: introduce `InputVoxel` (loose, bbox optional) and `normalizeVoxels` that derives x/y/z/x2/y2/z2 from vertices at scene-context ingress. Strict `Voxel` stays the internal type. - Add `parseGltf` (.glb) loader to core — reads positions/indices/material baseColorFactor, applies node TRS transforms, supports `upAxis: "y" | "z"`. - Add `parseMtl` companion loader for OBJ material files; `useObjModel` fetches and merges colors when `mtlUrl` is provided. - Add `DirectionalLight` to GridContext + `directionalLight` prop on VoxScene. Triangle/polygon renderer applies channel-wise Lambert shading with configurable direction, ambient strength, light/ambient colors. - Rename debug page Obj → Meshes, route to /debug/meshes; add Light controls (azimuth/elevation/ambient/colors with enable toggles).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hey! This PR adds triangle / polygon shapes to voxcss, plus the loaders and tooling needed to actually use them.
What's new in voxcss core
shape: "triangle"andshape: "polygon"— both render through the same SVG-on-matrix3drenderer (triangle is the strict 3-vertex case, polygon accepts any N ≥ 3 coplanar vertices). Backface culling is automatic viabackface-visibility: hiddenon each face's outward normal — no per-frame JS.Voxelstays strict internally, but the public input typeInputVoxellets you write{ shape: "triangle", vertices: [...], color }without passingx/y/z/x2/y2/z2. A newnormalizeVoxelsstep at scene-context ingress fills them in.mergeVoxels: "poly"— new merge mode that walks the triangle adjacency graph and consolidates coplanar same-color triangles into N-vertex polygons (sphere / dodecahedron meshes shrink ~50% in DOM count without losing geometry).parseObj,parseMtl,parseGltf— runtime loaders for.obj(with companion.mtlfor proper Kd colors) and.glb(full glTF 2.0 with node TRS traversal, baseColorFactor materials, configurable up-axis). Output isInputVoxel[]you feed straight into<VoxScene>.DirectionalLight— opt-indirectionalLightprop on<VoxScene>that drives per-triangle Lambert shading. Channel-wise, so a warm light on a blue surface gives proper tinted highlights, not just brightness scaling. Configurable direction + ambient strength + light/ambient colors.Internal /debug pages (not committed for end-users)
Built a small debug shell under
/debug/*with a portal-based layout (DebugLayout+DebugSection+DebugScene), shared control primitives (Pills,Slider,Select,Checkbox), and live FPS / DOM / camera-rotation stats. Pages:/debug/sphere— voxelize a sphere as cubes (with merge modes) or geodesic triangles (with subdivision + poly-merge), side-by-side voxcss + canvas reference./debug/platonic— all 5 platonic solids + cuboctahedron, render as triangles or native polygons./debug/triangle-editor— interactive vertex editor for arbitrary triangles, with copy-as-JSON./debug/spans— a hand-crafted scene of multi-cellx2/y2/z2voxels (cubes, slabs, columns, ramps, wedges, spikes, 4-spike pyramid) for testing merge-mode behavior on shape voxels./debug/meshes— gallery-style picker for the OBJ/GLB samples inpublic/gallery/. Hooked into a unifieduseObjModelthat handles both formats + optional .mtl. Includes mesh decimation (vertex clustering, shortest-edge collapse, QEM) and the lighting controls.Other things that landed along the way
voxelToPolygonsforwedgewas missing — was rendering as cube).mergeVoxelswas z-slicing every multi-cell-tall voxel, which broke ramps/wedges/spikes/triangles. Now only cubes get sliced.isCoveredbecause the bbox-based check over-occludes sparse surface meshes.The bulk of the diff is the bundled
public/gallery/obj/*.obj+gallery/glb/tree.glbtest assets — the actual core/react/html source changes are small and mostly additive.