Rick
I am a creative frontend developer, I specialise in React, GLSL, postprocessing and R3F. I love to experiment with code and deal with complex topics.
Linting GLSL Files and Setup for Vscode
A Method of linting GLSL files as standalone files and importing into your JS files. This works as of december 2023.
Vertex Shaders, Fragment Shaders and Interpolation
A walk through on the vertex and fragment shaders, varyings, attributes and uniforms. Along with the process of interpolation betweeen varyings of different data points defined in vertex shaders that are passed to the fragment shader.
R&D - Recreating and mixing HTML with webgl workflow
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.
Realtime Effects Utilizing Canvas Textures - Expanding Cracked Floor
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.
Pulsating Volume in r3f and three
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.
Order Indpendent transparency, webgl and opaqueness
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.