Anatomy

Bu beceri, tezgâh üzerindeki küçük bir alet gibi şekiller yapar: ayaklar üzerinde ağır bir taban, çentikli cetvelleri olan raylar, burçlar üzerinde bir kızak, tırtıllı topuzlar, helezon yaylar, ibresi hareket eden bir komparatör, küçük noktalar olarak vidalar. Okuyucu fikri, makineyi tanıdığı için anlar. Şeklin gösterdiği her sayı, parçalarını hareket ettiren aynı modelden gelir.

Beceriyle birlikte sekiz eksiksiz örnek gelir. Başlamadan önce en yakın olanı açın. Her çerçevesiz örnek node examples/<name>/build.mjs ile derlenir; bu, betiğin yanına bağımsız bir HTML sayfası yazar. Açık tema için --light ekleyin.

• examples/dial-indicator/ en küçüğüdür: bir sehpa üzerinde bir komparatör, toplamda yaklaşık 300 satır.
• examples/desk-computer/ çerçevesiz SVG'dir: klavyesinde yazabileceğiniz bir masaüstü bilgisayar. Yazılan satır, kasanın ön yüzünün düzleminde çizilen bir CRT ekranda görünür ve kapattığınızda görüntü bir çizgiye ve bir noktaya iner. Yaklaşık 85 katı ve 850 yolu vardır.
• examples/arcade-cabinet/ yan paneli sökülmüş dik bir atari kabinidir; yaklaşık 240 katı ve 15 kablodan oluşan bir Kahraman. Bir çeyreklik yuvaya uçar, jeton kanalından 30°'lik bir eğimde yuvarlanan bir diskin ulaştığı hızla yuvarlanır, jeton anahtarı telini tetikler ve kasaya düşer; anahtarın darbesi kablosu boyunca parça parça karta koşar ve CRT ısınır, kendini test eder ve eğik monitörün düzleminde çizilen bir tanıtım modu çalıştırır. Kol eğilir ve panelin altındaki bir mikro anahtarı kapatır. Bir kesitin mekanizmasının görünür kalması için kameranın nasıl yerleştirileceğini, herhangi bir eksen boyunca prizma olarak çizilen içbükey bir kartı, derlemenin kullandığı aynı modülden sayfada yeniden kurulan hareketli parçaları ve oturmuş sıranın ayrılmış yuvalarında çizilen canlı jetonları ve bir teli gösterir. node build.mjs --audit geometriyi kanıtlar.
• examples/raptor-engine/ bir test sehpasında asılı duran bir roket motorudur. Yuvarlak parçaları kit/lathe.mjs'ten, boruları ve kablo demeti kit/tube.mjs'ten gelir. Kademeli yaylarla ve kare başına derinlik yeniden sıralamasıyla 11 montaj grubuna ayrılır. Her parça gerçek şeklini kaydeder ve node build.mjs --audit (kit/audit.mjs) dinlenmede, sökülmüşken ve patlatmanın yeniden oynatılan her karesinde hiçbir şeyin hiçbir şeyin içinden geçmediğini, her ucun gerçek bir bağlantıya oturduğunu, hiçbir bükümün sıkışmadığını, katlanmadığını ya da başka bir çizgiye düşmediğini, hiçbir eğri profilin eğiminin dalgalanmadığını ve her örtüşmenin derinlik sırasıyla çizildiğini kanıtlar. Bir WebGL alevi, şok dalgası, sıçrama ve buhar, arka ve ön SVG arasında çizilir. Yoğun borulama, pürüzsüz gölgelendirme ve sönmeler için referanstır.
• examples/ripple-tank/ bir kâğıt ekran üzerinde uzun ayaklı, 44° yukarıdan görülen bir okul dalga leğenidir. İki WebGL katmanı (kâğıt üzerindeki lamba ışığı, gölgeler ve kostikler ile suyun yansımaları ve camı) izometrik düzlemlere hizalanır ve saf bir dağılım ve optik modeliyle (model.mjs) sürülür; bir frekans değişikliği daldırıcılardan bir geçmiş dokusu aracılığıyla dışa yayılır.
• examples/test-rig/ gerçek bir siteden (React/Next) bir üretim şeklidir: yaylı bir kızak üzerinde cam bir düğme, bir rayda basıp çeken bir parmak probu ve eğimi okuyan bir komparatör. 53 katı ve yaklaşık 470 yolu vardır.
• examples/spot-plate/ aynı siteden ikinci bir üretim şeklidir: bir damla plakasında altı çift cam damla; her çift tek bir uzaklık alanından çizilir, bu yüzden merge'den daha yakın bir çift birleşip tek bir cam parçasına dönüşür. Bir sentil yaprağı yelpazesi merge'ü ayarlar, her boşluk için bir yaprak. Birbirine dönüşen şekiller ve birçok parçayı süren tek bir kontrol için referanstır.
• examples/turning-dial/ isteğe bağlı 3B moddur: üzerinde küçük bir robot el olan, gerçek 3B'de dönen şifreli bir kadran. Metal malzemelerde yaklaşık 90 canlı parçası, ikinci bir dönme grubu, bir menteşe, kalkan üç menteşeli bir parmak ve serbest bir cisim olarak kopan bir kapsül vardır. Bir WebGL LED'i, ışık havuzu ve kıvılcımlar hareketli parçaları izler. Yanındaki stress.mjs, performansı ölçmek için kullanılan, dağınık bir atölyede yaklaşık 380 parçalı yoğun bir eldir.

