☄︎

@0xca0a • 56,214 subscribers

Shorts

getting quite close to real time ssgi with 0beqz realism-effects (the v2 branch).

getting quite close to real time ssgi with 0beqz realism-effects (the v2 branch).

166,793 görüntüleme

ssgi + ssr + bloom on the physics/spheres demo. last time i posted this one it only ssr and bloom, but global illumination gives it something special. demo (+code) below ↓

ssgi + ssr + bloom on the physics/spheres demo. last time i posted this one it only ssr and bloom, but global illumination gives it something special. demo (+code) below ↓

37,675 görüntüleme

drei/view got a massive update. mix webgl/three right into your html as views, as many as you want. they're self contained. events, controls, everything works. it's driven by a single canvas split into chunks via webgl_skissor. the demo is made with Next.js shadcn v0

drei/view got a massive update. mix webgl/three right into your html as views, as many as you want. they're self contained. events, controls, everything works. it's driven by a single canvas split into chunks via webgl_skissor. the demo is made with Next.js shadcn v0

70,510 görüntüleme

trying out the upcoming ssgi effect (paired with ssr). i guess all i ever wanted out of three is reflections and global illumination. come next three we'll have it. 🫡 live demo link (+ code) below ↓

trying out the upcoming ssgi effect (paired with ssr). i guess all i ever wanted out of three is reflections and global illumination. come next three we'll have it. 🫡 live demo link (+ code) below ↓

25,697 görüntüleme

i liked basement.studio's so much i wanted to see how much effort it would be to create a shadow overlay. this is a quick throwaway using drei/softShadows (which DLC uses, too) and drei/scrollcontrols.

i liked basement.studio's so much i wanted to see how much effort it would be to create a shadow overlay. this is a quick throwaway using drei/softShadows (which DLC uses, too) and drei/scrollcontrols.

48,691 görüntüleme

threejs is a forward renderer, since lights are expensive it can't have more than 4-8 lights max. or can it, how about 100.000 point lights. 🤔

threejs is a forward renderer, since lights are expensive it can't have more than 4-8 lights max. or can it, how about 100.000 point lights. 🤔

58,450 görüntüleme

import { ConvexObjectBreaker } from 'three-stdlib' had no idea this even existed, shatters objects. wrap it into a <RigidBody> and you have exploding physics.

import { ConvexObjectBreaker } from 'three-stdlib' had no idea this even existed, shatters objects. wrap it into a <RigidBody> and you have exploding physics.

54,034 görüntüleme

typing with a broken hand is tiresome, it's been a major hinderance over the last weeks. i missed trying to crack interesting design puzzles on the internet. this one is from discourse "how to push meshes away on hover, similar to sparkk dot fr/en"

typing with a broken hand is tiresome, it's been a major hinderance over the last weeks. i missed trying to crack interesting design puzzles on the internet. this one is from discourse "how to push meshes away on hover, similar to sparkk dot fr/en"

36,197 görüntüleme

three/webgpu + TSL in react-three-fiber, if you ever wanted to try it out though this part of three is under construction it has great potential. former cpu tasks could quite effortlessly be put onto the gpu.

three/webgpu + TSL in react-three-fiber, if you ever wanted to try it out though this part of three is under construction it has great potential. former cpu tasks could quite effortlessly be put onto the gpu.

20,597 görüntüleme

the amount of work and dedication Next.js teams spent on this figuring out all these little details ..., i'm blown away by the result!

the amount of work and dedication Next.js teams spent on this figuring out all these little details ..., i'm blown away by the result!

29,817 görüntüleme

from discord, "how was the footer made?" using react-three/rapier, did you know that you can lock both translation and rotation, thereby enabling 2d physics?

from discord, "how was the footer made?" using react-three/rapier, did you know that you can lock both translation and rotation, thereby enabling 2d physics?

23,348 görüntüleme

ever wanted to overlay multiple materials in threejs? drei can help with this now: <mesh> <boxGeometry /> <MultiMaterial> <meshBasicMaterial /> <customMaterial /> ... thx to Verekia | ManaBlade.com for the idea & Don McCurdy for fixing glitches

ever wanted to overlay multiple materials in threejs? drei can help with this now: <mesh> <boxGeometry /> <MultiMaterial> <meshBasicMaterial /> <customMaterial /> ... thx to Verekia | ManaBlade.com for the idea & Don McCurdy for fixing glitches

18,160 görüntüleme

$trying something else with the liquid glas thing, working towards buttons that have self contained world inside them, be it more text, routes, scenes ... they would refract the environment, but also let the inner scene peek through.$

trying something else with the liquid glas thing, working towards buttons that have self contained world inside them, be it more text, routes, scenes ... they would refract the environment, but also let the inner scene peek through.

12,427 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

