Загрузка видео...

Не удалось загрузить видео

На главную

Rendering depth maps with multiple layers of CSS masks.

javierbyte's profile picture

Javier Bórquez

5,838 subscribers

79,206 просмотров • 2 лет назад •via X (Twitter)

ИскусствоОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 8

Фото профиля Javier Bórquez
Javier Bórquez2 лет назад

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
carmen2 лет назад

@JungleSilicon

Фото профиля Shiv
Shiv2 лет назад

Woah!

Фото профиля Dwayne
Dwayne2 лет назад

Truly amazing !

Фото профиля Chirag Madhu
Chirag Madhu2 лет назад

🤌

Фото профиля Tojo Joseph
Tojo Joseph2 лет назад

This looks sick

Фото профиля abelardoit🐦
abelardoit🐦2 лет назад

Come on, @jh3yy ! Get it!

Фото профиля Gabriel
Gabriel2 лет назад

@dimitrijknight 🔥

Похожие видео

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 ʕ•ᴥ•ʔ

84,080 просмотров • 1 год назад

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

Finally fixed the rendering order! Now the game has ~8192 available layers to control the rendering order of each model
0:35

Finally fixed the rendering order! Now the game has ~8192 available layers to control the rendering order of each model

Trifindo

38,108 просмотров • 21 дней назад

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

Exquisite long formal skirt with multiple satin layers.
12:23

Exquisite long formal skirt with multiple satin layers.

LinedSkirts

44,869 просмотров • 1 месяц назад

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

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

A little trick I used for this lips was creating reverse masks and addictional layers to simulate depth on head turns. 💋🩷 It adds a little bit of complexity, but I think it's worth it! #Live2D @/GalariahPPP @/Colour_awr
0:20

A little trick I used for this lips was creating reverse masks and addictional layers to simulate depth on head turns. 💋🩷 It adds a little bit of complexity, but I think it's worth it! #Live2D @/GalariahPPP @/Colour_awr

🦀 Rubrta 🦀

10,203 просмотров • 2 месяцев назад

With Multiple DLSS5 + reShade Layers :) #WutheringWaves #WuWa #鳴潮 #WuWaCollection #WuWaAnniversary
1:17

With Multiple DLSS5 + reShade Layers :) #WutheringWaves #WuWa #鳴潮 #WuWaCollection #WuWaAnniversary

WuWa Timeline

129,632 просмотров • 18 дней назад

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

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

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

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

jhey ʕ•ᴥ•ʔ

135,748 просмотров • 4 месяцев назад

I made this holographic card with Opus 5.5 by combining 2D artwork with 3D objects. I used multiple PNG layers with a depth map skill then added 3D elements like the sword and card extrusion. That combination gives the card its depth. Making the best holographic card I can has been one of my side quests. I think this is it. Live site: My 3D skills are open source:
0:29

I made this holographic card with Opus 5.5 by combining 2D artwork with 3D objects. I used multiple PNG layers with a depth map skill then added 3D elements like the sword and card extrusion. That combination gives the card its depth. Making the best holographic card I can has been one of my side quests. I think this is it. Live site: My 3D skills are open source:

Meng To

98,516 просмотров • 2 дней назад

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 ✌️ coloso | comms open

42,216 просмотров • 1 год назад

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

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

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

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