GLSL/Shader materials support

[fviz]

Hi there!

I searched on the docs and here for info on having custom shader materials for models, but couldn't find anything. Sorry if I missed something

Our class is having a blast creating with Hubs. I booted a Hubs Cloud instance on AWS for us and we are preparing an exhibition on the website. Some of us work with GLSL shaders for visual performances, and it would be awesome to embed some of their shaders in the space. However we couldn't find a way to mess with the materials on Spoke. Did someone try this before or have any tips on achieving this? I know three.js and Aframe support GLSL materials, and I guess the 'Simple Water' in Spoke also uses this kind of material, so it should be possible.

Thanks for any info!

[robertlong]

There's currently no way to do this in Spoke. You'd need to modify the glTF export pipeline to define a way to export shader materials from Spoke and import in Hubs. You could also start by directly implementing the shader material in Hubs.

I think the Skybox node would be a good reference on one way to implement a custom material.

https://github.com/mozilla/Spoke/blob/master/src/editor/nodes/SkyboxNode.js
https://github.com/mozilla/Spoke/blob/master/src/editor/objects/Sky.js
https://github.com/mozilla/Spoke/blob/master/src/ui/properties/SkyboxNodeEditor.js
https://github.com/mozilla/Spoke/blob/master/src/config.js#L81
https://github.com/mozilla/hubs/blob/00cc63e58079bebd63f3115b49038da60180d59b/src/components/skybox.js
https://github.com/mozilla/hubs/blob/00cc63e58079bebd63f3115b49038da60180d59b/src/gltf-component-mappings.js#L75

[fviz]

Thank you for the pointers! Those are great starting points. I'll dig in