Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Rendering depth maps with multiple layers of CSS masks.

javierbyte's profile picture

Javier Bórquez

5,843 subscribers

79,194 görüntüleme • 2 yıl önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

8 Yorum

Javier Bórquez profil fotoğrafı
Javier Bórquez2 yıl önce

Inspired by this exploration by @raunofreiberg I used Depth Anything V2 to create depth maps of my photos I wanted to use CSS filters to a single depth map, but instead end up slicing it with canvas in the client. Other than that, the technique is the same as my depth of field demo and the original frosted glass demo by @shuding_. Code is here that is now a turborepo with both demos.

carmen profil fotoğrafı
carmen2 yıl önce

@JungleSilicon

Shiv profil fotoğrafı
Shiv2 yıl önce

Woah!

Dwayne profil fotoğrafı
Dwayne2 yıl önce

Truly amazing !

Chirag Madhu profil fotoğrafı
Chirag Madhu2 yıl önce

🤌

Tojo Joseph profil fotoğrafı
Tojo Joseph2 yıl önce

This looks sick

abelardoit🐦 profil fotoğrafı
abelardoit🐦2 yıl önce

Come on, @jh3yy ! Get it!

Gabriel profil fotoğrafı
Gabriel2 yıl önce

@dimitrijknight 🔥

Benzer Videolar

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇
0:32

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇

jhey ʕ•ᴥ•ʔ

83,703 görüntüleme • 1 yıl önce

ComfyUI 3D Node Improvements 03/18 (Multi-layer Output) Recently, I've made several changes and improvements to Load3D: 1. Support for simultaneous output of multiple layers - original, mask, normal maps, lineart 2. Performance improvements - rendering only occurs when the mouse is over the node 3. UI changes - using menus to manage the buttons in the top left corner 4. UI changes - temporarily removed depth mode from material options 5. Many backend code changes. #ComfyUI
1:03

ComfyUI 3D Node Improvements 03/18 (Multi-layer Output) Recently, I've made several changes and improvements to Load3D: 1. Support for simultaneous output of multiple layers - original, mask, normal maps, lineart 2. Performance improvements - rendering only occurs when the mouse is over the node 3. UI changes - using menus to manage the buttons in the top left corner 4. UI changes - temporarily removed depth mode from material options 5. Many backend code changes. #ComfyUI

jtydhr88

17,579 görüntüleme • 1 yıl önce

Here’s a sneak peek using Rerun and Gradio for data annotation. It uses Video Depth Anything and Segment Anything 2 under the hood to generate segmentation masks and depth maps/point clouds. More to share next week.
0:30

Here’s a sneak peek using Rerun and Gradio for data annotation. It uses Video Depth Anything and Segment Anything 2 under the hood to generate segmentation masks and depth maps/point clouds. More to share next week.

Pablo Vela

36,719 görüntüleme • 1 yıl önce

This is how doctors use multiple layers of protection when dealing with infectious disease cases. 😷
1:05

This is how doctors use multiple layers of protection when dealing with infectious disease cases. 😷

HOW THINGS WORK

85,700 görüntüleme • 7 ay önce

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙
0:36

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

jhey ʕ•ᴥ•ʔ

495,678 görüntüleme • 2 yıl önce

Nice rendering effect: fading in Depth of Field when being closer to objects Needle #webdev Three.js
0:22

Nice rendering effect: fading in Depth of Field when being closer to objects Needle #webdev Three.js

herbst

18,568 görüntüleme • 3 yıl önce

Mascot Bear Masks Nick Sweated Hot Put on Masking Layers Kigrumi
0:20

Mascot Bear Masks Nick Sweated Hot Put on Masking Layers Kigrumi

Brandon

11,318 görüntüleme • 2 yıl önce

product spotlight cards 🔦 w/ depth map lighting + css scroll tricks
0:27

product spotlight cards 🔦 w/ depth map lighting + css scroll tricks

jhey ʕ•ᴥ•ʔ

135,029 görüntüleme • 2 ay önce

painting over and rendering on single layer because im too lazy for layers management 😔
0:27

painting over and rendering on single layer because im too lazy for layers management 😔

Shei 📌 CM open

42,143 görüntüleme • 1 yıl önce

A quick test to see what results an AI animated sprite can achieve using normal maps and depth maps. I tried it with DOOM style sprites just for fun. #Doom
0:47

A quick test to see what results an AI animated sprite can achieve using normal maps and depth maps. I tried it with DOOM style sprites just for fun. #Doom

Alex

52,333 görüntüleme • 1 ay önce

I Found The Best Way To Get Depth Maps in 2025
0:43

I Found The Best Way To Get Depth Maps in 2025

archduchy

13,811 görüntüleme • 11 ay önce

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️
0:30

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️

jhey ʕ•ᴥ•ʔ

46,837 görüntüleme • 1 yıl önce

Ucupaint 2.3 has been released! It has realtime AO, rebake all baked layers & masks, lots of bugfixes, and more! ✨ #b3d #ucupaint
1:21

Ucupaint 2.3 has been released! It has realtime AO, rebake all baked layers & masks, lots of bugfixes, and more! ✨ #b3d #ucupaint

Ucupaint 🔶

61,754 görüntüleme • 1 yıl önce

Just had a doozy of a CSS paint / rendering perf issue on my site I was surprised when I finally figured it out - detailed it here
1:59

Just had a doozy of a CSS paint / rendering perf issue on my site I was surprised when I finally figured it out - detailed it here

Wes Bos

28,067 görüntüleme • 1 yıl önce

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,851 görüntüleme • 3 yıl önce

Deus EX: MD's frosted glass panels. Playing for... research/reference. 🙂🤗 This game is ~10 years old! I love the masking effects, but you can see it's *not* rendering multiple layers of transparency. Most likely, they have a single blurred texture which they blend.
0:42

Deus EX: MD's frosted glass panels. Playing for... research/reference. 🙂🤗 This game is ~10 years old! I love the masking effects, but you can see it's *not* rendering multiple layers of transparency. Most likely, they have a single blurred texture which they blend.

Mirza Beig

170,749 görüntüleme • 4 ay önce

#MessagePrivately with multiple layers of protection on WhatsApp. End-to-end encryption by default, Chat Lock, Hidden Online Presence, Privacy Check-up, and more.
0:30

#MessagePrivately with multiple layers of protection on WhatsApp. End-to-end encryption by default, Chat Lock, Hidden Online Presence, Privacy Check-up, and more.

WhatsApp

3,902,914 görüntüleme • 3 yıl önce

Taking with Fen! 🎙️ Part one has landed... Fenella Fownes goes in depth with her brother Caspar Fownes, multiple champion trainer of Hong Kong! #HKracing
27:35

Taking with Fen! 🎙️ Part one has landed... Fenella Fownes goes in depth with her brother Caspar Fownes, multiple champion trainer of Hong Kong! #HKracing

HKJC Racing

10,301 görüntüleme • 2 yıl önce

I believe there is something far more sinister being communicated by the law enforcement unions and organizations announcing their endorsements of Donald Trump. These endorsements send a very troubling form of communication with multiple layers of meaning. I point to one of those critical layers here.
1:52

I believe there is something far more sinister being communicated by the law enforcement unions and organizations announcing their endorsements of Donald Trump. These endorsements send a very troubling form of communication with multiple layers of meaning. I point to one of those critical layers here.

Jack Hopkins

456,162 görüntüleme • 1 yıl önce