Test düzeneği çizimin kendisi için kalite çıtasıdır. Raptor shader çalışmasının çıtasıdır: bir WebGL efekti onun dünya uzayında, patlamasız (no-pop), dikişsiz çizim standardına ulaşmalıdır.

Önemli olan tek fikir

Nesnenin kendisi açıklamadır. Kutu, ok ve etiket çizmeyin. Çalışma biçimi kavramın ta kendisi olan gerçek, iyi yapılmış fiziksel bir şey icat edin. Önceki şekiller şöyle eşleşti:

Bunun başarısız olduğu iki yol, ikisi de pratikte görüldü:

• Fazla soyut. Üst üste plakalar, havada duran levhalar ya da etiketli kutular hiçbir şey olarak okunmaz.
• Fazla düz ve sıkıcı. Üzerinde birkaç çizgi olan tek büyük bir levhanın hacmi, parçası ve keşfedilecek hiçbir şeyi yoktur.

İkisinin çözümü de aynıdır: çok sayıda küçük, kesin ve amaçlı parçadan kurulmuş, tanınabilir bir makine.

Her yaratım son derece ayrıntılıdır. Bu, fikir ya da istek ne kadar küçük olursa olsun her şekil için geçerlidir: hızlı bir açıklayıcı bile yoğun, gerçek bir makinedir, asla birkaç levha değildir. Boyutla ölçeklenen şey (iş akışı adım 1) onu ne kadar ileri götürdüğünüzdür: bir Şekil, konusu ve mekanizması üzerinde 4× taramayı, bir Kahraman ya da bir Destan ise tüm çizim üzerinde alır.

• Gerçek şeyi okuyun. Onu gerçek nesnenin yapıldığı gibi kurun: her vida, dikiş, pah, burç, etiket plakası, konektörüyle kablo, çentikleriyle ölçek ve parçaları tutan parçalar.
• İki bakış. 1×'te tek ve net bir makine olarak okunur. 4×'te her bölgede bulunacak doğru bir şey vardır; çıplak bir yüz ya da boş bir köşe sükûnet değil, bitmemiş iştir.
• Amaçlı, asla gürültü değil. Ayrıntı mekanizmaya ait parçalardan gelir. Her biri başka bir parçanın üzerinde durur, bir kenarda biter ve durmak yerine söner.
• En son kontrol edin. Bitirmeden önce 4×'e yakınlaşın (bir Şekil için konu ve mekanizma, bir Kahraman ya da Destan için tüm çizim üzerinde) ve bir bölge sade olduğu her yerde eksik gerçek parçaları ekleyin.

İş akışı

Bu sırayla çalışın. Herhangi bir geometriden önce kavramı ve parça listesini yazın. Kalitenin çoğu orada belirlenir.

1. Başlamadan boyutlandırın. Başka bir işten önce boyutu adlandırın ve aşağıdaki kademe bir tahmin gerektiriyorsa kullanıcıya kabaca ne kadar süreceğini söyleyin.
   • Şekil: tek bir mekanizma, 40–80 parça, en fazla bir WebGL katmanlı SVG. Boyutu adlandırın ve sormadan inşa edin. Kullanıcıya süre söylemeyin; bir Şekil çoğu zaman bir saatten çok daha kısa sürede biter. Aşağıdaki ilerleme kontrolleri için bir saate kadar bütçe ayırın.
   • Kahraman: yoğun bir nesne, birkaç WebGL katmanı ya da tek bir 3B konu, 80–150 parça. Yaklaşık 2–4 saat. Bunu söyleyin, sonra kullanıcı hızlı bir şey istemediyse inşa edin.
   • Destan: birçok hareketli sistemi olan bütün bir araç, bina ya da tesis ya da birden fazla konu üzerinde 3B mod. 6 saat ya da daha fazla. Başlamayın. Tahmini verin, fikrin özünü koruyan bir Kahraman sürümü önerin ve tam sürümün neler ekleyeceğini listeleyin. Destan'ı yalnızca kullanıcı onu seçerse inşa edin.
   • Boyut ne olursa olsun, ilk saat içinde tarayıcıda açılan çalışan bir sayfanız olsun ve oradan derinleştirin. Başlangıçta ve her adımda date çalıştırın; bir adım tahmindeki payının iki katını aşınca kullanıcıya nerede olduğunu ve neyin kaldığını söyleyin.
2. Önce doğruluk. Anlatılan şeyin gerçek sayılarını ve davranışını toplayın: boyutlar, sayılar, eşikler, eğriler. Okuma değeri, hareket ve açıklama hepsi doğru olmalıdır. Yapabiliyorsanız modeli test düzeneği örneğindeki rig.ts gibi küçük, saf bir modül olarak yazın ve her şeyi ondan sürün.
3. Nesneyi icat edin. Mekanizması kavrama birebir karşılık gelen bir makine, alet, cihaz ya da mobilya seçin. Neyin hareket ettiğini ve bu hareketin ne anlama geldiğini tek cümleyle söyleyin. Bir referans görseli asla kopyalamayın: nesnesini değil, işçiliğini alın.
4. Parça listesi. En az 40 parça yazın (bir Şekil için 40–80, bir Kahraman için 80–150, bir Destan için daha fazla), gruplara ayrılmış olarak: taban (plaka, ayaklar, oluk, köşe vidaları, etiket plakası, cetvel şeridi), yapı (direkler, raylar, çerçeve çubukları, son duraklar), mekanizma (kızak, burçlar, yaylar, piston, ibre), kontroller (tırtıllı topuz, kelebek vida, kurma kolu) ve aydınlatılan tek parça olan konunun kendisi. Her parça başka bir parçanın üzerinde durur. references/craft.md'de tarifleriyle bir parça sözlüğü vardır.
5. Dünyayı planlayın. Gerçek şeyin yaklaşık 1 px'i olan dünya birimleri kullanın: zeminde x ve y, yukarı z. Planları yuvarlatılmış dikdörtgenler {x, y, w, d, r} ve daireler olarak yerleştirin. Kamerayı seçin: varsayılan azimut 45°, uzun kenarı göstermek için 35–60°, yükseklik 30° (açık bir şeyin içine bakmak için dalga leğenindeki 44° gibi daha yüksek). Ardından fitProjection(points, width, height, { pad, azimuth }) ile sığdırın.
6. Geometriyi bir kez kurun. Her statik yolu kitle bir geometri modülünde önceden hesaplayın: slabOf, cylinder, extrude, planOutline, topTicks, knurl, coil, radialTicks vb. Herhangi bir eksendeki yuvarlak parçalar (çanlar, flanşlar, valfler, eyleyiciler) kit/lathe.mjs'ten, borular ve kablolar kit/tube.mjs'ten gelir. Hareketli parçalar bir dinlenme konumunda bir kez kurulur ve translateAlong ile hareket ettirilir. Yalnızca şekli değişen parçalar her karede yeniden kurulur.
7. Arkadan öne, aşağıdan yukarıya boyayın. Tekrarlanan parçaları depthOf ile sıralayın. Başka bir parçayı saran her şeyi bir arka ve bir ön yarıya bölün: bir mil etrafındaki yaylar, bir kızağın etrafındaki çerçeve çubukları. Hareketli bir parça fiziksel olarak durduğu yuvada çizilir. references/craft.md'deki "Ressamın sırası"na bakın. Bir şekilde borular, kablolar ve yuvarlak parçalar olunca anahtarları gözle ayarlamayı bırakın: her öğenin şeklini A.recorder(P, { order, spring }) içine koyarken kaydedin, A.settle(R, P)'nin iki öğenin örtüştüğü her yerde gerçek derinliği ölçüp anahtarları ayarlamasına izin verin ve derlemeyi A.auditOrExit(R, P) ile bitirin. Boruları çizmeden önce yönlendirin: iki ucunda gerçek portlar, yapı boyunca bacaklar, düzlüklerde kesişmeler, boruyu boşluklu bırakan bilezikler (references/craft.md, bölüm 8). Çizdiğinizin gerçek şeklini kaydedin: denetimi susturan bir vekil şekil bir hatadır ve denetim onu başarısız sayar. Bir salmastradan kayarak çıkan bir mil, G.rodOut'tan tek bir mildir ve A.slide ile kaydedilir.
8. Çerçeveleyin. Şekli bir karta koyun: sol üstte Şekil n, sağ üstte kısa bir başlık, sol altta etkileşim ipucu ve sağ altta canlı okuma değeri. Lejant anahtarları ve doğru bir açıklama kartın altına gelir; en fazla bir küçük kazınmış etiket dışında sözcükler çizimin dışında kalır.
9. Canlandırın. Sakin, zamana dayalı hareket kullanın: üstel izleme ya da gerçek yaylar. Kimse dokunmadığında boşta bir tur döner. Şekil işaretçiye ve klavyeye tepki verir, ekran dışındayken durur ve azaltılmış harekette durağanlaşır. Öznitelikleri ref'ler üzerinden yazın ve her karede yeniden çizmeyin. references/motion.md'ye bakın.
10. Bir eleştirmen gibi doğrulayın. Sahibi hataları yakınlaşarak bulur; bu yüzden önce siz yakınlaşın. Ürettiğiniz her PNG'yi okuyun.

• scripts/capture.mjs ile masaüstü, telefon (390 genişlik), üzerine gelme ve hareketin birkaç anını yakalayın; diziler, sökülmüş poz ve --no-webgl yedeği için scripts/drive.mjs kullanın.
• Denetimi sıfıra indirin. Borular, kablolar ya da yuvarlak parçalarla node build.mjs --audit her başarısız satır 0'da olacak şekilde audit passed ile bitmelidir: dinlenmede, sökülmüşken ve uçuş ortasında açıklık, uç noktalar, açık uçlar, katlanmalar, kendiyle örtüşme, sıkışıklık (ince katılara karşı da), vekil şekiller, destek, dalgalanma, eyerler ve derinlik sırası. Bir kilitlenmeyi anahtar sapmasıyla değil, geometride düzeltin.
• Çizgi kontrolünü sıfıra indirin. Denetim çizgi işaretlemesini görmez. node scripts/lines.mjs page.html --out shots/lines.png (ve -light sayfada ve drive.mjs'in ["lines"] eylemiyle her dinlenme pozunda) line ends: 0 yazdırmalıdır: her dikiş, çizgi, nervür, çentik ve işaretçi bir kontur, bir nokta ya da bir dış hatta biter. Halkalanmış PNG'yi okuyun.
• Her birleşimin iki temada da 4× yakın çekimleri (--light da derleyin), monte ve sökülmüş halde: her flanş, T, dirsek, kelepçe, valf, körük, bant, eyer, rotil ve kesişme; her eğri gövde (ton merdiveni yok); bir dokunun bittiği her yer (bir kenarda ya da sönerek); dikişleriyle düz kutu yüzleri; bir parça birleşiminde her dokulu hortum; dinlenmede ve tam stroklu her kayan mil ve içinde metin ya da shader içeriği olan her pencere.
• Shader'lar: her geçiş boyunca ["slow", 0.05] ile yavaşlatılmış bir temas sayfası; hiçbir şey patlamaz, renk değişmez, kenarlar 0 okur. Açık temada ayrıca her geçiş boyunca kare başına mürekkebi kaydedin (ışığı monoton olarak izlemelidir) ve mürekkebin konturlarla buluştuğu yerleri 8–16×'te kırpın (references/verify.md, "Açık tema shader'ları").
• PNG'nizi örneklerin yanına koyun ve sorun: anında gerçek bir nesne mi, hacimli küçük parçalarla dolu mu, her çizgi bir şeyde bitiyor mu? 1×'te son derece ayrıntılı ve 4×'te hâlâ ödüllendirici mi; çıplak bir yüzü ya da boş bir köşesi yok mu? Evet olana kadar yineleyin. Kontrol listesi: references/verify.md.

Kurulum

Kit kit/ içindedir:

Projeye uyan yolu seçin:

• Bağımsız HTML, statik bir SVG, bir blog yazısı ya da React olmayan herhangi bir site. examples/dial-indicator/build.mjs gibi bir Node derleme betiği yazın. kit/iso-kit.mjs'i içe aktarır, dizgileri solidSvg, lineSvg, dotsSvg, wireSvg ve faceTextSvg ile birleştirir, figureSvg ve plateHtml ile sarar ve sayfayı pageHtml({ script: kitScript() + live }) ile, bir shader'ı varsa kitScript() + glScript() + live ile yazar. Tek başına bir .svg dosyası için stilleri gömen figureSvg({ standalone: "dark" | "light" }) kullanın.
• React ya da Next.js. kit/'i projeye kopyalayın (örneğin components/iso/). Geometriyi düz .ts modüllerinde tutun, statik sanatı draw.tsx bileşenleriyle bir sunucu bileşeninde kurun ve onu öğe prop'ları olarak şeyleri hareket ettiren tek bir "use client" canlı bileşenine iletin. references/react.md ayrımı ve büyük sayfalardaki bir tuzağı açıklar.

Zanaat kuralları (kısa biçim)

Bunlar, işlenmiş bir şekli bir diyagramdan ayıran kurallardır. references/craft.md tam gerekçeyi ve tarifleri verir.

• Tel kafes değil, katılar. Her parça kâğıt renginde doldurulur ve sırayla boyanır; böylece öndeki şeyler arkadakileri gizler. Saydam kenarlar ve kesikli gizli çizgiler yoktur.
• Gölgelendirmeyi kite bırakın. extrude yüzün yönüne göre dört yan ton ve daha açık bir üst döndürür. Yüksekliği olan her şey için bunu koruyun ve flat'i yalnızca 1 birimden ince zeminler ve kakmalar için kullanın.
• Ton hiyerarşisi. Taban ve ayaklar lo, yapı mid ve konu hi'dır. Tam olarak bir vurgu lit'tir (koyuda beyaz, açıkta siyah): okuyucunun izlemesi gereken parça. Oluklar faint, küçük çentikler lo, büyük çentikler mid ve sıfır işareti hi'dır. Rengi yalnızca renk konunun kendisi olduğunda kullanın; örneğin kırmızı, yeşil ve mavi kanallar.
• Küçük, kesin ayrıntı; asla gürültü değil. 0.4–1.6'lık pahlar, kenardan 3–5 içeride oluklar, köşelerde halkalı 0.4–0.55'lik noktalar olarak vidalar, topuzlarda tırtıllar, her 5'incisi büyük olmak üzere her 4–5 birimde cetvel çentikleri ve üç çizgili bir etiket plakası kullanın. Her ayrıntı bir parçaya aittir.
• Çizgiler sonuçlanır. Her çizgi bir şeyde biter: bir yüz, başka bir çizgi ya da bir uç noktası. Bağlantılar, uç noktaları nesnelere inen Wire'lardır. Kılavuz çizgileri, balonlar, ölçü okları ya da havada duran etiketler yoktur.
• Hiçbir boru ya da kablo hiçbir şeyin içinden geçmez. Başka bir borunun, kablonun ya da katının içinden; dinlenmede, sökülmüşken ya da patlatmanın herhangi bir karesinde. Bir hattın kendi bağlantısı dışında her şeyle yaklaşık 1.5 yarıçap açıklık bırakın, hatları konunun yüzünün üzerinden değil yapının yanından geçirin ve bir flanş, bant, körük, kelepçe ya da valfin onu sardığı her yerde boruyu boşluklu bırakın. Parçalar gömülü değil, düz, teğet ya da kenar-yüzey olarak buluşur: bir flanşın arka yüzü portuna oturur (port eğriyse bir eyer pedi üzerinde, G.saddleOf), bir kol bir bilyeli T'den ayrılır ve sökülmüşken de her uç bir flanş, kaplin, konektör kabuğu ya da uç noktasında biter.
• Her kesişme gerçek derinlik sırasıyla çizilir. Ekranda iki öğenin örtüştüğü yerde yakın olan üstte çizilir; bu gözle ayarlanmaz, A.settle ve denetim tarafından kanıtlanır. Çizgiler derinlikte birbirinden epey uzak, düzlüklerde kesişir: başka bir çizginin dış hattına düşen bir büküm, uç ya da kelepçe bir birleşim gibi okunur (bir çubuk, gergi çubuğu, direk ya da ray da bir çizgi sayılır: bir borunun son bacağı ekranda asla birinin boyunca uzanmaz), izleyiciye bakıp sonra dönen bir bacak bir V'ye sıkışır (böyle bir porttan bir dirsek bilyesiyle çıkın) ve bir yol ekranda asla geri dönmez. Sıralanamayan bir çift kilitlenir ve çözüm bir sapma değil, bir kesim ya da teğet bir temastır.
• Eğri yüzeyler merdiven değil, pürüzsüz gölgelenir. Eğri düğümleri pürüzsüz işaretleyin ([s, r, 1]); lathe onları dış hattı da çizen tek bir monoton eğriden gölgelendirir. Bir bağlantı parçasından büyük her eğri gövdeye smooth: { slope } ile analitik bir profil verin, uzun gövdeleri G.bandsOf ile kesin ve toplar için G.sphereOf kullanın. Ton bantları düz bir kesimde bitmek yerine sıfıra incelir ve dikişler dış hattın altına girer (inner).
• Bir doku gerçek bir kenarda biter ya da söner. Nervürler, cıvata çemberleri, çizgiler, dikişler ve oluklar, düz ya da eğri, asla bir yüzeyin ortasında durmaz: ribsOf ve dotsOf fade alır (sönmüş nervürleri fadedSvg ile çizin), bir nervür sırası dikişlerinde biter (ribsOf(…, { seams: true })), bir kutudaki dikiş ya da kaynak köşelerini sarar (levhanın inner'ı olarak k.sideSeam), bir yüzdeki çizgi kenardan kenara uzanır, havalandırmalar kapalı yuvalardır, çentikler bir cetvel şeridinin kenarından sarkar, durması gereken tek bir çizgi fadeLineSvg ile sönerek biter ve özellikleri yukarı bakan bir sıra (bir halkanın üstündeki delikler) her yönden görülür (all: true). Bir borudaki doku (örgü, oluk, sargı) kesitini izler ve her parça birleşiminden geçer: tubePieces(…, { rings }), asla merkez çizgisi boyunca kesikli bir kontur değil. Bir borunun parlaklığı ve gölgesi uç kapaklarına ve her parça birleşiminden geçerek uzanır. Yalnızca basılı metni temsil eden çizgiler, bir ibrenin kuyruğu ve bir işaretçinin ucu çıplak bir yüzde durabilir; free olarak işaretlenir.
• Shader'lar asla patlamaz ya da kesilmez. Her uniform yükselişi ve sönümü olan bir zarfa biner, evre değişiklikleri fiziksel nicelikle sürülen çapraz geçişlerdir, her terim herhangi bir sınırdan ya da tuval kenarından önce sıfıra ulaşır ve efekt şeklin kendi kamerasında, dünya uzayında yaşar (aşağıya bakın).
• Yüzlerdeki şeyler onlara sığar. Bir makinenin gösterdiği metin en geniş dizgisinde penceresine sığar ve ona kırpılır; bir açıklıktan görülen içerik hem açıklık hem de kendi düzlemi tarafından kırpılır ve girinti duvarları çizilir.
• Hacim. Şeylere gerçek kalınlık verin, başka şeylerin üzerinde durmalarını sağlayın ve tabanın ve kaldırılmış her şeyin altına yumuşak bir hale koyun.
• Kompozisyon. Şekli ortalayın ve kartın yaklaşık %55–65'ini doldurmasını sağlayın. Bir şekil dizisinde tutarlı bir ölçek koruyun ve 390 px genişlikte de okunduğundan emin olun.

Çizimin içinde WebGL

Bir shader'ı yalnızca çizgilerin çizemeyeceği şeyler için kullanın: ateş ve egzoz, su ve kostikler, gerçek lamba ışığı, parlama, buhar. Parçalar SVG olarak kalır. Temel kurallar, evreler arasındaki renk değişimi çapraz geçiş yerine kesik görünen ilk shader şeklinden gelir:

• Üç katman. Bir arka SVG efektin örttüğünü tutar, tuval efekti tutar (pointer-events: none) ve bir ön SVG onu örteni tutar. İki tarafta da bulunan bir parçayı ya da efekti bölün.
• Dünya uzayı, aynı kamera. Her shader noktasını onFloor, onWallX ve onWallY'den kurun ya da pikselin ışınını rayOf(vb) + t·towardViewer() boyunca ilerletin. Her şeyi dünya birimleri çarpı uK olarak boyutlandırın. Bir düzlem üzerinde yatan her şey o düzlemin SVG çizgileriyle tam olarak hizalanır.
• Hiçbir şey patlamaz. Her uniform yükselişi ve sönümü olan bir zarfı izler (olaylar için kitin burst'ü, düzeyler için settle). Evre değişiklikleri, rengin fiziksel nicelikle sürekli değiştiği çapraz geçişlerdir ve bir sönme yalnızca koyulaşır.
• Sert kesimler yok. Her terim herhangi bir if'ten, sınırdan ya da tuval kenarından önce ve bir hücre gürültüsünün herhangi bir hücre kenarından önce sıfıra ulaşır.
• Bir açıklıktan görülen, iki kez maskelenir. Bir pencerenin ya da girintinin arkasındaki içerik kendi düzleminde ve yüz düzlemindeki açıklıkla maskelenir, çarpılarak (references/webgl.md, bölüm 5).
• Karıştırma. tonemap() ve titreşim (dither) kullanın. Koyu temada yalnızca ışık ekleyen bir tuval mix-blend-mode: screen ile önceden çarpılmış çıktı kullanır ve koyulaştırması da gereken bir tuval (dalga leğeninin suyu) normal karışımda kalır.
• Açık tema yayınlanır ve shader'ları kâğıt için tasarlanır. Asla screen değil, normal önceden çarpılmış alfa kullanın. Kâğıdın göstermesi gereken rengi yazın ve mürekkebi ondan çözün. Bir parlama doygun bir gövde, soluk bir çekirdek, renkli bir kenar ve bir alfa tabanıdır; asla koyulaştırılmış bir koyu tema rengi değil: bu, Raptor'un "kırmızı mürekkep dumanı"nı verdi.
  • Işığın düştüğü şey bir renk tonu alır ve onu tutan boşluk daha koyu fiziksel bir zemin alır (kurum, refrakter, su derinliği).
  • Sıcak gövdeler yedekle paylaşılan tek bir kara cisim mürekkep tablosunu izler.
  • Mürekkep yalnızca ışıkla artar: bitmiş mürekkebi her seferinde tek bir terimle değil, bir kez söndürün.
  • Mürekkep her konturun iç kenarında biter.
  • Mürekkebi kare başına ölçün. references/webgl.md, bölüm 8, tarifleri ve gözden geçirenlerin bulduğu hataları içerir.
• Ölçülülük. Cihaz oranını 1.5 ile sınırlayın ve yalnızca efekt etkin ve ekrandayken çizin. Azaltılmış harekete tek bir durağan kare düşer ve SVG WebGL olmadan da okunmalıdır.

Herhangi bir shader yazmadan önce references/webgl.md'yi okuyun.

3B: dönen şekiller (beta)

3B, WebGL gibi bir seçenektir. Derinlikte hareket eden bir parça fikrin kendisi olduğunda kullanın: dönen bir kadran ya da döner tabla, bükülen parmaklar, kopup düşen bir parça. Şeklin geri kalanı statik kit sanatı olarak kalır.

Beta aşamasındadır: motor kendi örneğinde ve bir test şeklinde kanıtlanmıştır, henüz bir üretim şeklinde değil. Bir seferde tek bir konuyu döndürün ve çevresindeki dağınıklığı statik tutun. Küçük bir şekil 60 fps'de çalışır; yoğun, 380 parçalı bükülen bir el, yoğun yük altındaki bir makinede 1440'ta yaklaşık 20 fps ve bir telefon profilinde (390 px, 4× CPU kısıtlaması) 13–15 fps ölçüldü.

• Canlı parçalar kitin kendi resmidir. Her karede dışbükey kit ilkelleri (prizmalar, yuvarlaklar, kubbeler, düzlüklü toplar, torna parçaları, borular) kitin kurallarıyla yeniden izdüşürülür ve gölgelendirilir. θ kadar bir dönüş, kitin a − θ azimutunda çizimidir.
• Sıra ayırıcı düzlemlerden gelir. Aynı gruptaki çiftler grupta sabit bir düzlem alır, farklı bağlantılardaki çiftler ortak çerçevelerinde sabit bir düzlem alır ve geri kalanı her karede çözülür. Denetim hiçbir açıda ya da hiçbir klip karesinde döngü olmadığını kanıtlar.
• Temaslar düz, teğet ya da kenar-düzlem'dir. Eklemler, alt grup üzerinde ebeveynin bağlantısına değen eş eksenli mafsal diskleridir; aksi halde denetim bütün alt grubu gevşek sayar. Hiçbir canlı çizgi iki hareketli grubu kapsamaz: bir kablo bir eklemden her iki yanda bir klipsle geçer ya da döner tablaya göbekteki bir kayar halkadan ulaşır.
• Canlı borular yataya yakın düzlemlerde ya da bağlantı parçalarının içinde bükülür ve asla görüş yönüne bakmaz. Bir büküm R ≥ 2r / sin²(e − θmax) gerektirir; burada θmax bindiği her menteşenin eğim aralığını içerir: düzken sınır 8r, ±12°'lik bir menteşede 21r'dir. Her yol, portları gaps içinde olmak üzere bağlantı yüzeyinden bağlantı yüzeyine uzanır. Bu her açıda ve her pozda geçerlidir.
• Malzemeler rampayı yeniden eşler. Altın, krom, çelik, top metal, kauçuk, pirinç ve bakırın her birinin açık ve koyu bir takımı vardır; tonlar yine yönden gelir.
• Serbest gruplar sıçramadan kopar. Eş eksenli parçalar dönen dokulu sabit resimlerdir.
• Shader'lar hareketi izler. Onları controller.anchor ya da toGroup ile bir gruba bağlayın, bir ön tuvali coverOf ile örtün ve dünya efektlerini (duman, düşen kıvılcımlar, tezgâhtaki yağ) grup uzayının dışında tutun.
• --audit (turn audit passed) ve scripts/turn-check.mjs (--fidelity, --order, --pops, --lines, --perf) ile doğrulayın. --quick --only=… ile yineleyin. Şekli yalnızca tam bir çalıştırma kanıtlar ve 30 parça için 15–20 dakika sürer; bu yüzden arka planda çalıştırın.

Önce references/3d.md'yi okuyun.

Yazdırılabilir sayfalar (A4)

Kullanıcı şekli kâğıt üzerinde istediğinde (bir el notu, bir poster, bir PDF, bir A4 ya da Letter sayfa), yeniden çizmek yerine bitmiş şekilden yazdırın. Derlemenin yanına bir sheet.mjs yazın: drive.mjs eylemleri olarak yakalanacak pozlar, canlı SVG üzerinde CSS seçicileri olarak parçalar ve her biri modele sadık sözcükler. Ardından node scripts/print.mjs sheet.mjs --format all --png çalıştırın ve her sayfayı okuyun.

• poster (varsayılan): tek sayfa, büyük yazılmış ad, soru, büyük sayılar, numaralı iğneli şekil ve birer satırla her parça.
• drawing: tek sayfa; parça listesi, bir spesifikasyon, bir iç görüntü ve çalışan parçaların aydınlatıldığı bir adım şeridi olan teknik bir çizim.
• detailed: makineye göre ölçeklenen 2–4 sayfa: iğneler ve yuvarlak yakın çekimlerle bir genel bakış; her adımın büyük, aydınlatılmış bir durağan görüntü olduğu "Nasıl çalışır" (sayfa başına altı, son yuvada "neden"); ve karmaşık şekiller için parça gruplarının en fazla dört büyük yakın çekiminin olduğu bir "Montaj grupları" sayfası (spesifikasyonda assemblies). Basit bir şekil 2 sayfada kalır; maxPages bunu sınırlar.

Kullanıcı birini seçmediyse üçünü de önerin. Sayfa PDF'i olan bir şekli gösteriyorsa, karta kit/pdf-button.mjs'teki pdfButton(href) ile kart gövdesinin içine bir bağlantı koyun (examples/push-button/build.mjs'e bakın); önce yazdırın, sonra sayfayı yeniden derleyin. Referanslar examples/raptor-engine/sheet.mjs ve examples/arcade-cabinet/sheet.mjs'tir. Önce references/print.md'yi okuyun.

Referanslar

Gerektikçe bunları okuyun:

• references/craft.md: görünüş derinlemesine; kodlu parça sözlüğü, ton tabloları, ressamın sırası kalıpları, yuvarlak parçalar, borular ve kablo demetleri, patlatılmış görünümler, yüzlerdeki ekranlar ve şekillerin reddedilmesine yol açan anti-kalıplar dahil. Tasarlamadan önce okuyun.
• references/kit.md: imzalar ve örneklerle API.
• references/motion.md: canlı davranış (döngüler, yaylar, turlar, işaretçi, klavye, erişilebilirlik, azaltılmış hareket), ayrıca düz JS ve React'te tek seferlik olaylar için zarflar, patlatılmış görünümler, derinlik yeniden sıralaması ve hazırlama.
• references/react.md: React/Next.js sunucu/istemci ayrımı, öğe prop'ları ve büyük yük key uyarısı tuzağı.
• references/verify.md: capture.mjs ve drive.mjs komutları, gözden geçirme kontrol listesi (shader'lar dahil) ve yaygın hatalar.
• references/webgl.md: çizim içindeki shader'lar: birinin ne zaman yerini hak ettiği, katman yığını, kamera sözleşmesi, izometrik kamerada ışın yürütme, minimal bir sayfayla tam API, onları öğreten hatalarla zanaat kuralları, açık tema (kâğıt üzerindeki mürekkepler, olgu başına tarifler, gözden geçirenlerin hataları) ve nasıl doğrulanacakları.
• references/walkthrough.md: test düzeneğinin kavramdan koda adım adım nasıl tasarlandığı.
• references/3d.md: isteğe bağlı 3B mod: gruplar ve pozlar, canlı katmanlar, dışbükey parçalar ve kuralları, malzemeler, serbest gruplar, menteşe zincirleri, ressamın sırası, bir döner tabla etrafındaki statik dağınıklık, dönüşü izleyen shader'lar, yörünge denetimi, tarayıcı kontrolleri, performans ve sınırlar.
• references/print.md: derlenmiş bir şekilden yazdırılabilir A4 ya da Letter sayfalar: üç biçim, sheet.mjs spesifikasyonu (pozlar, seçici olarak parçalar, odak, gizleme, kırpmalar, WebGL için raster görüntüler) ve PDF'in nasıl kontrol edileceği.
• references/publish.md: bitmiş bir şekli scripts/publish.mjs ile topluluk galerisinde paylaşmak, yalnızca kullanıcı istediğinde; onlar için hiçbir şey push edilmez.