Video preview of how it works: https://x.com/bandinopla/status/1910107425589330196 remember it is in alpha state, errors might occur, check the console and report if you can
Visual node editor, inspired by Blender's shader editor, is a tool to visually build Three.js materials using Three.js-Shading-Language. The socket proximity detection was inspired by Kennedy Richard's Nodezator's node editor
📑 Read the WIKI / Documentation to collaborate!
short text, just an overview of the concepts. It is not a blob of text! The code is commented anyways.
The idea is to let everybody add nodes and have this be the best shader node editor in the galaxy. To do so, you must check the Three.js-Shading-Language Docs to know how to implement the TSL sintax.
You can also fix bugs or improve the code/interface. Just clone and do a pull request.
-
✅ Time node
-
✅ UV Channel
-
⚠️ Preview -
⚠️ Animated pixel (not tested) -
⚠️ Functions -
⚠️ Uniform -
Conditional / Logic
⚠️ If⚠️ Declare & Assign variables- ⛔ Ternary
⚠️ Loop⚠️ Swizzle⚠️ Split
-
NodeMaterial
- ⛔ fragmentNode
- ⛔ vertexNode
- ⛔ geometryNode
- ✅ colorNode
- ⛔ depthNode
- ⛔ opacityNode
- ⛔ alphaTestNode
- Lighting
- ⛔ emissiveNode
- ✅ normalNode
- ⛔ lightsNode
- ⛔ envNode
- Backdrop
- ⛔ backdropNode
- ⛔ backdropAlphaNode
- ⛔ positionNode
- Shadows
- ⛔ castShadowNode
- ⛔ receivedShadowNode
- ⛔ shadowPositionNode
- ⛔ aoNode
- Output:
- ⛔ rtNode
- ⛔ outputNode
-
⛔ LineDashedNodeMaterial
- ⛔ dashScaleNode
- ⛔ dashSizeNode
- ⛔ gapSizeNode
- ⛔ offsetNode
-
⛔ MeshPhongNodeMaterial
- ⛔ shininessNode
- ⛔ specularNode
-
✅ MeshStandardNode
- ✅ roughness
- ✅ metallic
-
⛔ MeshPhysicalNodeMaterial
- ⛔ clearcoatNode
- ⛔ clearcoatRoughnessNode
- ⛔ clearcoatNormalNode
- ⛔ sheenNode
- ⛔ iridescenceNode
- ⛔ iridescenceIORNode
- ⛔ iridescenceThicknessNode
- ⛔ specularIntensityNode
- ⛔ specularColorNode
- ⛔ iorNode
- ⛔ transmissionNode
- ⛔ thicknessNode
- ⛔ attenuationDistanceNode
- ⛔ attenuationColorNode
- ⛔ dispersionNode
- ⛔ anisotropyNode
-
⛔ SpriteNodeMaterial
- ⛔ positionNode
- ⛔ rotationNode
- ⛔ scaleNode
-
✅ Image texture node
-
⚠️ Operators (not fully tested)- ✅ add
- ✅ sub
- ✅ mul
- ✅ div
- ✅ assign
- ✅ mod
- ✅ equal
- ✅ notEqual
- ✅ lessThan
- ✅ greaterThan
- ✅ lessThanEqual
- ✅ greaterThanEqual
- ✅ and
- ✅ or
- ✅ not
- ✅ xor
- ✅ bitAnd
- ✅ bitNot
- ✅ bitOr
- ✅ bitXor
- ✅ shiftLeft
- ✅ shiftRight
-
Math
- ✅ mx_noise_float
- ✅ abs
- ✅ acos
- ✅ all
- ✅ any
- ✅ asin
- ✅ atan
- ✅ bitcast
- ✅ cbrt
- ✅ ceil
- ✅ clamp
- ✅ cos
- ✅ cross
- ✅ dFdx
- ✅ dFdy
- ✅ degrees
- ✅ difference
- ✅ distance
- ✅ dot
- ✅ equals
- ✅ exp
- ✅ exp2
- ✅ faceforward
- ✅ floor
- ✅ fract
- ✅ fwidth
- ✅ inverseSqrt
- ✅ invert
- ✅ length
- ✅ lengthSq
- ✅ log
- ✅ log2
- ✅ max
- ✅ min
- ✅ mix
- ✅ negate
- ✅ normalize
- ✅ oneMinus
- ✅ pow
- ✅ pow2
- ✅ pow3
- ✅ pow4
- ✅ radians
- ✅ reciprocal
- ✅ reflect
- ✅ refract
- ✅ round
- ✅ saturate
- ✅ sign
- ✅ sin
- ✅ smoothstep
- ✅ sqrt
- ✅ step
- ✅ tan
- ✅ transformDirection
- ✅ trunc
-
✅ Value Node (float uniform )
-
Textures
- ✅ Image texture
- ⛔ Cube texture
- ⛔ Triplanar texture
-
Attributes
- ✅ UV
- ⛔ vertexColor
- ⛔ custom attribute
-
Position:
- ✅ positionGeometry
- ✅ positionLocal
- ✅ positionWorld
- ✅ positionWorldDirection
- ✅ positionView
- ✅ positionViewDirection
-
Normal:
- ✅ normalGeometry
- ✅ normalLocal
- ✅ normalView
- ✅ normalWorld
- ✅ transformedNormalView
- ✅ transformedNormalWorld
- ✅ transformedClearcoatNormalView
-
Tangent:
- ✅ tangentGeometry
- ✅ tangentLocal
- ✅ tangentView
- ✅ tangentWorld
- ✅ transformedTangentView
- ✅ transformedTangentWorld
-
Bitangent:
- ✅ bitangentGeometry
- ✅ bitangentLocal
- ✅ bitangentView
- ✅ bitangentWorld
- ✅ transformedBitangentView
- ✅ transformedBitangentWorld
-
Camera:
- ✅ cameraNear
- ✅ cameraFar
- ✅ cameraProjectionMatrix
- ✅ cameraProjectionMatrixInverse
- ✅ cameraViewMatrix
- ✅ cameraWorldMatrix
- ✅ cameraNormalMatrix
- ✅ cameraPosition
-
Model:
- ✅ modelDirection
- ✅ modelViewMatrix
- ✅ modelNormalMatrix
- ✅ modelWorldMatrix
- ✅ modelPosition
- ✅ modelScale
- ✅ modelViewPosition
- ✅ modelWorldMatrixInverse
- ✅ highpModelViewMatrix
- ✅ highpModelNormalViewMatrix
-
Screen:
- ✅ screenUV
- ✅ screenCoordinate
- ✅ screentSize
-
Viewport:
- ✅ viewportUV
- ✅ viewport
- ✅ viewportCoordinate
- ✅ viewportSize
-
Blend Modes:
- ✅ blendBurn
- ✅ blendDodge
- ✅ blendOverlay
- ✅ blendScreen
- ✅ blendColor
-
Reflect
- ⛔ reflectView
- ⛔ reflectVector
-
UV Utils
- ⛔ matcapUV
- ⛔ rotateUV
- ⛔ spherizeUV
- ⛔ spritesheetUV
- ⛔ equirectUV
-
Interpolation
- ⛔ remap
- ⛔ remapClamp
-
Random
- ⛔ hash
- ⛔ range
-
⛔ rotate
-
Oscillator
- ⛔ oscSine
- ⛔ oscSquare
- ⛔ oscTriangle
- ⛔ oscSawtooth
-
Packing
- ⛔ directionToColor
- ⛔ colorToDirection