Quick start
- Press A or Tab to open the node picker.
- Add an Image Node or a procedural source such as Gradient, Noise, Shape, Text, Plasma, or Reaction Diffusion.
- Drag from an output port to an input port to build the graph.
- Add filters, adjustments, masks, transforms, compositing nodes, or glitch effects.
- Connect the final result to an Output node and export from the Output preview or the toolbar menu.
- For material testing, connect Base Color, Normal, Roughness, Alpha, and Height into an Output node, then switch the preview to 3D Material.
Useful shortcut: drag a wire onto empty canvas to open the node picker at that position, or drop it directly onto a node body to auto-connect to a compatible port.
Resolution model
Noodlz uses one procedural render model: the graph is evaluated at the active Output or export size. Procedural sources do not own their own pixel resolution.
Output / ExportControls final raster size. Export override temporarily requests a different render size without changing the graph.
UV nodesDefine coordinate distribution, scale, offset, tiling, rotation, and mapping. They do not control quality or output pixels.
GeneratorsEvaluate mathematically at the requested render size. Noise, Voronoi, Clouds, Text, Shape, Gradient, Plasma, Stripes, and Checkerboard are render-context aware.
Preview nodesInspection only. They scale the display, not the generated data and not final export size.
Reaction DiffusionSimulation Density controls the internal simulation grid only. Final pixels still follow Output or Export.
Image nodesImported bitmap dimensions are source data. Resize, Crop, Output, and Export are the explicit places where pixel dimensions are changed.
Rule: UV = coordinate space, Generator = procedural calculation, Output / Export = pixel dimensions.
UV system polish
v1.1.74C keeps the UV polish release and fixes the UV Coordinates mode semantics so every visible mode produces a distinct coordinate field in the UV Visualizer. Legacy Screen mode was removed from the dropdown because it is identical to Cartesian in the current single 2D render context.
UV CoordinatesCartesian, Centered, Polar, Radial, Tiled, and Spiral modes with aspect-safe centering.
UV TransformFit, Fill, Stretch, Center, Reset, linked scale, tile, flip, offset, and rotation controls.
UV VisualizerGrid, checker, RGB, and polar previews for seeing the active UV field. The grid view now makes mode differences visible at default settings.
Rule preservedUV nodes still modify coordinates only; Output / Export remains the only final raster size owner.
Export + Material QA Fixes
v1.1.75A tightens the export and material-map workflow so Single Image export, Material Maps export, connected-channel status, filename templates, and Blender handoff metadata all describe the same output state.
Single ImageExports only the current 2D Base Color output using PNG, JPEG, or WebP. Export override rerenders the graph at the requested temporary size.
Material MapsExports connected Base Color, Normal, Roughness, Alpha, and Height inputs as PNG channel maps. Missing optional channels are skipped, not silently fabricated.
Channel statusThe export dialog now marks connected and missing material channels directly on the channel buttons, and the JSON sidecar records the same availability state.
Filename contractMaterial filenames are generated from the selected template with pack, channel, size, date, project, and version tokens.
Blender notesBase Color is documented as sRGB. Normal, Roughness, Alpha, and Height are documented as Non-Color data with channel-specific import guidance.
Runtime auditA lightweight startup check verifies export controls, material channel schema, and Output material inputs are present.
Canvas basics
The canvas is an infinite workspace. Nodes live in world space, while toolbar overlays, dialogs, and the Navigator live in screen space.
PanHold Space and drag, or use middle mouse drag.
ZoomUse the mouse wheel. The zoom percentage is shown in the top right.
Frame viewPress F to frame selected nodes, or Shift F to fit all graph nodes.
SelectClick nodes, Shift-click to add/remove, or drag on empty canvas for marquee selection.
FramesFrames are visual-only containers. Use them to organize nodes without changing execution.
NavigatorThe minimap shows nodes, edges, and the current viewport. Drag it to pan within graph bounds.
Connections and graph editing
Ports define what data can flow between nodes. Image, mask, color, and UV style data stay separated by compatible port types.
ConnectDrag from an output port to an input port.
Lazy ConnectDrop a wire onto a node body and Noodlz picks the first compatible port.
Spawn + connectDrag a wire onto empty canvas to open the node picker and insert a connected node.
Edge RewireDrag near an existing wire endpoint to detach and reconnect that side.
Insert into edgeDrop a selected node or chain onto an edge to insert it into the flow.
Lift from chainAlt-drag a selected node or chain to pull it out while Noodlz bridges upstream to downstream.
Signal tracing
Tracing helps large node graphs explain themselves visually.
One-shot traceDouble-click a node, press T, or use the node context menu to send an animated signal through its upstream and downstream connections.
Animated Trace ModePress Shift T or use Trace Path (loop) to keep the active path highlighted with a looping signal animation.
Direction colorsUpstream and downstream paths use different trace colors so you can see what feeds a node and where it continues.
ExitPress Esc or trigger Trace Mode again to leave the persistent path view.
Procedural sources
Source nodes generate image data without needing an image input. They are useful as final visuals, masks, displacement maps, blend sources, or texture layers.
Noise / VoronoiUse procedural fields for texture, masks, displacement, or stylized patterns.
ShapeCreate circles, rectangles, polygons, stars, and other filled procedural shape layers.
Clouds / PlasmaGenerate organic or colorful abstract source material.
CloneTile or arrange image copies in linear, grid, or radial patterns.
Reaction Diffusion
Reaction Diffusion is an interactive simulation source for organic procedural patterns. It can run live, pause, reset, bake the current frame into an Image node, and render different chemical layers or mixes.
Live simulationUse play/pause and step controls to evolve the texture over time.
Influence inputWhen enabled, connected image data can influence or constrain the simulation.
Advanced controlsAdjust simulation density, feed/kill behavior, render layer, color mode, and influence blending. Final raster size follows Output / Export.
BakeConvert the current simulation frame into a normal Image node and rewire downstream connections.
Erosion
Erosion is a hydraulic erosion simulation that carves valleys and deposits sediment on a connected heightmap, using the same droplet-based technique used in terrain tools. It needs a Heightmap input (Noise, Plasma, Clouds, or any grayscale image work well) and can run live, pause, reset, bake the current frame into an Image node, and render different result layers.
Heightmap inputConnect any image; brightness is read as elevation, the same convention used by Height to Normal.
Live simulationUse play/pause and step controls to keep eroding the same terrain over time, exactly like Reaction Diffusion.
Render layersView the Eroded Height, Sediment Deposit, Flow Accumulation, or the Difference from the original heightmap.
BakeConvert the current eroded frame into a normal Image node and rewire downstream connections, ready for Height to Normal or Roughness Map.
Image input
Image nodes accept dropped, pasted, or selected PNG, JPEG, WebP, GIF, BMP, and SVG files. Images are stored in local browser storage and referenced by project JSON rather than being inlined by default.
The node keeps source metadata such as filename, MIME type, file size, original resolution, and aspect ratio. This metadata is propagated through the graph so Output can copy the current source size into editable export fields with Use Source Size.
Text and typography
Noodlz now uses Text 2.0 as the single text generator, with a compact preview-first editor.
- Text 2.0 renders transparent text as an image layer with wrapping, alignment, padding, style controls, color chips, and font controls.
- Text 2.0 is the default and only exposed text node, with presets, inline styling controls, color chips, and an expandable editor.
- Text output behaves like image data, so it can feed masks, blend nodes, glitches, distortions, and final Output nodes.
Crop, preview, and export
The visual Crop node shows the input image and crop overlay together so resizing and positioning feel like one direct manipulation interaction.
Visual CropDrag the crop rectangle or handles directly in the node UI.
Resizable previewsOutput, image, curve, crop, and related visual panels can be resized for better inspection.
Export ImageChoose Single Image or Material Maps. Single Image uses the Output size by default; Override Export Size is temporary and never changes the graph. Material Maps reveals channel export controls only when needed.
Copy PNGCopy the current export as PNG where the browser supports clipboard image writing.
3D viewport PNGIn 3D Material mode, use the small PNG button in the viewport to save the current material preview shot.
Material Preview
Output nodes can switch between a flat 2D Texture preview and a 3D Material preview. The 3D view maps the Output result onto test objects so seams, tiling, distortion, normals, roughness, and lighting behavior can be judged before using the texture in tools such as Blender.
2D TextureShows the final flat Base Color result and remains the normal image export path.
3D MaterialShows the material on Plane, Cube, Rounded Cube, Sphere, Cylinder, Torus, or Torus Knot.
Viewport controlsDrag to orbit, mouse wheel to zoom, double-click to reset, or use reset / fit / play-pause / PNG buttons in the viewport.
World-locked lightingStudio lights stay fixed while the camera moves, making highlights and material response easier to judge.
QA overlaysWireframe and seam overlays help inspect UV structure, distortion, and object-specific mapping problems.
Texture orientationFlip U, Flip V, and 90-degree rotation controls are preview-only tools for checking direction and mapping.
3D Mapping Modes
3D Material Preview supports several texture projection modes so the same generated texture can be judged as a seamless material, a wrapped label, or flat artwork on a 3D object.
UV MaterialUses the object's mesh UVs. Best for seamless procedural materials and the default for material demos.
BoxUses hard face projection on Cube and blended/triplanar projection on Rounded Cube and curved shapes. Best for seamless materials, stone, plastic, and sci-fi panels.
FrontProjects the texture from the object's front. Best for posters, logos, text graphics, cropped images, and non-tileable artwork.
CylindricalWraps around the vertical axis. Useful for cans, bottles, columns, and tube-like objects.
SphericalUses longitude/latitude mapping. Useful for spheres, planets, and radial texture checks.
Material Channels
The Output node supports optional material inputs for 3D preview. These channels affect only the 3D Material preview and material export. The normal 2D preview and standard 2D export continue to use Base Color.
Base ColorThe main color/albedo texture. If only one channel is connected, connect it here.
NormalA tangent-style normal map used by the 3D shader to fake surface detail without changing geometry.
RoughnessA grayscale channel controlling how sharp or soft the specular highlight appears in the material preview.
AlphaA grayscale/alpha channel for previewing transparency and exporting an opacity map for downstream tools.
HeightA grayscale height/displacement channel for material inspection and export. It is previewed as a grayscale map in this version.
Channel badgesThe Output preview shows BC, N, R, A, and H badges so connected channels and fallback channels are visible at a glance.
Preview modesSwitch between Material, Color, Normal, Roughness, Alpha, and Height modes when checking individual channels.
FallbacksMissing Normal uses a flat normal. Missing Roughness uses the Default Roughness control from the Material section.
Important: Single Image export is the normal 2D export. Switch the Export dialog to Material Maps when you want Base Color, Normal, Roughness, Alpha, and Height files.
Alpha + Height Channels
v1.1.68 extends the Output material workflow with optional Alpha and Height inputs. These are designed for Blender-style opacity and displacement workflows without changing the standard 2D Output path.
Alpha PreviewShows the connected Alpha input as a grayscale mask. In Material mode it controls viewport opacity when connected.
Height PreviewShows the connected Height input as a grayscale height/displacement map. It is export-ready but does not displace geometry yet.
FallbacksMissing Alpha falls back to fully opaque. Missing Height falls back to neutral 50% gray.
Material PackMaterial export now includes Alpha and Height PNGs when those channels are connected, plus JSON sidecar metadata.
Material Utility Nodes
The Material node category contains helper nodes for deriving material maps from procedural sources. They are designed to make Base Color, Normal, and Roughness workflows quick to build.
Height to NormalConverts a grayscale height image into a normal map for the Output Normal input.
StrengthControls how strongly height differences become normal-map surface detail.
Invert X / Invert YFlips the red or green normal direction when a target app expects a different normal convention.
Tile EdgesSamples across texture edges so seamless procedural textures keep continuous normals.
Roughness MapConverts luminance or alpha into a roughness channel with invert, contrast, gamma, min, and max controls.
Invert RoughnessUseful when a source reads visually like glossiness instead of roughness.
3D Demos
The Demos menu is split into 2D Demos, 3D Demos, Benchmark, and Stress Tests. 3D Demos create complete material graphs with Base Color, Normal, Roughness, and, where useful, Alpha and Height channels, plus a preconfigured Output node in 3D Material mode.
Procedural RockOrganic noise, cellular height, Height to Normal, and rough stone response.
Ceramic TilePatterned tiles with normal detail, glossy ceramic surface preset, and rounded cube preview.
Brushed MetalDirectional stripe detail, metallic surface settings, and cylinder preview for anisotropic-feeling tests.
Fabric WeaveCrossed weave pattern with high roughness and soft material response.
Sci-Fi PanelPanel-line style texture with height-derived normals and a plastic/metal hybrid preview.
Rough PlasticSimple noisy plastic material for testing roughness and normal intensity.
Alpha + Height ReliefUses all five material inputs: Base Color, Normal, Roughness, Alpha, and Height. Good for testing opacity, height export, and channel previews.
Quick material workflow
A typical procedural material uses one source chain for color and reuses related grayscale structure for Normal and Roughness.
- Create a source such as Noise, Voronoi, Checkerboard, Stripes, Clouds, or Shape.
- Build the color look with Gradient, Colorize, Levels, Blend, or other 2D nodes.
- Send a grayscale structure map into Height to Normal and connect it to Output → Normal.
- Send the same or a related grayscale map into Roughness Map and connect it to Output → Roughness.
- Connect the color chain to Output → Base Color.
- Switch Output to 3D Material, choose a mesh, then test with Material, Normal, Roughness, Wireframe, and Seam tools.
Noise / Voronoi → Colorize / Levels → Output Base Color
Noise / Voronoi → Height to Normal → Output Normal
Noise / Voronoi → Roughness Map → Output Roughness
Optional masks → Output Alpha / Height
Output → 3D Material Preview → Material mode
Texture QA tip: test on at least Sphere, Cylinder, Rounded Cube, and Torus Knot. Sphere reveals polar distortion, Cylinder reveals seam direction, Rounded Cube reveals bevel behavior, and Torus Knot stresses UV continuity on curved forms.
Blender Export Workflow
Material Export is designed for a simple Blender handoff: export the connected material channels from the Output node, then plug them into a Principled BSDF material.
Filename templatesUse the pack name and template controls to create predictable files such as material_basecolor.png, material_normal.png, and material_roughness.png.
Base ColorImport as an Image Texture and connect Color to Principled BSDF Base Color. Use sRGB color space.
NormalImport as Non-Color, feed it into a Normal Map node, then connect the Normal Map output to Principled BSDF Normal.
RoughnessImport as Non-Color and connect Color to Principled BSDF Roughness.
AlphaImport as Non-Color and connect to Alpha. Enable material transparency/blend mode in Blender if the object should be see-through or cut out.
HeightImport as Non-Color. Use it with Bump or Displacement depending on the Blender material setup and render engine.
JSON sidecarThe material JSON records which channels were connected, filenames, output size, and preview settings for reference.
Success summaryAfter export, Noodlz shows saved and skipped files so missing optional channels are clear.
Tip: use PNG material exports for channel maps. Keep Normal, Roughness, Alpha, and Height as Non-Color data in Blender. Noodlz normal maps follow the common OpenGL +Y convention; use the Height to Normal Invert Y control if a target pipeline expects the opposite green-channel direction.
Projects, menu, and storage
Noodlz runs as one local HTML file. Projects are saved and loaded as JSON. Images can stay in local browser image storage or be embedded into a portable .noodlz.json file from the Save Project dialog.
ProjectNew Project, Save Project, Import Project, Export Image, and Validate Project.
CanvasAdd Note and Add Frame.
DemosOpen 2D Demos, 3D material demos, benchmark tools, and stress-test graph presets.
ThemeToggle dark/light mode.
HelpOpen Documentation or Keyboard Shortcuts.
Clear CanvasClear the current canvas after an in-app confirmation.
Dialogs: project confirmations, alerts, prompts, save options, and validation messages use the custom Noodlz dialog system. Native file pickers and system save pickers remain browser-controlled for security.
Core shortcuts
Tab AAdd node menu
HKeyboard shortcuts
FFrame selected nodes
Shift FFit all nodes
TAnimated signal trace from selected node(s)
Shift TToggle animated Trace Mode
XDelete selected nodes
Cmd/Ctrl DDuplicate selected nodes
GCreate a visual frame around selected nodes
Shift GUnframe selected frame
MMute / unmute selected nodes
Alt DragLift selected node(s) or chain from the graph and auto-rewire external upstream to downstream
Cmd/Ctrl SOpen Save Project dialog
Cmd/Ctrl EnterForce graph re-run
EscClose menus/modals, exit Trace Mode, or clear selection
Graph SnippetsRight-click the canvas to open saved snippets, or select nodes and use the node menu to save the selection as a reusable setup.