Лабораторія / 06 · 4 приклади
Шейдери
Зображення, обчислені для кожного пікселя на відеокарті: симуляція рідини, raymarching і частинки на чистому WebGL2 і GLSL, кожне з поясненням ідеї простими словами поруч і постером, коли WebGL недоступний.
Показано 4 з 4
Ink & Light
Повноекранна симуляція рідини, написана з нуля на чистих шейдерах WebGL2: курсор вливає сяйне чорнило в темну воду, яке закручується, складається й світиться, з палітрами, калейдоскопним дзеркалом і студією налаштувань рідини.
WebGL2GLSLTypeScript
Event Horizon
Чорна діра з трасуванням променів наживо на чистому WebGL2: кожен піксель іде вигнутою траєкторією світла крізь геометрію Шварцшильда, тож сяйний акреційний диск огортає тінь згори й знизу з тонким фотонним кільцем, яскравішим з одного боку через ефект Доплера. Облітайте її, наближайтеся й вимикайте лінзування, щоб побачити, що робить гравітація.
WebGL2GLSLTypeScript
Particle Field
A million particles simulated on the graphics card in raw WebGL2: they drift in a curl-noise flow and spin around your pointer, and when you press and hold they gather into your initials, a sphere, a torus knot or a spiral galaxy, then scatter back into the flow when you let go. Type your own word and watch it form.
WebGL2GLSLGPGPU+1 ще
Resonance
An audio visualizer in raw WebGL2: a raymarched orb whose surface is pushed out by the live spectrum, with bass punch, colour from the mids, sparkle from the highs and a beat pulse. Play a track composed in code and synthesised live, use your microphone, drop in your own audio file, or play a YouTube video.
Web AudioWebGL2GLSL+1 ще