正在加载视频...

视频加载失败

返回首页

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.

0xca0a's profile picture

☄︎

56,381 subscribers

181,278 次观看 • 3 年前 •via X (Twitter)

艺术科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

10 条评论

☄︎ 的头像
☄︎3 年前

this was inspired by

☄︎ 的头像
☄︎3 年前

* so that it's accessible paid 8 $ to edit tweets but i'm a lost cause

Anderson Mancini 的头像
Anderson Mancini3 年前

Every codesandbox is a jewelry ✨️. We need to create a website of side examples from Paul 🤩. Thanks for sharing this my friend

Maxime 的头像
Maxime3 年前

I think @brainFnCl had a similar trick for one of his scenes

☄︎ 的头像
☄︎3 年前

@brainFnCl ah yes, now i remember that i've seen it before i picked the challenge up from a discourse help request with a fresh mind.

Maxime 的头像
Maxime3 年前

ah the good ol' invisible text trick

rex 的头像
rex3 年前

Ahh more wizardry. I'm here for it.

pete 的头像
pete3 年前

Doing gods work

. 的头像
.3 年前

y’all are doing wild shit with webgl

Joe Vans 的头像
Joe Vans3 年前

@pixelbeat Sexy AF! 🔥

相关视频

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.
0:26

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.

How To Prompt

235,877 次观看 • 1 个月前

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen
0:23

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

52,470 次观看 • 4 个月前

It was great to work on this one w/ Resn, especially on that "Molten Grid" effect using WebGL and SDF — #webGL #threejs #UI
0:20

It was great to work on this one w/ Resn, especially on that "Molten Grid" effect using WebGL and SDF — #webGL #threejs #UI

Giom

20,326 次观看 • 1 年前

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl
0:21

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl

Bimo Tri. P

13,587 次观看 • 8 个月前

As promised, more insights on the webgl raytracer. It is based on this article/paper by Tero Karras: It uses Morton code to build a BVH binary radix tree on the GPU in realtime. #webgl #bvh #raytracing
0:35

As promised, more insights on the webgl raytracer. It is based on this article/paper by Tero Karras: It uses Morton code to build a BVH binary radix tree on the GPU in realtime. #webgl #bvh #raytracing

Nicolas Riciotti

44,019 次观看 • 3 年前

SSGI with TRAA and many other post-processing effects now seem to work on all platforms. Simply add it to your scene to get realistic graphics right away: ▶️ Demo: #threejs #webgl #webdev #3D
0:24

SSGI with TRAA and many other post-processing effects now seem to work on all platforms. Simply add it to your scene to get realistic graphics right away: ▶️ Demo: #threejs #webgl #webdev #3D

0beqz

22,789 次观看 • 2 年前

Excited to finally launch the new Siena Film Foundation website, crafted with G-NS Studio! A WebGL-powered experience featuring film strips, procedural sliders and cinematic-inspired animations. 🎬 Live URL → #Webflow #WebGL #Javascript #GSAP #GLSL
0:30

Excited to finally launch the new Siena Film Foundation website, crafted with G-NS Studio! A WebGL-powered experience featuring film strips, procedural sliders and cinematic-inspired animations. 🎬 Live URL → #Webflow #WebGL #Javascript #GSAP #GLSL

Niccolò Miranda

121,346 次观看 • 1 年前

My cozy fishing app is now live ! How to play ? 🎣 Aim with your phone, move the hook close to a fish and lift it up fast to capture the fish! #threejs #webgl
0:35

My cozy fishing app is now live ! How to play ? 🎣 Aim with your phone, move the hook close to a fish and lift it up fast to capture the fish! #threejs #webgl

Alex

129,744 次观看 • 9 个月前

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser:
0:39

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser:

80 LEVEL

35,418 次观看 • 6 个月前

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser!
0:20

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser!

80 LEVEL

428,389 次观看 • 6 个月前

