{"id":26891224,"url":"https://github.com/bandinopla/three.js-visual-node-editor","last_synced_at":"2026-04-13T11:02:02.170Z","repository":{"id":285210993,"uuid":"957212386","full_name":"bandinopla/three.js-visual-node-editor","owner":"bandinopla","description":"Visual graph editor for Three TSL","archived":false,"fork":false,"pushed_at":"2025-05-23T21:24:55.000Z","size":823,"stargazers_count":43,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-23T22:29:24.132Z","etag":null,"topics":["3d","javascript","nodeeditor","nodes","shader","shadereditor","shadernode","threejs","tsl","typescript","webgl"],"latest_commit_sha":null,"homepage":"https://bandinopla.github.io/three.js-visual-node-editor/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bandinopla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-29T20:21:48.000Z","updated_at":"2025-05-23T21:24:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"6edd0d63-8667-4c34-abdd-c7140ed67da2","html_url":"https://github.com/bandinopla/three.js-visual-node-editor","commit_stats":null,"previous_names":["bandinopla/three.js-visual-node-editor"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bandinopla/three.js-visual-node-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bandinopla%2Fthree.js-visual-node-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bandinopla%2Fthree.js-visual-node-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bandinopla%2Fthree.js-visual-node-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bandinopla%2Fthree.js-visual-node-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bandinopla","download_url":"https://codeload.github.com/bandinopla/three.js-visual-node-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bandinopla%2Fthree.js-visual-node-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31749763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","javascript","nodeeditor","nodes","shader","shadereditor","shadernode","threejs","tsl","typescript","webgl"],"created_at":"2025-03-31T22:33:26.128Z","updated_at":"2026-04-13T11:02:02.165Z","avatar_url":"https://github.com/bandinopla.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# three.js TSL Visual Node Editor\n\n### :rocket: [Launch Editor (Alpha)](https://bandinopla.github.io/three.js-visual-node-editor/) :rocket:\nVideo preview of how it works: https://x.com/bandinopla/status/1910107425589330196\n*remember it is in alpha state, errors might occur, check the console and report if you can*\n\n\n[![cover](/git-cover.png)](https://bandinopla.github.io/three.js-visual-node-editor/) \n\n## **[!] Work in progress | Alpha state** \u003cbr/\u003e\nVisual node editor, inspired by [Blender's shader editor](https://www.blender.org/), is a tool to visually build [Three.js](https://threejs.org/) materials using [Three.js-Shading-Language](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language).  The socket proximity detection was inspired by [Kennedy Richard](https://x.com/KennedyRichard)'s [Nodezator's node editor](https://x.com/KennedyRichard/status/1823905562192449762)\n \n \n\n### :bookmark_tabs: Read the [WIKI / Documentation](https://github.com/bandinopla/three.js-visual-node-editor/wiki) to collaborate!\n\u003e short text, just an overview of the concepts. It is not a blob of text! The code is commented anyways.\n\n# Let's build this together!\nThe 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](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language) to know how to implement the TSL sintax.\n\nYou can also fix bugs or improve the code/interface. Just clone and do a pull request.\n\n# == STATUS == \n\n### TSL to Visual Nodes:\n- :white_check_mark: Time node\n- :white_check_mark: UV Channel\n- :warning: Preview\n- :warning: Animated pixel (not tested)\n- :warning: Functions\n- :warning: Uniform\n- Conditional / Logic\n    - :warning: If\n    - :warning: Declare \u0026 Assign variables\n    - :no_entry: Ternary\n    - :warning: Loop\n    - :warning: Swizzle\n    - :warning: Split\n- NodeMaterial\n    - :no_entry: fragmentNode\n    - :no_entry: vertexNode\n    - :no_entry: geometryNode\n    - :white_check_mark: colorNode\n    - :no_entry: depthNode\n    - :no_entry: opacityNode\n    - :no_entry: alphaTestNode\n    - Lighting\n        - :no_entry: emissiveNode\n        - :white_check_mark: normalNode\n        - :no_entry: lightsNode\n        - :no_entry: envNode\n    - Backdrop\n        - :no_entry: backdropNode\n        - :no_entry: backdropAlphaNode\n    - :no_entry: positionNode\n    - Shadows\n        - :no_entry: castShadowNode\n        - :no_entry: receivedShadowNode\n        - :no_entry: shadowPositionNode\n        - :no_entry: aoNode\n    - Output:\n        - :no_entry: rtNode\n        - :no_entry: outputNode\n- :no_entry: LineDashedNodeMaterial\n    - :no_entry: dashScaleNode\n    - :no_entry: dashSizeNode\n    - :no_entry: gapSizeNode\n    - :no_entry: offsetNode\n- :no_entry: MeshPhongNodeMaterial\n    - :no_entry: shininessNode\n    - :no_entry: specularNode\n- :white_check_mark: MeshStandardNode  \n    - :white_check_mark: roughness\n    - :white_check_mark: metallic \n- :no_entry: MeshPhysicalNodeMaterial\n    - :no_entry: clearcoatNode\n    - :no_entry: clearcoatRoughnessNode\n    - :no_entry: clearcoatNormalNode\n    - :no_entry: sheenNode\n    - :no_entry: iridescenceNode\n    - :no_entry: iridescenceIORNode\n    - :no_entry: iridescenceThicknessNode\n    - :no_entry: specularIntensityNode\n    - :no_entry: specularColorNode\n    - :no_entry: iorNode\n    - :no_entry: transmissionNode\n    - :no_entry: thicknessNode\n    - :no_entry: attenuationDistanceNode\n    - :no_entry: attenuationColorNode\n    - :no_entry: dispersionNode\n    - :no_entry: anisotropyNode\n- :no_entry: SpriteNodeMaterial\n    - :no_entry: positionNode\n    - :no_entry: rotationNode\n    - :no_entry: scaleNode\n\n\n- :white_check_mark: Image texture node\n- :warning: Operators (not fully tested)\n    - :white_check_mark: add\n    - :white_check_mark: sub\n    - :white_check_mark: mul\n    - :white_check_mark: div\n    - :white_check_mark: assign\n    - :white_check_mark: mod\n    - :white_check_mark: equal\n    - :white_check_mark: notEqual\n    - :white_check_mark: lessThan\n    - :white_check_mark: greaterThan\n    - :white_check_mark: lessThanEqual\n    - :white_check_mark: greaterThanEqual\n    - :white_check_mark: and\n    - :white_check_mark: or\n    - :white_check_mark: not\n    - :white_check_mark: xor\n    - :white_check_mark: bitAnd\n    - :white_check_mark: bitNot\n    - :white_check_mark: bitOr\n    - :white_check_mark: bitXor\n    - :white_check_mark: shiftLeft\n    - :white_check_mark: shiftRight\n- Math\n    - :white_check_mark: mx_noise_float\n    - :white_check_mark: abs  \n    - :white_check_mark: acos  \n    - :white_check_mark: all  \n    - :white_check_mark: any  \n    - :white_check_mark: asin  \n    - :white_check_mark: atan  \n    - :white_check_mark: bitcast  \n    - :white_check_mark: cbrt  \n    - :white_check_mark: ceil  \n    - :white_check_mark: clamp  \n    - :white_check_mark: cos  \n    - :white_check_mark: cross  \n    - :white_check_mark: dFdx  \n    - :white_check_mark: dFdy  \n    - :white_check_mark: degrees  \n    - :white_check_mark: difference  \n    - :white_check_mark: distance  \n    - :white_check_mark: dot  \n    - :white_check_mark: equals  \n    - :white_check_mark: exp  \n    - :white_check_mark: exp2  \n    - :white_check_mark: faceforward  \n    - :white_check_mark: floor  \n    - :white_check_mark: fract  \n    - :white_check_mark: fwidth  \n    - :white_check_mark: inverseSqrt  \n    - :white_check_mark: invert  \n    - :white_check_mark: length  \n    - :white_check_mark: lengthSq  \n    - :white_check_mark: log  \n    - :white_check_mark: log2  \n    - :white_check_mark: max  \n    - :white_check_mark: min  \n    - :white_check_mark: mix  \n    - :white_check_mark: negate  \n    - :white_check_mark: normalize  \n    - :white_check_mark: oneMinus  \n    - :white_check_mark: pow  \n    - :white_check_mark: pow2  \n    - :white_check_mark: pow3  \n    - :white_check_mark: pow4  \n    - :white_check_mark: radians  \n    - :white_check_mark: reciprocal  \n    - :white_check_mark: reflect  \n    - :white_check_mark: refract  \n    - :white_check_mark: round  \n    - :white_check_mark: saturate  \n    - :white_check_mark: sign  \n    - :white_check_mark: sin  \n    - :white_check_mark: smoothstep  \n    - :white_check_mark: sqrt  \n    - :white_check_mark: step  \n    - :white_check_mark: tan  \n    - :white_check_mark: transformDirection  \n    - :white_check_mark: trunc   \n\n- :white_check_mark: Value Node (float uniform ) \n- Textures\n    - :white_check_mark: Image texture\n    - :no_entry: Cube texture\n    - :no_entry: Triplanar texture\n- Attributes\n    - :white_check_mark: UV\n    - :no_entry: vertexColor\n    - :no_entry: custom attribute\n- Position:\n    - :white_check_mark: positionGeometry  \n    - :white_check_mark: positionLocal  \n    - :white_check_mark: positionWorld  \n    - :white_check_mark: positionWorldDirection  \n    - :white_check_mark: positionView  \n    - :white_check_mark: positionViewDirection  \n- Normal:\n    - :white_check_mark: normalGeometry  \n    - :white_check_mark: normalLocal  \n    - :white_check_mark: normalView  \n    - :white_check_mark: normalWorld  \n    - :white_check_mark: transformedNormalView  \n    - :white_check_mark: transformedNormalWorld  \n    - :white_check_mark: transformedClearcoatNormalView  \n- Tangent:\n    - :white_check_mark: tangentGeometry  \n    - :white_check_mark: tangentLocal  \n    - :white_check_mark: tangentView  \n    - :white_check_mark: tangentWorld  \n    - :white_check_mark: transformedTangentView  \n    - :white_check_mark: transformedTangentWorld  \n- Bitangent:\n    - :white_check_mark: bitangentGeometry  \n    - :white_check_mark: bitangentLocal  \n    - :white_check_mark: bitangentView  \n    - :white_check_mark: bitangentWorld  \n    - :white_check_mark: transformedBitangentView  \n    - :white_check_mark: transformedBitangentWorld  \n- Camera:\n    - :white_check_mark: cameraNear  \n    - :white_check_mark: cameraFar  \n    - :white_check_mark: cameraProjectionMatrix  \n    - :white_check_mark: cameraProjectionMatrixInverse  \n    - :white_check_mark: cameraViewMatrix  \n    - :white_check_mark: cameraWorldMatrix  \n    - :white_check_mark: cameraNormalMatrix  \n    - :white_check_mark: cameraPosition  \n- Model:\n    - :white_check_mark: modelDirection  \n    - :white_check_mark: modelViewMatrix  \n    - :white_check_mark: modelNormalMatrix  \n    - :white_check_mark: modelWorldMatrix  \n    - :white_check_mark: modelPosition  \n    - :white_check_mark: modelScale  \n    - :white_check_mark: modelViewPosition  \n    - :white_check_mark: modelWorldMatrixInverse  \n    - :white_check_mark: highpModelViewMatrix  \n    - :white_check_mark: highpModelNormalViewMatrix  \n- Screen:\n    - :white_check_mark: screenUV  \n    - :white_check_mark: screenCoordinate  \n    - :white_check_mark: screentSize  \n- Viewport:\n    - :white_check_mark: viewportUV  \n    - :white_check_mark: viewport  \n    - :white_check_mark: viewportCoordinate  \n    - :white_check_mark: viewportSize  \n- Blend Modes:\n    - :white_check_mark: blendBurn  \n    - :white_check_mark: blendDodge  \n    - :white_check_mark: blendOverlay  \n    - :white_check_mark: blendScreen  \n    - :white_check_mark: blendColor  \n- Reflect\n    - :no_entry:  reflectView\n    - :no_entry:  reflectVector\n- UV Utils\n    - :no_entry: matcapUV  \n    - :no_entry: rotateUV  \n    - :no_entry: spherizeUV  \n    - :no_entry: spritesheetUV  \n    - :no_entry: equirectUV  \n- Interpolation\n    - :no_entry: remap  \n    - :no_entry: remapClamp  \n- Random\n    - :no_entry: hash\n    - :no_entry: range\n- :no_entry: rotate \n- Oscillator\n    - :no_entry: oscSine\n    - :no_entry: oscSquare\n    - :no_entry: oscTriangle\n    - :no_entry: oscSawtooth\n- Packing\n    - :no_entry: directionToColor\n    - :no_entry: colorToDirection","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbandinopla%2Fthree.js-visual-node-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbandinopla%2Fthree.js-visual-node-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbandinopla%2Fthree.js-visual-node-editor/lists"}