webgi - realistic rendering for three.js is now free! With a new website for developers. Instantly create photo-realistic 3D e-commerce experiences without going deep into three.js graphics and shaders. Play around with the demo docs here -

pls submit this

Wow, very impressive, does it work well with R3F?

It can be used directly in React projects without r3f boilerplate. It's based on threepipe which includes all the primitives and post-processing that r3f/drei provides. To use it declaratively in React with r3f it's possible by passing a custom scene and renderer. Will soon release a component for r3f for that.

Thank you for your answer. looking forward to that, great work man. Have you checked out React Native WebGPU? Still a bit early in the process but I guess your plugin could work with that too?

The effects are designed for WebGL renderer right now. WebGPU renderer support will take some time till everything gets stable, probably with node materials.

Okay, I get it. Have you tried your plugin with expo-gl?

Not yet, if threejs or r3f work with custom shaders. There are tons of WebGL and browser based APIs that are used in some post processing plugins though, any idea if expo-gl support all of webgl2?

I checked out and it says: The following WebGL2RenderingContext methods are currently unimplemented: getFramebufferAttachmentParameter() getRenderbufferParameter() compressedTexImage2D() compressedTexSubImage2D() getTexParameter() getUniform() getVertexAttrib() getVertexAttribOffset() getBufferSubData() getInternalformatParameter() renderbufferStorageMultisample() compressedTexImage3D() compressedTexSubImage3D() fenceSync() isSync() deleteSync() clientWaitSync() waitSync() getSyncParameter() getActiveUniformBlockParameter(), I guess the rest should work.

Thanks, might require some testing, feel free to open a feature request or issues if you are interested in using it.

This crazy... Haven't tounch @threejs for months i have no clue it can create something like this

Thats awesome but is there any way to preview my model on website or on the canvas part so that i can apply those position settings in scroll trigger

You can drag and drop the model in the editor and check the position under camera in the inspector on right. But to create scrollable websites, the best way would be to create and bake an animation in blender and sync that with scroll on your website. Here is an example for that -

very cool!

@alightinastorm

Wow! Super quality.

very cool. webgi might become the default entrypoint for 3D on the web. curious if PBR materials / custom shaders can be injected on top of the pipeline?

Yes PBR materials are supported out of the box. For custom shaders and materials, it includes a complete material extension system where you can subscribe to hooks, edit shaders, attach additional UI etc. Check out the docs

very impressive!

What you did here is...

🔥🔥

💅

It's is possible to create anything

Any architecture or interiors use case?

Yes checkout this amazing implementation of interior decoration using webgi - by @Andersonmancini

beautiful.. I have no idea about the technical challenges of creating 3D objects, or photo realistic lighting and rendering, that too in a browser, but this looks amazing, almost real if you don't look close enough.. 🫡

This could democratize high-quality 3D visualization. The barrier to entry for immersive experiences just got lower. Exciting to see what developers create.