Three.js doesn't own the layout — CSS does. Opted-in [data-layout] elements are batched-read (init + resize) and mapped to world space. Children are inferred from parent boxes when possible. That same pass pulls computed styles and detects line breaks, so WebGL text wraps exactly the same. SDF keeps smaller text sharp at any scale. Headlines go further: opentype.js extracts glyphs — each letter becomes its own extruded mesh with independent depth. WebGL syncs to native scroll. DOM vs WebGL ↓
0:41

Three.js doesn't own the layout — CSS does. Opted-in [data-layout] elements are batched-read (init + resize) and mapped to world space. Children are inferred from parent boxes when possible. That same pass pulls computed styles and detects line breaks, so WebGL text wraps exactly the same. SDF keeps smaller text sharp at any scale. Headlines go further: opentype.js extracts glyphs — each letter becomes its own extruded mesh with independent depth. WebGL syncs to native scroll. DOM vs WebGL ↓

Johnny Slack

105,573 次观看 • 4 个月前

Today's addition to the #threejsJourney's wall of fame: Henry Heffernan’s Portfolio 👉 Wait, you can play doom on it?? And to think you knew nothing about WebGL a few months before. Great job! Henry Heffernan 👉 #threejs #webGL
0:28

Today's addition to the #threejsJourney's wall of fame: Henry Heffernan’s Portfolio 👉 Wait, you can play doom on it?? And to think you knew nothing about WebGL a few months before. Great job! Henry Heffernan 👉 #threejs #webGL

Bruno Simon

55,582 次观看 • 3 年前

Imagine you don't need to open blender or cinema4d just to preview and debug your 3d models for webgl projects. I present to your 3e - Next level 3d workflow inside VS Code. Extension is live in the marketplace.
1:12

Imagine you don't need to open blender or cinema4d just to preview and debug your 3d models for webgl projects. I present to your 3e - Next level 3d workflow inside VS Code. Extension is live in the marketplace.

{//} 🇬🇭

179,637 次观看 • 3 年前

Octane reacts to LAT chalking scrims before the Falcons match: “Definitely not good… deserved 8th.” 😳 “That’s as bad as it gets… you know how big your ego has to be to have that mindset.” 😳
0:41

Octane reacts to LAT chalking scrims before the Falcons match: “Definitely not good… deserved 8th.” 😳 “That’s as bad as it gets… you know how big your ego has to be to have that mindset.” 😳

SpawnUp

778,532 次观看 • 1 个月前

💧 Technical Showcase: A piece of WebGL history, rebuilt for WebGPU. Evan Wallace's 2011 water demo helped convince Dylan Field (Dylan Field) that Figma could exist. Yong Su (jeantimex) ported it to WebGPU with full caustics, raytraced reflections, and the GitHub repo to study. 🔗 #WebGPU #WebGL #GraphicsProgramming #Shaders #Figma
1:02

💧 Technical Showcase: A piece of WebGL history, rebuilt for WebGPU. Evan Wallace's 2011 water demo helped convince Dylan Field (Dylan Field) that Figma could exist. Yong Su (jeantimex) ported it to WebGPU with full caustics, raytraced reflections, and the GitHub repo to study. 🔗 #WebGPU #WebGL #GraphicsProgramming #Shaders #Figma

WebGL / WebGPU

18,778 次观看 • 6 个月前

Been testing GPT 5.5 and it's implemented the HTML-in-Canvas spec Worked for both WebGL and WebGPU out of the box Then created this demo with the PixiJS + GSAP Skills Hopefully there will soon be no excuses to make boring websites
0:28

Been testing GPT 5.5 and it's implemented the HTML-in-Canvas spec Worked for both WebGL and WebGPU out of the box Then created this demo with the PixiJS + GSAP Skills Hopefully there will soon be no excuses to make boring websites

PixiJS

201,693 次观看 • 3 个月前

It's been one year serving as your independent voice in Congress! As part of my goal to be as accessible as possible, I put together a Year-End Report detailing my bipartisan progress on the issues that matter most to you! Read it here:
1:15

It's been one year serving as your independent voice in Congress! As part of my goal to be as accessible as possible, I put together a Year-End Report detailing my bipartisan progress on the issues that matter most to you! Read it here:

Rep. Marie Gluesenkamp Perez

39,486 次观看 • 2 年前