Build 3D on the web,
node by node.
Design a scene as a graph, drive values with signals, and export a single <nf-scene> web component. This page starts with the core model, then lists the generated engine catalog.
The graph is the scene
Everything — geometry, materials, lights, camera, environment, and post — is a node in one graph. No hidden side-channels: what's in the graph is what renders.
Signals drive everything
Any value can be driven by a signal (time, scroll, pointer, a variable). Wire a signal into a socket and that property animates — no keyframes required.
Components are reusable nodes
Group a graph into a component and reuse it like any other node. Its inputs become the knobs. Publish it and others can install it.
Export & self-host
A scene exports to an <nf-scene> web component you host anywhere. The runtime is lean and runs in the browser — WebGPU with a WebGL2 fallback.
181 nodes, grouped by category
Generated from the engine catalog, so it always matches what ships. Each entry lists the node id and its input / output socket ids.
Generators 20
curve_bezierGenerate an evaluated cubic Bezier curve poly spline.curve_circleGenerate a cyclic poly spline circle.curve_lineGenerate a two-point poly spline line.gaussian_splatLoad ASCII PLY-like splats or generate procedural splat points.mesh_circleGenerate a flat circle mesh on the XY plane.mesh_coneGenerate a cone or truncated cone mesh.mesh_cubeGenerate a cuboid mesh with subdivisions.mesh_cylinderGenerate a cylinder mesh.mesh_gridGenerate a planar mesh on the XY plane.mesh_ico_sphereGenerate a subdivided icosphere mesh.mesh_importImport OBJ, ASCII STL, or glTF/GLB (with materials + vertex colors) into graph geometry.mesh_lineGenerate vertices in a line and connect them with edges.mesh_torusGenerate a torus mesh with quad faces.mesh_uv_sphereGenerate a spherical mesh with rings and segments.ribbon_strandsGenerate a flowing band of thin emissive ribbon strips for bloom/glow effects.skeletal_animation_importImport a skinned mesh clip and sample it from a signal-driven timeline.static_meshEmit a baked / imported mesh snapshot as geometry. The mesh literal carries positions, normals, UVs, indices, and per-vertex colors; the output is the standard Geometry value every modifier expects.svg_shapeExtrude an SVG path (the `d` attribute) into a solid 3D shape — for icon outlines, rounded rects, line-icon silhouettes.textGenerate 3D text mesh from real font outlines, with extrusion.ui_canvasGenerate a 2D UI frame surface with mouse hit outputs.Geometry 40
align_to_pathMove geometry to a sampled point on a curve path.bend_deformerBend geometry positions around an axis.bevelChamfer or round the edges of a mesh. segments=1 is a flat chamfer; higher segments round the edges and corners. profile shapes the rounded cross-section (superellipse r).capture_attributeCapture a field on geometry and expose it as a downstream field.curve_to_meshConvert curves into wire meshes or sweep a profile curve along them.displace_layerMove selected points along a direction by a signal/noise-driven height field.dual_meshCompute the topological dual of a mesh.edge_splitDuplicate selected mesh edges and separate adjacent faces.exploded_viewMove disconnected mesh parts apart with a single explode driver.extrude_meshExtrude selected mesh vertices, edges, or faces by an offset.fillet_curveRound poly spline corners with sampled circular arcs.flip_normalsReverse selected face winding to flip mesh normals.geometry_infoBounding-box centroid and extent of a geometry set (drive lights from objects).geometry_proximityCompute closest target position and distance fields for sample positions.join_geometryMerge any number of geometry inputs into one set.merge_by_distanceMerge selected vertices or points within a given distance.mesh_booleanConstructive solid geometry on two meshes: union (0), intersection (1), difference A−B (2), or xor (3). The operation is signal-drivable. Robust exact-arithmetic arrangement (Cherchi 2022).mesh_to_curveConvert mesh edges into poly splines (inverse of Curve to Mesh).morph_targetBlend mesh vertex positions toward a target geometry.product_mesh_optimizeWeld, triangulate, LOD-budget, and report heavy product mesh export weight.raycastCast field rays onto a target mesh and output hit fields.repeat_zoneIteratively apply a cumulative transform and emit a final state or trail.resample_curveGenerate evenly spaced points along each poly spline.sdf_boxSigned distance from an axis-aligned box using half extents.sdf_sphereSigned distance from a sphere; negative values are inside.sdf_to_meshPolygonize a signed-distance field into a mesh (surface nets).sdf_torusSigned distance from a torus in the XY plane.set_positionSet the position of each selected point to Position + Offset.shape_blendBoolean, smooth boolean, or morph composition of SDF distances; variadic for commutative ops (union / intersect / smooth_union / smooth_intersect).smooth_meshTaubin (lambda|mu) vertex smoothing — relaxes marching-cubes / SDF surface noise without shrinking the volume.spline_parameterBake per-point Factor (0–1), Length, and Index along each spline as named Point attributes.store_named_attributeStore a field on geometry as a named attribute.subdivide_meshDivide mesh faces into smaller faces without smoothing.subdivision_surfaceSmoothly subdivide mesh faces with Catmull-Clark-style rules.taper_deformerTaper geometry positions progressively along an axis.transform_geometryTranslate, rotate and scale geometry by a 4x4 transform.triangulate_meshConvert selected mesh faces to triangular faces.trim_curveTrim each poly spline to a factor or length range.twist_deformerTwist geometry positions progressively around an axis.wireframe_meshConvert selected mesh faces into inset wireframe strips.Distribute & instancing 7
clonerDuplicate a mesh into linear, grid, or radial clone patterns.component_instanceInstantiate shared component geometry with local transform/material overrides.distribute_points_on_facesScatter a deterministic point cloud across mesh faces.instance_on_pointsCopy an instance mesh onto every point, realized into one mesh.points_gridGenerate a centered 3D lattice of points.poisson_pointsGenerate a deterministic Poisson-disc point cloud on the XY plane.realize_instancesConvert instanced geometry into concrete geometry data.Materials & lights 19
brightness_contrastAdjust brightness and contrast of a color field.color_gradientInterpolate between two colors by a factor (a 2-stop color ramp).depth_gradient_layerColor material fields by distance from a vector or camera-space origin.gradient_material_layerMulti-stop linear, radial, or polar gradient layer for material color fields.hue_saturation_valueApply a color transformation in the HSV color model.layer_maskBlend a material color layer through a grayscale mask field.light_directionalA sun-style directional light (travel direction, color, intensity).light_pointAn omnidirectional point light (position, color, intensity, range).light_spotA cone spotlight (position, direction, color, intensity, range, cone angles).material_assetReusable named PBR material parameter set.material_stackCompose up to 8 material color layers over a base color (active count = layer_count).mix_colorMix two color fields using Blender color blend modes.mix_shaderBlend two geometry-carried material states.noise_material_layerMap procedural Perlin or Simplex noise into a blendable material color.outline_layerCreate inflated outline shell geometry with a stylized material.rgb_curvesApply curve preset corrections to the combined RGB value and each color channel.set_emissionBake a per-vertex emission color (color × strength) onto geometry for the renderer.set_materialAssign a PBR material (base color, metallic, roughness, emission) to geometry.wireframe_materialConvert mesh faces into renderable wire strips and assign their material.Camera, environment & post 4
cameraThe scene camera (eye, target, field of view). Drive its inputs with expressions or curves to animate it.environmentThe scene environment: gradient IBL, fog, and the visible background color.postScene post-processing: bloom, vignette, film grain, and color grade.render_settingsScene render-quality settings: shadows, ambient occlusion, MSAA, and screen-space reflections.Inputs & signals 64
animation_actionPersistent animation clip playback state from event trigger pulses.camera_switchTriggered eased interpolation between two camera configurations.curl_noiseDivergence-free 3D curl-noise flow field (Bridson 2007). Smooth swirling vectors that evolve with the Time input.destroy_objectPersistent hide/remove state triggered by event pulses.followBlend a position toward a target with damping and axis constraints.get_boolean_variableRead a boolean state variable by name (persists across frames).get_color_variableRead a color state variable by name (persists across frames).get_number_variableRead a numeric state variable by name (persists across frames).get_vector_variableRead a vector state variable by name (persists across frames).gradient_textureA gradient (linear / radial / spherical) field from a coordinate.image_textureBind an asset URL to a scene-wide image slot (base color, normal, bump, roughness).input_breakpointResponsive tier (0=mobile/1=tablet/2=desktop) and orientation from the viewport size.input_clickTrue while the primary pointer button is held.input_dragPrimary-pointer drag position, delta, and drop/snap signals.input_external_boolReads a host-injected bool by name. The default is emitted when the host hasn't supplied a value yet (initial preview, no API call, missing key).input_external_floatReads a host-injected float by name. The default is emitted when the host hasn't supplied a value yet (initial preview, no API call, missing key).input_external_vec3Reads a host-injected 3-component vector by name. The default is emitted when the host hasn't supplied a value yet (initial preview, no API call, missing key).input_indexThe index of each element in its domain.input_key_downOne-frame pulse when the configured key is pressed.input_key_pressTrue while the configured key is held.input_key_upOne-frame pulse when the configured key is released.input_material_indexRetrieve each element's material index from the geometry material_index attribute.input_mousePointer position: x/y centered in -1..1, plus uv in 0..1.input_mouse_downOne-frame pulse when the primary pointer button is pressed.input_mouse_hoverTrue while the pointer is inside the viewport.input_mouse_pressTrue while the primary pointer button is held.input_mouse_upOne-frame pulse when the primary pointer button is released.input_named_attributeRetrieve a named attribute from the evaluated geometry domain.input_normalThe normal direction of each element.input_positionThe location of each element of the geometry.input_preferencesVisitor OS display preferences: dark mode and reduced motion.input_scrollScroll progress through the component, 0 (top) to 1 (bottom).input_sectionActive page-section index and scroll progress through it (for scrollytelling).input_special_charactersOutput string characters that cannot be typed directly with the keyboardinput_startOne-frame pulse on the first runtime tick after the scene loads.input_stringProvide a string value that can be connected to other nodes in the treeinput_timeSeconds since the scene started (and the frame delta).input_viewportComponent size in pixels and its aspect ratio.look_atEuler rotation that turns a local forward axis toward a target.noise_textureFractal Perlin or Simplex (fBM) noise driven by a coordinate field.open_linkOn a one-frame pulse, open a URL in the same tab or a new one.play_soundOn a one-frame pulse, play an audio asset by id.play_videoOn a one-frame pulse, play a video asset by id.reset_all_variablesOn a one-frame pulse, reset every declared state variable to its default.reset_variableOn a one-frame pulse, reset a named state variable to its declared default.scene_switchTriggered scene selection with optional delay and fade progress.set_bool_variableOn a one-frame pulse, write the boolean value into a named state variable.set_color_variableOn a one-frame pulse, write the RGBA color value into a named state variable.set_variableOn a one-frame pulse, write the input value into a named state variable.set_vector_variableOn a one-frame pulse, write the vector value into a named state variable.signalA live animation signal as a field (time, scroll, pointer, …). Stays symbolic so it can be compiled to a GPU uniform.state_change_eventOne-frame pulses when a boolean state transitions.state_transitionTriggered eased interpolation between two numeric state values.texture_coordinateCoordinate fields for procedural texture and material nodes.timelineOutput normalized 0..1 progress from scene time.toggle_statePersistent flip-flop boolean toggled by a trigger pulse.trigger_areaBoolean signal when a position is inside a sphere or box volume.valueA single float value.variable_change_eventOne-frame pulses when a numeric signal changes beyond a threshold.variable_controlPersistent play/pause/reverse state from event trigger pulses.vector_inputA single vector value.voronoi_textureCellular (Voronoi) F1 distance field driven by a coordinate.wave_textureBanded sine-wave texture with optional fractal distortion.white_noiseA stable hash of the input coordinate, in [0, 1].Math 26
align_rotation_to_vectorRotate so a chosen local axis points along a target vector (Euler XYZ).boolean_mathBoolean logic over two boolean fields.clampClamps a value between a minimum and maximum.combine_xyzCombines X, Y, Z components into a vector.compareCompare two float fields, producing a boolean field.find_in_stringFind the number of times a given string occurs in another string and the position of the first matchfloat_curveMaps a float through a Blender-style curve preset.keyframe_interpolatorInterpolate a float value across authored keyframes (variable count, optional Bezier easing).map_rangeRemaps a value from one range to another.mappingTransform a vector field with translation, Euler XYZ rotation and scale.match_stringCheck if a given string exists within another stringmathPerforms a scalar math operation on float values.mixLinearly interpolates between two vectors by a factor.random_valueA per-element random float in [min, max], driven by id and seed.replace_stringReplace a given string segment with anotherreverse_stringReverse the order of the characters in a stringseparate_xyzSplits a vector into its X, Y, Z components.slice_stringExtract a string segment from a larger stringstate_blendBlend float, vector, color, and boolean property states from one signal.string_joinCombine any number of input stringsstring_lengthOutput the number of characters in the given stringstring_to_valueDerive a numeric value from a given string representationswitchSelect the True or False field per element based on a condition.trim_stringRemove characters from the beginning and end of a stringvalue_to_stringGenerate a string representation of the given input valuevector_mathPerforms a math operation on 3D vectors.Output 1
outputThe graph's geometry output sink; echoes its input.