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

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

На главную

Write simple shaders for HTML elements (Chrome only):

shuding's profile picture

Shu

56,073 subscribers

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

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Francois Laberge ✍️
Francois Laberge ✍️2 лет назад

Html2image type of a trick?

Фото профиля cskadarla
cskadarla2 лет назад

this is really cool

Фото профиля sd
sd2 лет назад

要被魔封波封印了

Фото профиля Boris
Boris2 лет назад

Wow!

Фото профиля Brayan
Brayan2 лет назад

When drop?

Фото профиля Snowmanzzz.html (寻170cm女生)
Snowmanzzz.html (寻170cm女生)2 лет назад

What’s the magic!

Фото профиля Dmitry Iv.
Dmitry Iv.2 лет назад

@bramus hello safari

Фото профиля Sixian
Sixian2 лет назад

super cool idea

Фото профиля Gustav Ekerot
Gustav Ekerot1 год назад

so helpful! I’ve been out here fumbling using trial and error making SVG filters. thanks for sharing 🙏

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

really simple trick to write better html
0:57

really simple trick to write better html

Steve (Builder.io)

245,235 просмотров • 3 лет назад

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:
0:34

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

Shu

56,892 просмотров • 7 месяцев назад

Analog UI experimentitation, canvas for the UI elements, shaders for postprocessing. #creativecoding #generativeart
0:37

Analog UI experimentitation, canvas for the UI elements, shaders for postprocessing. #creativecoding #generativeart

Bart Simons

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

I write shaders
0:37

I write shaders

Xor

20,316 просмотров • 1 год назад

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.
0:43

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

Fernando Serboncini

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

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.
0:26

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

Robin

115,376 просмотров • 6 месяцев назад

Make HTML the new JSON. Declarative Partial Updates let you render out-of-order HTML updates and build UI placeholders without JS. Plus, the new streaming APIs makes Island architecture a breeze by injecting HTML directly into the DOM. Available for testing since Chrome 148 →
1:35

Make HTML the new JSON. Declarative Partial Updates let you render out-of-order HTML updates and build UI placeholders without JS. Plus, the new streaming APIs makes Island architecture a breeze by injecting HTML directly into the DOM. Available for testing since Chrome 148 →

Chrome for Developers

18,691 просмотров • 5 месяцев назад

hi (x2) (bad video quality is me not knowing how to write shaders)
0:24

hi (x2) (bad video quality is me not knowing how to write shaders)

Iris Shaders

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

what if air had a surface built with WebGL shaders + MediaPipe hand tracking single HTML file, no app, no install
0:20

what if air had a surface built with WebGL shaders + MediaPipe hand tracking single HTML file, no app, no install

Bihe Xi

2,647,274 просмотров • 5 месяцев назад

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨
2:08

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

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

This is insane (...ly dumb) You can install blocked chrome extensions just by editing the HTML (client-side)
0:59

This is insane (...ly dumb) You can install blocked chrome extensions just by editing the HTML (client-side)

Lacy

448,184 просмотров • 1 год назад

Thunderstorm in Minecraft - only shaders
0:28

Thunderstorm in Minecraft - only shaders

manofdutch

325,050 просмотров • 9 месяцев назад

Created a cool demo for anyone to create shaders 😀You can write your code and see it live on the Las Vegas Sphere! Three.js
0:22

Created a cool demo for anyone to create shaders 😀You can write your code and see it live on the Las Vegas Sphere! Three.js

Alexandre Devaux

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

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome
0:31

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome

Robin

24,897 просмотров • 6 месяцев назад

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

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

GPU Canvas is now live for everyone. Rive's low-level GPU layer for 3D, shaders, and custom effects is out of Early Access and in the production editor today. Write your shaders once in WGSL. Rive compiles them for Metal, Vulkan, Direct3D, WebGPU, and WebGL. It adds 25KB to the runtime.
0:52

GPU Canvas is now live for everyone. Rive's low-level GPU layer for 3D, shaders, and custom effects is out of Early Access and in the production editor today. Write your shaders once in WGSL. Rive compiles them for Metal, Vulkan, Direct3D, WebGPU, and WebGL. It adds 25KB to the runtime.

Rive

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

Got tired of boring websites. Built a way to drop 3D agents directly onto standard HTML elements with zero complex math.
0:47

Got tired of boring websites. Built a way to drop 3D agents directly onto standard HTML elements with zero complex math.

nich

242,674 просмотров • 5 месяцев назад

Claude opus-next is a musical genius. Told it to "Write a good piece showcase, single html" Result:
4:07

Claude opus-next is a musical genius. Told it to "Write a good piece showcase, single html" Result:

Binkg

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