Диня, що тут не затремтіла: читаємо WebGPU-збірку на GLM-5.3-Flash

JACK GROSS · SOURCE REVIEW · 29 SEP 2026

Сторінка відкривається як музейна картка експоната: величезним антиквенним шрифтом «Melon Jelly.», а під ним «A slice of summer. A little wobble. Too soft to share.» Праворуч рука, ніж, три колірні сорти й два повзунки. У центрі, в браузері, який я можу перевірити, дині немає. На картці написано «No WebGPU adapter was found.» З цієї порожньої сцени історія й починається чесно: з того, що модель вклала в сирцевий код, і з того, чого скриншот довести не може.

HTML + CSS→SoftBody / XPBD→WebGPU→Перевірка, що дасть підстави

Що я можу перевірити

Сторінка Melon Jelly, яку я вивчав, називає себе створеною за допомогою Z.AI GLM-5.3-Flash. У мене є розгорнута сторінка та її першокод. Немає запиту, листування, логів моделі й історії збірки, тож я можу приписати створення цьому опису, але не можу підтвердити генерацію з одного разу й не знаю кількості правок. Документація Z.AI називає модель і перелічує входи: зображення, файли й текст. Це контекст про продукт, а не свідчення про цей проєкт. За живою адресою віддається один HTML-документ на 175 592 байти зі вбудованим CSS, одним вбудованим модульним скриптом і без зовнішніх скриптів і стилів. Це спостереження на рівні першокоду, а не аудит безпеки. [source]

Механізм усередині файлу

Цей шматочок більший за анімовану картинку. Першокод будує тетраедральну сітку, розподіляє масу за об'ємами спокою й крокує SoftBody з фіксованим кроком 1/60 секунди та десятьма підкроками. Кожен тетраедр підтягується до найкращої повернутої форми спокою з членом податливості, а потім обмеження об'єму підштовхує його до об'єму спокою. Код додає корекцію проти вивертання, жорсткіші ділянки шкірки, демпфування відносно ребер і контакт з підлогою з тертям. Музейна етикетка пояснює ті самі ідеї словами. Реалізацію можна читати, а чисельну стійкість і фізичну реалістичність читанням не встановити. [source]

Чому різати найважче

У першокоді ніж не декоративний перемикач. Мазок стає площиною леза, код ділить опуклий контур площини спокою й будує нові тетраедральні шматки. Він намагається перенести рух старого шматка в нові, а не ховає половину сітки. Це складніша задача неперервності, ніж гарна анімація розрізу: новим тілам потрібні власні об'єми, прикріплення поверхні, зіткнення й показники. У першокоді є шляхи splitPiece та planCut/performCut, але на GPU я їх не запускав. Сувора заява вимагає повторюваного тесту розрізу, а не напису в меню. [source]

Світло це половина історії

Освітлення живе в рядках шейдерів WGSL і в коді рендера на WebGPU. Власна панель методів сторінки називає товщину за задніми гранями, заломлення, поглинання кольору за законом Бера-Ламберта, молочне розсіювання, відбиття Френеля й кольорову тінь на підлозі. Вершини поверхні, насіння й бульбашки прив'язані до тетраедрів барицентричними вагами, тож видима шкіра має слідувати симуляції. Цей поділ на сітку симуляції й сітку відображення дає змогу желе виглядати гладким, не роблячи кожне насінням окремою фізичною частинкою. Це читання архітектури, а не вимірювання якості рендера. [source]

Чого скриншот довести не може

Інтерфейс обіцяє палітри Crimson, Golden і Rosé, пружність і демпфування, прапорець чверті швидкості, каркас, штовхання, паузу та показники маси, об'єму, кінетичної енергії й кількості шматків. Першокод підключає ці елементи й виводить числа зі стану сітки в ілюстративному масштабі. У моєму захопленні запит адаптера WebGPU не вдався, запасний варіант вимкнув взаємодію, а показники лишилися порожніми. Скриншот показує сильне художнє рішення й охайний шлях помилки, а не працююче тремтіння. У браузері з GPU можна побачити більше, але я не можу стверджувати, що така перевірка тут була. [source]

Тест, що заслужив би висновок

Я запустив би це на пристрої з WebGPU й записав версії браузера та GPU. Почати зі заспокоєного шматочка й стежити за дрейфом об'єму, скінченністю координат і часом кадру. Схопити кінчик, відпустити й перевірити, що енергія згасає, а тіло не вибухає й не завмирає. Розрізати шкірку під кількома кутами й переконатися, що кількість шматків, об'єм і маса узгоджені, а поверхні розрізу не провалюються крізь стіл. Перемкнути чверть швидкості й каркас, повторити після втрати пристрою й порівняти скриншоти за різних розмірів вікна. Якщо мета оцінити генерацію моделлю, а не лише код, потрібен журнал запитів і правок. [source]

Тихий герой це запасний варіант

Найбільше вражає стриманість запасного варіанта. Сторінка не підсовує тихо статичну картинку, вдаючи, що все запустилося. Вона каже, що рендерер не працює. Ця збірка показує, як артефакт, створений за допомогою моделі, може вмістити в одному файлі дизайн інтерфейсу, фізичну лексику, виконувану структуру й чесне повідомлення про помилку. Чи створила його GLM-5.3-Flash за один прохід і чи відчувається фізика слушною під справжньою рукою, лишається питанням до журналу збірки й випробування на GPU. [source]

Ілюстративна схема кроку

// Simplified map of the inspected loop, not a copied or run implementation.
const STEP = 1 / 60;
while (elapsed >= STEP && steps < 3) {
  for (let sub = 0; sub < 10; sub++) {
    integrate();
    constrainRotatedTetShape();
    constrainTetVolume();
    resolveGround();
  }
  elapsed -= STEP;
  steps++;
}
// Test real values and cuts on a WebGPU device before claiming stability.

Джерела й походження: Melon Jelly source and live page · Z.AI GLM-5.3-Flash documentation. Огляд коду, не підтверджений журнал генерації й не успішний GPU-тест.