Each face has a single texture holding a bunch of face positions and the correct face is selected as needed. That way you only need to upload one texture per person. Amazing by
@weare60fps
#threejs
#webgl
#creativecoding
This is one of my favorite executions of motion in Webgl by
@hellomondaycom
Not only it's satifying to flip pages, but it supports and guides you through a powerful message!
See it here:
Talking about how glass refraction works and other cool webgl glass tricks tomorrow in my newsletter :)
Demo out right now!🤠
#threejs
#webgl
#creativecoding
If you want to learn shaders but find math complicated. I made a free "Intro to shaders for Web Developers" 6-part email course that takes you 0 to creating these shaders.
No complex math knowledge is needed, only sums and multiplications. Enjoy!
Learning about how to best use lights in threeJS and lots some resources on how to bake, and demos with amazing bakes🖼️
Check your email inbox!
#threejs
#webgl
#creativecoding
Made this little "rock" demo for this week's newsletter issue on tone mapping.
Lots of fun with shaders (no tone mapping included) 👾
#threejs
#webgl
#creativecoding
I've been dying to learn how to make something like
@ScieCode
's demo. Judging by the code this is some kind of constrained cloth sim, but not sure 🧐
#glsl
#webgl
#creativecoding
For everyone looking to get started in ThreeJS, and curious on how I got started. Today newsletter's resources and inspiration are for you🎓
Check your email inbox and show me whatever you learn!
#threejs
#webgl
#creativecoding
Currently writing a short "intro to shaders" free course where we make these two sketches over the course of a couple lessons
Hoping to release it this week along with a surprise for the more experienced folks :)
#threejs
#webgl
#creativecoding
Lots of learning resources, websites and inspiration on cloth simulations in tomorrow's newsletter 🧙
Learned a lot making this demo 🙌
#threejs
#webgl
#creativecoding
Sharing some of the sickest WebGL Intro Animations, and resources on how to make them tomorrow in my newsletter!
Little late this week, but gonna be worth it!
#threejs
#webgl
#creativecoding
Lots of resources and pretty demos about with pretty colors in today's newsletter!
Check your email inbox, bunch of pretty colors there!
Next week building upon this to talk about color management!
#threejs
#webgl
#creativecoding
A breakdown of this WebGL hand intersection effect in today's newsletter 🫲
Check your email inbox!
Next week: Generative Cosine Palettes
#threejs
#webgl
#creativecoding
This works with vertex buffer animation, each face centroid is extracted and used to get a different bezier curve for each vertex. Then, the vertex shader does the magic
Made by
@zadvorsky
. My all-time favorite
@codepen
#threejs
#webgl
#creativecoding
Lots of cool demos and articles on Line rendering. No Tube Geometries allowed in todays newsletter 👾
Check your email inbox!
#webgl
#threejs
#creativecoding
Rendering lines has been the bane of my existence for far too long
So, sharing some resources about it in my newsletter this week :)
#webgl
#threejs
#glsl
Writing about vertex shaders this week in my newsletter :)
Releasing the demo tomorrow and the newsletter on Wednesday!👻
#threejs
#webgl
#creativecoding
Scrolling through beautiful Webgl animations = ⭐️
Scrolling through twitter = ❌
Lots of demos and tutorials in my newsletter. Check your inboxes!
#webgl
#threejs
#creativecoding
This almost looks like a depth of field but it's just a css blur at the top. Really simple but amusing demo by
@lichingchester
Not sure if performance-wise it's good to use css blur on top of a canvas, though
#threejs
#glsl
#creativecoding
Sharing resources on the essential creative dev's component in my newsletter, The WebGL slider/scroller🖼️
Check your inbox or the website for extra content :)
#threejs
#webgl
#creativecoding
Out of all the things I've made, this one is my personal favorite by far.
The title for an upcoming article on rendering text. Heavily inspired by
@zachlieberman
's lovely blob family :)
#threeJS
#webGL
#creativecoding
The ice effect here is a loop that samples the ice texture 15 times. Each time the view position is scaled by a low amount to create that sense of depth.
Super Interesting stuff. The source code is on Github!
#threejs
#webgl
#creativecoding
Loving this vertex buffer-based animation in demo by
@thespite
. The pixel data is sorted by saturation and added as a vertex attribute for the transition.
#threejs
#webgl
#creativecoding
Sharing cool demos and resources that use color spaces in amazing ways later this week in my newsletter )
Been learning a lot about color spaces this past week!
#threejs
#webgl
#creativecoding
At first I thought this demo by
@yugam_
used stencils but seems to be a couple different render passes and added bloom on top.
Love the look and addition of the particles and the fire!
#threejs
#webgl
#creativecoding
A lot of people ask how to learn WebGL/ThreeJS. So I've compiled my favorite learning resources for tomorrow's newsletter!
This weeks demo in the style of
@ilithya_rocks
's classic 3D Floating typo demo :)
#threejs
#webgl
#creativecoding
Looking at how to *transcend reality itself* and reconstruct yourself out of points and lines.
Later today in my webgl newsletter :)
#threejs
#webgl
#creativecoding
I'm a sucker for gradients, and this site does it amazingly.
This is a fullscreen shader with some noise manipulation that changes depending on the scroll and transition. Super nice to scroll
#threejs
#webgl
#creativecoding
Small and to-the-point use of WebGL for this refraction on the text. The canvas is just on the header, once you scroll away it stops rendering.
No need for a fullscreen canvas on this site by TheFristTheLast
#webgl
#threejs
#creativecoding
Learn how to get retro-looking GLSL animations and demos with Dithering in today's newsletter!
Check your email!
Demo -
#webgl
#creativecoding
#threejs
No WebGL frameworks were used in this gorgeous demo by Frank. It looks like there is some directional blur, and even a little bit of bloom going on.
#webgl
#glsl
#creativecoding
Gonna write about how these type of webgl infinite galleries are made this week in my newsletter :)
This demo is still missing a nice center piece though!
#webgl
#threeJS
#creativecoding
I love the material in this demo. It seems like it's just a small dot texture repeated all over.
Also, the shadows are super soft, or is it me? It uses ThreeJS
#threejs
#webgl
#creativecoding
To create the illusion of breaking,
@steeevg
places two pre-separated meshes together, each one shows one side of the image. Separate them to break.
The breaking line is calculated realtime with noise and some uniforms.
#threejs
#webgl
#creativecoding
Take two videos, put them in a threejs shader, and blend them together with the Y uv coordinate, some noise, and a progress uniform = Fun transition!
#threejs
#webgl
#creativecoding
Been playing with fluid simulations recently and found this demo. Particles leave a transparent trail while they follow a velocity field created by the fluid sim and
@amandaghassaei
⭐
#webgl
#creativecoding
#threejs
I’m releasing a personal blog very soon, and I’ll start writing more often 🙌🏻🙌🏻
First article, later this week, is gonna be writing about the basics using the GPU to calculate a lot of maths very quickly and make cool stuff like this
#threejs
#webgl
#creativecoding
Learn how this ASCII Project uses the color channels to do a bunch of fun stuff in today's newsletter 🧙
Check your email inbox!
#threejs
#webgl
#creativecoding
A single shader is all it takes to make a visualizer like this one made by
@masuwa1018
It uses the THREEJS' Audio Analyzer to get the frequency of the sounds and send it to the shader as a uniform.
With Sound:
#threejs
#webgl
#creativecoding
Learn how Cloth Simulations work, lots of learning resources, inspiration, and a couple cool demos in today's newsletter🧤
Check your email inbox!
Big stepping stone for a future demo 🥳
#threejs
#webgl
#creativecoding
Wonderlabs wave effect works by first drawing the mouse onto a texture.
Second, you sample the 4 neighbor pixels (optionally with some noise), and average the result. This creates a "wave" that is always expanding.
#threejs
#webgl
#creativecoding
3D models of people look a bit uncanny to me. But
@homuculu
embraced it and made it transform into even lower poly versions and particle streams which works really great!
Found it archived still working!
#threejs
#creativecoding
#webgl
Curl sim step 1: Render 100k objects without frying your computer.
To do so, we need to improve our comunication skills.
If you never understood the "fewer draw calls === better performance" advice. This is for you:
#threejs
#webgl
#creativecoding
Exploring the magic of refraction, and a couple demos in today's newsletter issue :)
Check your inbox or online with extra content!
#threejs
#webgl
#creativecoding
I believe this is a fluid/particle GPGPU simulation working together. It's resource intensive, but super fun demo by
@Flexi23
If you open the demo, toggle the "Only particles" option:
#webgl
#threejs
#creativecoding
Breaking down this demo tomorrow in the newsletter!
Also thinking of doing a stream on Twitch to talk about the demos and make the weekly demos live. Anyone interested in that?
#threejs
#webgl
#creativecoding
Webgl. Creative coding.
And highjacking web APIs to name newsletters.
Subscribe to my newsletter learn stuff like that.
#webgl
#threejs
#creativecoding
Writing about Glass and Refractions in webgl this week in my newsletter on wednesday (demo tomorrow) :)
Not the Demo's final form👹👹
#threejs
#webgl
#creativecoding
Strange attractors like in
@SyntopiaDK
configurator, are equations that create chaotic (and hella pretty) patterns.
They also have funny names, this one is the Aizawa attractor
#webgl
#threejs
#creativecoding
Sharing the complete source code for these four demos in today's newsletter for all subscribers🧙
Every other Tuesday, another pack of 4 demos comes out. If you don't wanna miss it, subscribe to the newsletter 🔮
#threejs
#creativecoding
#webgl
New no scroll blocking transitions;
Better redability + contrast;
And a new section for articles explaining demos + source code👀
#threejs
#webgl
#creativecoding
Just made a quick fun tutorial to create interactive mouse effects with instancing on Codrops
@crnacura
!
If you want to learn to create projects with millions of particles, start here!
#threejs
#creativecoding
#webgl
Found this beautiful Webgl background in this broken site made by
@SidLee
The link won't work, it never loads. You have to manually remove the loader to see this hidden piece
#threejs
#webgl
#creativecoding
Exploring WebGL Physics simulations with constraints in today's newsletter. Lots of resources, and cool demos this week!
Check your email inbox!
#threejs
#creativecoding
#webgl
I need to find place to stop with my newsletter demos...
Started with dynamic particle systems, then ported my own PBR shaders, and ended up implementing PCF shadows papers because regular shadows looked whack.
This is where I'm at today.
#threejs
#webgl
#creativecoding
This header animation by
@jmswrnr
is hands down one of my favorites. In short, 3D Scan + Volumetric Light + ASCII Effect.
There is an amazing article in his blog explaining how it works step-by-step in more detail!
#threejs
#webgl
#creativecoding
Sharing how this demo works under the hood only in today's newsletter! 🔮
📬 Check your email inbox!
Got a lot of things cooking this year for Offscreen Canvas, hope ya'll are ready 🧙
#threejs
#webgl
#creativecoding
To get realistic lighting like in
@superguigui
amazing folio, you can "bake" light maps using blender. A light map is an image with how the light affects each object.
#threejs
#webgl
#creativecoding
If you are a creative dev who wants to level up to create insane projects. "Mastering ThreeJS Instancing" takes you from knowing nothing about Instancing to creating these two demos with millions of objects🔮
Only ThreeJS basics needed to get started
The mouse reveals effect is a shader mask that selects between two images.
The mouse draws white on a texture with either canvas2d or GPGPU.
Then, the white fades to black so it goes back to the default image.
#threejs
#webgl
#creativecoding
All those reflections, shading, and waves are on the surface, yet the code is relatively small. Pretty neat stuff by
@Vochsel
If you change the first texture you get some other interesting distortion results!
#glsl
#webgl
#creativecoding
Learn how these effects work, and get ThreeJS source code today in the newsletter :)
Also, a new slight re-design of the site🤲
#threejs
#webgl
#creativecoding
Writing about the only thing objectively loved by every creative developer tomorrow: The slider and image gallery.
Demo out today 👽 Newsletter out tomorrow🤖
#webgl
#threejs
#creativecoding
Added a bit of color to the transition and removed the color transition.
Did anyone read the sitewide color palettes aside from white/black? I may remove that features
#threejs
#webgl
#creativecoding
Learning about Tone Mapping and sharing lots of cool demos about it in today's newsletter!
Check your email inbox!
If you like this demo, be here next week. I'll talk about how the demo was made and inspirations!
#threejs
#webgl
#creativecoding
I'm often overwhelmed by this kind of sim, but this one by
@haxiomic
is soo pretty! Recently working on a fluid sim of my own, so I'm aiming for something like this!