Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NodeEditor: Node-based for native objects #23165

Merged
merged 14 commits into from
Jan 19, 2022
Merged

Conversation

sunag
Copy link
Collaborator

@sunag sunag commented Jan 7, 2022

Introduction

After many attempts to create an API to define a NodeMaterial from editor to some specific Mesh I created a system so that any Three.js object could be used as Node/*Editor and that NodeEditor could recognize and handle conflicts through the API.

This way we can bring all the native elements of Three.js: Geometry, Camera, Animations, etc

https://raw.githack.com/sunag/three.js/dev-scene-apply/examples/?q=playground#webgl_materials_nodes_playground

image

Errors viewer

image

Cable color by Node type

image

ContextMenu opens on Top or Right

If it detects that it has reached the edge of the screen.

image

Node creator input / Search

Use this tool to create a new Node or to bring a Mesh from Three.js Scene to NodeEditor

image

This contribution is funded by Google via Igalia.

@sunag sunag changed the title NodeEditor: Node-based for all NodeEditor: Node-based others objects Jan 7, 2022
@sunag sunag changed the title NodeEditor: Node-based others objects NodeEditor: Node-based other objects Jan 7, 2022
@sunag sunag changed the title NodeEditor: Node-based other objects NodeEditor: Node-based for other objects Jan 7, 2022
@sunag sunag changed the title NodeEditor: Node-based for other objects NodeEditor: Node-based for native objects Jan 7, 2022
@sunag
Copy link
Collaborator Author

sunag commented Jan 7, 2022

It is too an step to we can be a JSNodeBuilder to create CPU codes in JS using NodeEditor.

@looeee
Copy link
Collaborator

looeee commented Jan 7, 2022

I'm having trouble adding any nodes - when I type a node then click on the node name nothing happens.

@sunag
Copy link
Collaborator Author

sunag commented Jan 7, 2022

Hmm.. I will fix this, you can press enter too

@looeee
Copy link
Collaborator

looeee commented Jan 7, 2022

Great, seems to be working again now. This is a lot of fun to play with :)

Is there a reason why Color doesn't accept inputs? I wanted to try hooking: timer -> sin -> color.r, for example.

@sunag
Copy link
Collaborator Author

sunag commented Jan 7, 2022

@looeee Still I need to add JoinNode and SplitNode for NodeEditor. I must add this next week

@mrdoob
Copy link
Owner

mrdoob commented Jan 14, 2022

I guess we should rename this from webgl_materials_nodes_playground to webgl_nodes_playground at this point? 😅

@sunag
Copy link
Collaborator Author

sunag commented Jan 17, 2022

@looeee I add SplitNode and JoinNode to Editor.

image

@mrdoob mrdoob added this to the r137 milestone Jan 19, 2022
@mrdoob mrdoob merged commit 9ba3581 into mrdoob:dev Jan 19, 2022
@mrdoob
Copy link
Owner

mrdoob commented Jan 19, 2022

Thanks!

@sunag sunag deleted the dev-scene-apply branch January 7, 2023 17:39
@jo-chemla
Copy link
Contributor

jo-chemla commented Oct 16, 2024

Quick note: I often stumble on this issue and then spend some time trying to find the url of threejs node-material editor, which isn't really advertised. It is called playground and is available here, hope it is useful to anyone including my future self!

https://threejs.org/playground/

@mrdoob
Copy link
Owner

mrdoob commented Oct 22, 2024

The link is back 👋 d3646a4

@jo-chemla
Copy link
Contributor

Thanks, did not know it was there in the first place!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants