
Inkwash՝ ջրաներկի սիմուլյատոր մեկ HTML ֆայլում
Ջոնո Ուիթաքերի Inkwash-ը հեղուկի լուծիչի և Beer–Lambert-ի ցուցադրման շերտի օգնությամբ նմանակում է թանաքի ու ջրի վարքը թղթի վրա։ Ամբողջ հավելվածը մեկ HTML ֆայլ է՝ առանց կախվածությունների։
Ջոնո Ուիթաքերը հրապարակել է Inkwash-ը՝ բրաուզերում աշխատող ջրաներկի էսքիզների հավելված, և դրա հետ մեկտեղ երկար տեխնիկական բացատրություն այն մասին, թե ինչպես է այն աշխատում։ Հավելվածը մեկ HTML ֆայլ է՝ հազար տողից պակաս, առանց կախվածությունների և առանց build-ի փուլի. այն պահանջում է WebGL2 և renderable half-float տեքստուրաներ՝ աջակցություն, որը հեղինակը թվագրում է մոտավորապես 2021 թվականից սկսած սարքավորումներով։
Ջրային վրձնից մինչև հեղուկի լուծիչ
Նախագիծը սկսվել է որպես Anthropic-ի Claude Fable 5-ի փորձարկում և վերաճել է փորձի՝ բրաուզերում վերականգնելու հեղինակի բնության օրագրի սովորույթը։ Այդ սովորույթը Pilot G2 գրիչը զուգակցում է waterbrush-ի հետ՝ նեյլոնե վրձին, որի բռնակում սեղմվող ջրի ռեզերվուար կա։ Ուիթաքերը գրում է, որ ինքը կոդին չի դիպչել. ֆայլը կարող է կարդալ, սակայն իրականացումը գրել է մոդելը, ինչպես և բացատրության տեքստի զգալի մասը, ինչը նա բացահայտ նշում է։
Կտավի տակ պատկերը պիքսելներ չեն, այլ լողացող կետով տեքստուրաների դասավորություն՝ շարժվող պիգմենտ, նստած պիգմենտ, ջուր, արագության դաշտ և ճնշում. դրանք ամեն կադրում ping-pong-ով անցնում են մոտ մեկ տասնյակ WebGL2 շեյդերների միջով։ Հեղուկի շարժումը հիմնված է Ջոս Ստամի 1999 թվականի Stable Fluids ալգորիթմի վրա, որի կիսալագրանժյան ադվեկցիան ամեն բջիջ հետ է տանում արագության դաշտի երկայնքով, ուստի նույնիսկ մեծ ժամանակային քայլը չի պայթեցնում սիմուլյացիան։ Ճնշման պրոյեկցիան մոտ 22 Jacobi իտերացիայով ջուրը դարձնում է չսեղմվող։
Խոնավությունը որպես թույլտվությունների համակարգ
Արդյունքը թղթի տպավորություն թողնում է այն պատճառով, որ խոնավության դաշտը դարպասում է ամբողջ սիմուլյացիան։ Արագությունը բազմապատկվում է խոնավության smoothstep-ով, ուստի չոր մակերևույթի վրա հոսք գոյություն չի ունենում, և ներկի շերտը կանգ է առնում սեփական սահմանին։ Պիգմենտի շարժունակությունը նույն ձևով է սահմանափակվում. խոնավ թուղթը թույլ է տալիս թանաքին սողալ, թրջվածը՝ հոսել։ Ջուրն ինքը ադվեկտվում է հոսքի արագության 0.6-ով և չորանում էքսպոնենցիալ, իսկ սահիչը ժամանակային հաստատունը դնում է մոտ 2-ից 18 վայրկյանի սահմանում։ Թարմ գրիչի թանաքը թողնում է նաև իր փոքր խոնավությունը. այդ պատճառով գծից անմիջապես հետո անցած վրձինը գիծը փափկացնում է, իսկ հին գիծը մնում է ամուր։
Beer–Lambert և կապույտ լուսապսակ
Պիգմենտը պահվում է ոչ թե որպես գույն, այլ յուրաքանչյուր ալիքի օպտիկական խտություն, և ցուցադրման շեյդերը այն փոխակերպում է Beer–Lambert-ի օրենքով՝ թղթի գույնը բազմապատկելով խտության էքսպոնենտով։ Այդ պատճառով վերադրված գծերը խորանում են, այլ ոչ թե հարթվում մոխրագույնի, ինչպես վարվում են իրական գլազեները։ Նույն որոշումը ստեղծում է նաև հավելվածի բնորոշ էֆեկտը. տարածման քայլն ամեն ալիքում այլ արագությամբ է ընթանում, ուստի խոնավ եզրը ինքնին բաժանվում է մուգ միջուկի և շուրջը՝ սառը կապույտ-մանուշակագույն լուսապսակի՝ նմանակելով այն, թե ինչպես է սև թանաքը քրոմատոգրաֆիայի ենթարկվում խոնավ թղթի վրա։
Շերտավորումն ապահովում է պիգմենտի երկրորդ՝ նստած շերտը. "fix" կոճակը գործարկում է 1.2 վայրկյանանոց անցում, որը շարժվող պիգմենտը տեղափոխում է ամրացված շերտ, և թուղթը ակնթարթորեն չորացնում, իսկ սպիտակ գուաշը դրանում անթափանց կերպով արմատավորվում է։ Ամբողջ շղթան՝ տասներկու շեյդերային անցումներ ներառյալ Jacobi իտերացիաները, հեռախոսի վրա աշխատում է վայրկյանում 60 կադր արագությամբ, գրում է հեղինակը, քանի որ թանկ հաշվարկը կատարվում է կոպիտ ցանցի վրա։
SiTech — AI-ով հզորացված վեբ մշակում
Ստեղծում ենք արագ ու ժամանակակից կայքեր և AI-ը ներդնում իրական բիզնես գործընթացներում։ Ունե՞ք նախագիծ կամ հարց։ Ուրախ կլինենք օգնել։