☄︎

@0xca0a • 55,577 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,777 просмотров

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 просмотров

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 просмотров

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,548 просмотров

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,445 просмотров

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"

35,986 просмотров

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,572 просмотров

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 просмотров

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 просмотров

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,151 просмотров

$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 просмотров

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,116 просмотров • 2 лет назад

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,091 просмотров • 3 лет назад

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,332 просмотров • 11 месяцев назад

$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,209 просмотров • 2 лет назад

$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:

141,983 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 3 лет назад

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,141 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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,773 просмотров • 3 лет назад

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,300 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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,445 просмотров • 2 лет назад

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 просмотров • 1 год назад

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.

17,682 просмотров • 1 год назад

<Splat src={url} /> is now in drei. this is the Kevin Kwok variant. i added data re-use w/ multiple splats, splats can freely move (tied into physics for instance), depth sort is OK, colorspace, support for alphatest and alphahash, and integrated into react-suspense.

<Splat src={url} /> is now in drei. this is the Kevin Kwok variant. i added data re-use w/ multiple splats, splats can freely move (tied into physics for instance), depth sort is OK, colorspace, support for alphatest and alphahash, and integrated into react-suspense.

24,320 просмотров • 2 лет назад

Helped someone on Reddit to figure out a site made by C2 Montréal. An interesting mix of HTML & WebGL blend modes i haven't seen explored before. Then i figured we still need to announce R3F V9. Wanted to make sth big but let's do that for v10. ↓ What's new in v9

Helped someone on Reddit to figure out a site made by C2 Montréal. An interesting mix of HTML & WebGL blend modes i haven't seen explored before. Then i figured we still need to announce R3F V9. Wanted to make sth big but let's do that for v10. ↓ What's new in v9

13,003 просмотров • 1 год назад

<ShadowAlpha /> was added to drei by Faraz add it to any mesh and its shadow will now support opacity, transmission and shadowAlpha. it's using bayer dithering, but you can pair it with <SoftShadows /> to cover it up.

<ShadowAlpha /> was added to drei by Faraz add it to any mesh and its shadow will now support opacity, transmission and shadowAlpha. it's using bayer dithering, but you can pair it with <SoftShadows /> to cover it up.

19,432 просмотров • 2 лет назад

Больше нет контента для загрузки