Ever wanted to use postprocessing on HTML, well, this isnt exactly that but it recreates HTML, positions, widths and heights or a html base in the DOM. This recreation of HTML in a THREE world allows a whole new avenue for psotprocessing and special effects of a mirror of whats in the DOM. This is a prototype and comes as is if you decide to use or modify this workflow.
The is an extension to the article describing real time displacement mapping. We utilise the idea of branching / real time generation of unique shapes or lines on canvas and use this canvas to create canvas textures in threejs, with computers in later years able to do more and more this effect runs quite smoothly on even older devices.
This was a experiment producing a volume which was dynamic and moving. This piece involved using planes, noise and transparency. The final result being a pulsating colourful volume using psuedo normals to calculate how the light interacts with the planes in a shaderMaterial.
In our latest blog post, we dissect the transparency issue within WebGl, shedding light on the technical intricacies that govern rendering. We explore the nuances of prioritizing opaque meshes, revealing how this hierarchy can impact the visual landscape. Discover how to navigate this digital terrain, ensuring that your web graphics and visualizations maintain fidelity in the face of transparency challenges, even when utilizing lights.
Thefrontdev's take on an abstract blob which mimics an explosive type of event in space. Written in GLSL and using noise/particles/points with smoke textures on them. All built with the Three.js builtin materials and using onBeforeCompile to get all the standard light calculations from the builtin material.
A very quick walkthrough for doing realtime displacement of a subdivided plane using displacement maps in Three.js. This has a wide number of applications, for example terrain tools much like in unity, real time growth patterns or some sort of animated displacement. Combined with emission and potential postprocessing you could create some pretty cool projects with this technique.