pmndrs/uikit by Bela Bohlender is fully responsive via flexbox, built on the yoga layout engine. making UI in webgl opens up interesting possibilities: effects, 2.5D & 3D navigation, perspective shift, parallax, more to come ... very early dev preview

pmndrs/uikit by Bela Bohlender is fully responsive via flexbox, built on the yoga layout engine. making UI in webgl opens up interesting possibilities: effects, 2.5D & 3D navigation, perspective shift, parallax, more to come ... very early dev preview

572,190 görüntüleme • 2 yıl önce

drei/meshportalmaterial can now be entered with a single prop, "blend". it will have lots of creative potential, for spatial UI and the meaning of "routes". made a small showcase using models from my fav designer on sketchfab Omar Faruq Tawsif🍉 sandbox

drei/meshportalmaterial can now be entered with a single prop, "blend". it will have lots of creative potential, for spatial UI and the meaning of "routes". made a small showcase using models from my fav designer on sketchfab Omar Faruq Tawsif🍉 sandbox

497,179 görüntüleme • 3 yıl önce

so, liquid glass. 😂 here are 3 boxes that show you how to do it in react + three. one with a meta shape, a lens, and one where the entire site is in a liquid state —

so, liquid glass. 😂 here are 3 boxes that show you how to do it in react + three. one with a meta shape, a lens, and one where the entire site is in a liquid state —

163,355 görüntüleme • 1 yıl önce

$how to have URL routes inside your scene, as well as bind webgl text to html to that it's accessible, selectable, and webgl gets to refract it.$

how to have URL routes inside your scene, as well as bind webgl text to html to that it's accessible, selectable, and webgl gets to refract it.

181,214 görüntüleme • 3 yıl önce

$this is what happens when you run a website through a lens — refraction, chroma and all. 🫠 live:$

this is what happens when you run a website through a lens — refraction, chroma and all. 🫠 live:

142,006 görüntüleme • 2 yıl önce

splats will change everything, it's like entering a live photograph. nobody modelled this in blender. it was shot with a handheld. reflections, lights etc aren't post pro render effects, it's all just in there. using drei/<Splat src="scene.splat" />, literally all it takes.

splats will change everything, it's like entering a live photograph. nobody modelled this in blender. it was shot with a handheld. reflections, lights etc aren't post pro render effects, it's all just in there. using drei/<Splat src="scene.splat" />, literally all it takes.

96,652 görüntüleme • 2 yıl önce

more work on dreis new transmissionmaterial as a direct replacement for THREE.MeshPhysicalMaterial N8 Programs added white noise roughness/blur to it today, it looks so much better than physicals chonk pixel blur! 🤩

more work on dreis new transmissionmaterial as a direct replacement for THREE.MeshPhysicalMaterial N8 Programs added white noise roughness/blur to it today, it looks so much better than physicals chonk pixel blur! 🤩

118,835 görüntüleme • 3 yıl önce

simplest magic/impossible box ever? i remember when stuff like that was so complex, tutorials spanning dozens of pages using tricky stencil operations. now it's just ... react ✨ <MeshPortalMaterial> {children} </MeshPortalMaterial>

simplest magic/impossible box ever? i remember when stuff like that was so complex, tutorials spanning dozens of pages using tricky stencil operations. now it's just ... react ✨ <MeshPortalMaterial> {children} </MeshPortalMaterial>

107,155 görüntüleme • 3 yıl önce

Fiber V9 (⚛️19) is in RC. + RCs for drei, postpro, and others. It makes it quite easy to try Three's new WebGPURenderer. All node materials can be expressed declaratively and they are typed. Some interesting possibilities with TSL ... Sandbox below ↓

Fiber V9 (⚛️19) is in RC. + RCs for drei, postpro, and others. It makes it quite easy to try Three's new WebGPURenderer. All node materials can be expressed declaratively and they are typed. Some interesting possibilities with TSL ... Sandbox below ↓

60,167 görüntüleme • 1 yıl önce

from reddit, "how can I arrange my images in circular manner just like clouarchitects dot com" it's a 10 minutes draft, just a couple of lines, but could be extended and optimized further

from reddit, "how can I arrange my images in circular manner just like clouarchitects dot com" it's a 10 minutes draft, just a couple of lines, but could be extended and optimized further

63,701 görüntüleme • 2 yıl önce

Mini tutorial on making WebGL look ✨ good ✨. One of the hardest—easiest tasks. These are often ignored: 🔑 SRGB, Gamma & tonemapping 🔐 Env maps and good lighting Deployed: Sandbox: GH Sponsors: ↓

Mini tutorial on making WebGL look ✨ good ✨. One of the hardest—easiest tasks. These are often ignored: 🔑 SRGB, Gamma & tonemapping 🔐 Env maps and good lighting Deployed: Sandbox: GH Sponsors: ↓

77,956 görüntüleme • 3 yıl önce

