Discover and read the best of Twitter Threads about #Threejs
Most recents (10)
How to import a #3D @Blender object in @threejs project as a #gltf file?🤔
In this thread🧵, we will streamline the process into simple steps👇
#3dmodeling #webdevelopment #cg #3D #Threejs #blender
In this thread🧵, we will streamline the process into simple steps👇
#3dmodeling #webdevelopment #cg #3D #Threejs #blender
Step1⃣: Start with creating a #Threejs-Compatible #UV Mapped 3D Object in #Blender.
➡️Download a 3D model
➡️Unwrap UVs in Blender to Create a UV map
➡️Export the UV Map as a #PNG file
➡️Create the UV Image with an Image Editing Software
➡️Download a 3D model
➡️Unwrap UVs in Blender to Create a UV map
➡️Export the UV Map as a #PNG file
➡️Create the UV Image with an Image Editing Software
Step2⃣: Importing the UV Image into Blender as glTF Material.
➡️Download the KhronosGroup glTF Blender Exporter plugin
➡️In Blender, append the glTF Blender Exporter file’s glTF to a material.
➡️ In the Node Editor, connect the image and the material.
➡️Download the KhronosGroup glTF Blender Exporter plugin
➡️In Blender, append the glTF Blender Exporter file’s glTF to a material.
➡️ In the Node Editor, connect the image and the material.
1/14, here is a short thread with coding techniques you can learn from recent beautiful @awwwards #SOTD by @makemepulse: themagicalpantry.com, CSS, WebGL, KTX2, Shaders, Image formats
2/n First of all, the whole book background is a 25s (6Mb) video rendered in WebGL. The foreground, with texts-images is HTML! And altho it seems like a little pain to align HTML to an objects inside a video. Well, it just works, and the result is magical!
3/n they achieve this alignment knowing a book is *always* in the center of the video. The rest is just about finding a scale factor
Here is how you can use any #threejs objects inside a raymarching material with @polygonjs:
Live link at end of thread 👇
1/14
Live link at end of thread 👇
1/14
Adding SDFs representing objects to raymarching materials is powerful.
You can for instance blend those objects with the SDF primitives mentioned in my previous thread.
2/14
You can for instance blend those objects with the SDF primitives mentioned in my previous thread.
2/14
And you can have multi-bounce reflections, refractions, fold space and repeat objects. It can feel a bit crazy. A bit like a mathematical Alice in wonderland.
Here is how you can create some in just a few steps:
3/14
Here is how you can create some in just a few steps:
3/14
I helped out the wonderful @by_index team to create this project
👉 bizupagency.com/en/
This twitter thread is a break-down of the homepage WebGL #threejs interactive animation:
🧵👇
👉 bizupagency.com/en/
This twitter thread is a break-down of the homepage WebGL #threejs interactive animation:
🧵👇
1 - Problem decomposition 🔁
The idea was to have an interactive glossy 3d ball that would interpolate between different states on scroll 🖱
At this point I know that a custom #shader is going to be involved as well as a sort of key frame manager for the state interpolation
The idea was to have an interactive glossy 3d ball that would interpolate between different states on scroll 🖱
At this point I know that a custom #shader is going to be involved as well as a sort of key frame manager for the state interpolation
2 - Interactive Bump (1/4) 🤜🤛
With this idea,
I also needed to come up with a mouse interactivity visual on the ball that would be present throughout the animation
These next few parts will be about the development of that “mouse bump”
With this idea,
I also needed to come up with a mouse interactivity visual on the ball that would be present throughout the animation
These next few parts will be about the development of that “mouse bump”
wrapping up —
<Environment>
✅ displays any hdri
✅ has presets
✅ render envs dynamically
✅ mix dynamic & hdri
✅ can be "live"
<Lightformer>
✅ mimics studio lights
✅ emits light & has power settings
fullscreen: lwo219.csb.app
sandbox: codesandbox.io/s/building-liv…
<Environment>
✅ displays any hdri
✅ has presets
✅ render envs dynamically
✅ mix dynamic & hdri
✅ can be "live"
<Lightformer>
✅ mimics studio lights
✅ emits light & has power settings
fullscreen: lwo219.csb.app
sandbox: codesandbox.io/s/building-liv…
allows you to create inexpensive studio conditions (in terms of performance & visuals). as many lights as you want. to get something look good as opposed to typical webgl plastic CGI fare is so easy it's almost unfair. beginners, this is your entry into pro looking portfolios.
api for both components here: github.com/pmndrs/drei#en…
I have written about how we made a 3D graphic of the Great Zimbabwe for @ECONdailycharts. The process involved baking textures with Blender, rigging a lowpoly model and rendering a scrollytelling scene with #threejs view.e.economist.com/?qs=6fe3793805…
At the beginning we were wondering if we could use an embedding service like Sketchfab. However after seeing @NYTimesRD's series of photogrammetry blog posts we realised we could do something bigger rd.nytimes.com/projects/an-en…
The main hurdle was lowering the model's resolution so it could fit well onto the web browser. The original textures and model were far too detailed for us to work with
LAUNCH TRAILER
Across The Multiverse
A free in-browser game across infinite universes procedurally generated.
Go from universe to universe and discover the origin of everything.
buff.ly/3z2qd5I
#javascript #threejs #webgl #webdev #gamedev
🔊🔊🔊 buff.ly/3nsPUKg
Across The Multiverse
A free in-browser game across infinite universes procedurally generated.
Go from universe to universe and discover the origin of everything.
buff.ly/3z2qd5I
#javascript #threejs #webgl #webdev #gamedev
🔊🔊🔊 buff.ly/3nsPUKg
So. I have a lot of things to say.
First of all, twitter video resolution will destroy the quality of the launch trailer. So if you want to watch a better quality trailer, fullscreen, here's the official link to the YouTube video.
bit.ly/3k364rK
First of all, twitter video resolution will destroy the quality of the launch trailer. So if you want to watch a better quality trailer, fullscreen, here's the official link to the YouTube video.
bit.ly/3k364rK
Then, i wanna thanks the few people that accepted to play the beta.
@davrous @benjamincode @manekinekko @bruno_simon
Most people ignored my request for help, meanwhile those people help me transform a buggy piece of trash to a playable game.
Thank you very much to all of you.
@davrous @benjamincode @manekinekko @bruno_simon
Most people ignored my request for help, meanwhile those people help me transform a buggy piece of trash to a playable game.
Thank you very much to all of you.
Here's a complete thread over naoz.live the persistent #WebGL-powered digital venue we built for and with the team of @tomorrowland.
👇
👇
Let's start with some high definition screenshots from the cinematic mode (stop moving your mouse on the island level and wait)
We simulated depth of field through the use of a painted blurred skybox, but also a second reflection map to use on the glass materials. Allowing us to create a better sense of realism
3 yrs ago, I went on a tangent at work and, using @mrdoob’s #threejs, created a browser-based @MarsCuriosity renderer, synced to actual telemetry and accurately positioned in a @HiRISE DEM, with a realistic sky model based on pdfs.semanticscholar.org/e71c/3683a70f7…
I learned yesterday that the #Mars2020 surface ops planning tool developers have incorporated much of my code into next-gen planning tools. Notably, the tactical ops teams will get to enjoy realistic Martian blue sunsets during daily plan reviews. You’re welcome #Mars2020! 😎
Rover model credit goes to the true artists at NASA’s Eyes on the Solar System. eyes.nasa.gov/eyes-on-the-so…
Some #webgl / #threejs insights about the initial implementation of the doggo scene on dogstudio.co (thread)
It first started as a weekend experiment based on @thespite 's article on Matcaps / Litsphere / Spherical environment map clicktorelease.com/blog/creating-… with some additional bells and whistles.
Matcaps are very interesting because this technique allows us to efficiently simulate complex lighting conditions, and they can be drawn by hand (as they were on the website) or made by taking pictures of actual/physical spherical objects (as a red marble, see picture).
