WebGPU · three.js TSL
Kinetic Type
Het woord wordt nooit op de ring getekend. Het gaat eerst naar een apart render target, en de ring leest dat beeld als een schuivende textuur — zo wikkelt de tekst zich om, herhaalt en spiegelt zichzelf terwijl hij draait.
Een overzetting, geen nieuwbouw. Dit begon als een WebGL-schets met handgeschreven GLSL, en ik heb hem naar WebGPU en TSL gehaald om te zien wat dat werkelijk verandert — en wat de nieuwere stack de scene toestaat wat de oude niet kon.
Een scene in een scene
De tekst staat in zijn eigen scene met zijn eigen camera, en wordt naar een textuur gerenderd in plaats van naar het scherm. De ring sampelt die textuur vervolgens zeven keer rond en vijf keer overdwars, waarbij de verticale verschuiving met de tijd meeloopt. Dat is het hele effect: er raakt geen letter-geometrie de ring, en hetzelfde beeld herhaalt, spiegelt en schuift afhankelijk van welk stuk oppervlak je ziet.
Waarom de letters scherp blijven
Een gewone glyph-atlas is een plaatje, dus die vervaagt zodra je hem vergroot — en op een torus kan één letter achterin zes pixels breed zijn en vooraan honderd. Een MSDF-atlas bewaart in plaats daarvan afstanden tot de letterrand over drie kanalen, en de shader neemt daar de mediaan van om de omtrek te vinden. De letters blijven bij elke maat strak, en dat is de enige reden dat tekst om gebogen geometrie wikkelen überhaupt werkt.
Anders dan het bloemenveld valt deze terug: three's WebGPU-renderer schakelt op machines zonder WebGPU over op zijn WebGL2-backend, en de scene overleeft dat ongeschonden. Niets hier hangt aan storage buffers in de vertex-stage.
Gebouwd vanaf dit Codrops-artikel, daarna uit elkaar gehaald en herschreven voor WebGPU.
WebGPU · three.js r185 · TSL · MSDF-tekst · bloom