drei/MeshTransmissionMaterial is complete 🎉 thx to N8 Programs taking over! acts like MeshPhysicalMaterial (transmission, thickness, IOR, roughness, etc) but has chromatic aberration, noise roughness, anisotropy, DISTORTION. compare it w/ the original

drei/MeshTransmissionMaterial is complete 🎉 thx to N8 Programs taking over! acts like MeshPhysicalMaterial (transmission, thickness, IOR, roughness, etc) but has chromatic aberration, noise roughness, anisotropy, DISTORTION. compare it w/ the original

73,762 görüntüleme • 3 yıl önce

drei/<Cloud> is finally published and documented 🎉 it's particle based and instanced. you can glob cloud formations into components for re-use or full interop with 3rd party, physics etc. try the sandbox below ↓

drei/<Cloud> is finally published and documented 🎉 it's particle based and instanced. you can glob cloud formations into components for re-use or full interop with 3rd party, physics etc. try the sandbox below ↓

51,650 görüntüleme • 2 yıl önce

in preparation of spatial UI i've begun to add pass-through to drei/MeshPortalMaterial. not finished but it will be so easy to use. the demo uses real URL routes. vision pro will redefine what we understand as a route today, having your fav router within the scene will help.

in preparation of spatial UI i've begun to add pass-through to drei/MeshPortalMaterial. not finished but it will be so easy to use. the demo uses real URL routes. vision pro will redefine what we understand as a route today, having your fav router within the scene will help.

50,780 görüntüleme • 3 yıl önce

drei/ + Clouds + MeshTransmissionMaterial + RoundedBox + Float + ContactShadows + CameraShake + PerspectiveCamera + Environment + OrbitControls maath/ + random.FlashGen →

drei/ + Clouds + MeshTransmissionMaterial + RoundedBox + Float + ContactShadows + CameraShake + PerspectiveCamera + Environment + OrbitControls maath/ + random.FlashGen →

43,306 görüntüleme • 2 yıl önce

this is something that was plaguing r3f for years: three had issues with hot reload (not the same as live refresh). it doesn't know defaults. something's red and you take it away, to what value would it fall back? Cody Bennett, Josh 🤷🏻‍♀️ and i finally found a solution. 😅

this is something that was plaguing r3f for years: three had issues with hot reload (not the same as live refresh). it doesn't know defaults. something's red and you take it away, to what value would it fall back? Cody Bennett, Josh 🤷🏻‍♀️ and i finally found a solution. 😅

49,683 görüntüleme • 3 yıl önce

drei has a new low level portal feature: <RenderCubeTexture>. allows you to declaratively render virtual scenes into cube or environment maps. and yes, you can make a fisheye now. or tiny planets. links below, try the demo ↓

drei has a new low level portal feature: <RenderCubeTexture>. allows you to declaratively render virtual scenes into cube or environment maps. and yes, you can make a fisheye now. or tiny planets. links below, try the demo ↓

38,531 görüntüleme • 2 yıl önce

made this in blender and react. still surprising how powerful a tool functional composition is. the ticker is solved with minimal effort, same semantics devs would use on the web. this is a side that is generally ignored in webgl/threejs. canvas3d is thought of in terms of scene primitives, math and shaders. these are all good to know. but i see people all the time trying to use these for solving problems that are inherently of a compositional nature, and fail. imperative javascript and oop lack composition. this is the only thing react adds to threejs (and any other platform it renders to), it allows it to compose.

made this in blender and react. still surprising how powerful a tool functional composition is. the ticker is solved with minimal effort, same semantics devs would use on the web. this is a side that is generally ignored in webgl/threejs. canvas3d is thought of in terms of scene primitives, math and shaders. these are all good to know. but i see people all the time trying to use these for solving problems that are inherently of a compositional nature, and fail. imperative javascript and oop lack composition. this is the only thing react adds to threejs (and any other platform it renders to), it allows it to compose.

30,490 görüntüleme • 2 yıl önce

something Matias 🧉 and i have been working on, drei/createInstances & <InstancedAttribute>. makes it easier to control multiple, nested instances, being able to glob them together and even add shader attributes. demo docs

something Matias 🧉 and i have been working on, drei/createInstances & <InstancedAttribute>. makes it easier to control multiple, nested instances, being able to glob them together and even add shader attributes. demo docs

24,292 görüntüleme • 1 yıl önce

bug fixes to environment & lightformer in drei. making your own environment maps with code has real benefits: they're tiny—a few bytes, you have full creative control, and looks good! the demo re-creates THREE.RoomEnvironment w/ an additional ring light.

bug fixes to environment & lightformer in drei. making your own environment maps with code has real benefits: they're tiny—a few bytes, you have full creative control, and looks good! the demo re-creates THREE.RoomEnvironment w/ an additional ring light.

18,144 görüntüleme • 1 yıl önce