tentone / nunuStudio

Web powered cross-platform 3D, WebXR game engine.
https://nunustudio.org
MIT License
2.12k stars 317 forks source link

Chromakey shader with webcam #379

Closed quadrochave closed 4 years ago

quadrochave commented 4 years ago

Chromakey shader with webcam

Description

Hi ! I intend to use 3d scenes with computer vision, including AR and machine learning. After playing with p5.js and a-frame I think perhaps I use this technologies with nunustudio, that I love the Graphical Editor, features and facility

My first question is use chromakey shader with webcam texture for real time chromakey I tried various algorithms like threex.chromakey https://github.com/hawksley/Threex.chromakey and shadertoys examples, but the best result that I got is javascript library Seriously.js with the chromakey effect

Seriously.js Serioulsly.js chroma plugin

I' not sure how the much simple option: using Serioulsy as library imported inside Nunustudio's script editor or take the vertex and fragment shader from the chroma.js effect and uses inside Nunustudio's shader editor

Well, I have good experience with video tutorials and I hope soon to contribute sharing knowledge with my open-source projects

Version

0.9.6 -

Platform
tentone commented 4 years ago

Hello

This should be faily easy to achieve without any change in the editor. You could just import the library but its is not compatible with the last version of the editor.

So i copied to the code into a script and changed it to be compatible with the last versions.

Heres and example file. I will add this example to the shader tutorial. Thanks a lot!

asdadasd

chromakey.zip