AAA – Teknik Anti-Aliasing Analitis

 (blog.frost.kiwi)
1 poin oleh GN⁺ 2024-11-21 | 1 komentar | Bagikan ke WhatsApp
  • Jaggies dan pixel crawling yang muncul dalam rasterisasi lebih terlihat saat bergerak daripada pada gambar diam, dan artikel ini membandingkan berbagai metode anti-aliasing melalui demo lingkaran WebGL
  • SSAA, MSAA, dan FXAA masing-masing memiliki batasan berbeda: biaya downsampling, ketergantungan pada hardware, dan distorsi bentuk berbasis post-processing
  • Analytical Anti-Aliasing, ketika batas matematis suatu bentuk diketahui, menghitung jarak ke batas menggunakan signed distance field, lalu menerapkan alpha fade selebar 1 piksel di sekitar tepi
  • Ukuran piksel pada 2D dapat dihitung langsung dari ukuran objek dan rendering, sementara jika ada perspektif 3D diperlukan Screen Space derivatives seperti dFdx, dFdy, dan fwidth
  • Dapat diimplementasikan bahkan di WebGL 1.0/OpenGLES 2.0 tanpa buffer tambahan atau hardware khusus, tetapi membutuhkan SDF untuk seluruh bentuk dan memiliki keterbatasan pada bentuk berfrekuensi tinggi yang lebih kecil dari 1 piksel

Anti-aliasing dilihat lewat demo lingkaran WebGL

  • Tujuan artikel ini adalah meninjau berbagai teknik Anti-Aliasing untuk mengurangi jaggies yang muncul dalam rasterization, lalu pada bagian akhir memperkenalkan implementasi Analytical Anti-Aliasing
  • Metode yang dibandingkan berurutan mencakup SSAA, MSAA, FXAA, keluarga MLAA/SMAA, hingga AAA
  • Demo menggambar lingkaran yang bergerak di canvas WebGL, dengan asumsi bahwa anti-aliasing harus dipahami dalam konteks gerakan, bukan gambar diam
  • Canvas contoh dirender pada resolusi native perangkat, dan kotak merah menyediakan tampilan yang diperbesar 4 kali
  • Untuk layar beresolusi tinggi yang membuat aliasing sulit terlihat, demo menyediakan pilihan resolusi render Native, 1/2, 1/4, dan 1/8, serta menggunakan integer scaling

Masalah yang dihasilkan rendering lingkaran dasar

  • Rendering lingkaran paling sederhana dilakukan dengan fragment shader yang mengeluarkan warna jika length(uv) < 1.0, dan menjalankan discard jika tidak
  • Lingkaran tidak bergantung pada resolusi geometry sebenarnya; shader menentukan bagian dalam dan luar lingkaran di atas quad yang dibuat dari 4 vertex
  • varying vec2 uv diinterpolasi untuk setiap fragment, menyediakan koordinat dengan pusat 0 dan rentang dari -1 hingga +1
  • Cara ini termasuk Alpha testing, dan nilai length(uv) terhubung dengan signed distance field yang digunakan nanti dalam AAA
  • Pada resolusi rendah, lingkaran terlihat blocky, dan saat bergerak muncul pixel crawling serta wobble yang kuat, yaitu baris piksel yang muncul lalu menghilang
  • Resolusi 1/4 dan 1/8 juga digunakan bukan sekadar sebagai pembesaran sederhana, tetapi sebagai contoh elemen 3D yang kecil atau jauh

SSAA: downsampling yang sederhana tetapi mahal

  • SSAA adalah singkatan dari Super Sampling Anti-Aliasing, yaitu metode menggambar pada resolusi lebih besar lalu melakukan downsample ke ukuran lebih kecil
  • Implementasi contoh menggambar lingkaran ke texture berukuran (canvas.width / resDiv) * 2, (canvas.height / resDiv) * 2, melakukan downsampling ke framebuffer resolusi standar, lalu melakukan blit ke layar
  • Rendering pada resolusi 2 kali menggunakan 4 piksel input untuk setiap 1 piksel output, sehingga memori dan jumlah komputasi meningkat 4 kali lipat
  • Pada contoh nyata, anti-aliasing memang terjadi, tetapi terlihat lebih lemah dari yang diharapkan
    • Seharusnya ada 4 tingkat transparansi, tetapi secara pengamatan ada area yang hanya menunjukkan 2 tingkat
    • Pada resolusi rendah, 4 tingkat transparansi terutama muncul di sekitar diagonal 45 derajat
    • Pada bagian bawah yang sejajar sumbu, hanya terlihat opasitas penuh dan transparansi 50%, sementara tingkat 25% dan 75% hilang
  • Penyebabnya adalah bentuk lingkaran itu sendiri tidak disampling pada resolusi 2 kali, melainkan hasil lingkaran yang sudah terkuantisasi disampling kembali
  • Implementasi contoh menggunakan texture resolusi 2x dan interpolasi linear, sehingga dalam praktiknya memakai VRAM 5 kali lebih besar
  • SSAA yang benar melakukan sampling scene beberapa kali tanpa buffer perantara lalu menggabungkan hasilnya, sehingga membutuhkan integrasi mendalam dengan pipeline rendering

MSAA: kelebihan dan kekurangan sampling berbasis hardware

  • MSAA adalah salah satu bentuk supersampling, tetapi terutama diterapkan pada siluet model, geometry yang saling tumpang tindih, dan tepi texture saat Alpha to Coverage aktif
  • Implementasinya bergantung pada hardware GPU dan vendor grafis, dan tingkat dukungannya berbeda-beda menurut hardware dan driver
  • WebGL 1 tidak mendukung MSAA, sehingga contoh menggunakan context WebGL 2
  • UI contoh membandingkan No MSAA, 2x, 4x, 8x, 16x, 32x, 64x serta resolusi render Native, 1/2, 1/4, dan 1/8
  • Jumlah sample maksimum yang didukung dibaca lewat gl.MAX_SAMPLES, lalu hanya opsi yang dapat dipilih yang diaktifkan
  • Pada GPU mobile, pemanggilan renderbufferStorageMultisample() dalam praktiknya bisa dipaksa menjadi 4x MSAA
    • Android mengizinkan pilihan 2x, tetapi driver memaksanya menjadi 4x
    • iPhone dan iPad menjadi 4x saat 2x dipilih, dan transparansi dibulatkan mendekati kelipatan 50%, sehingga pada contoh muncul tepi ganda
  • Karena MSAA menyerahkan pekerjaan pada hardware, perangkat pengguna bisa saja tidak mendukung fitur yang dibutuhkan
  • Pola sampling dapat menghasilkan hasil yang berbeda dari perkiraan, dan bergantung pada hardware, tingkat transparansi tepi lingkaran bisa terlihat dalam “urutan yang salah”
  • Dalam kondisi tertentu MSAA tetap kuat
    • forward rendering
    • geometry yang tidak terlalu padat
    • GPU dengan tile-based rendering architecture
  • Rahul Prasad menjelaskan bahwa di mobile, MSAA tidak semahal di desktop, dan pada beberapa GPU mobile, 4x MSAA bisa saja gratis
  • Sebagai materi tambahan, disebutkan MSAA color resolve deep-dive dari KhronosGroup Vulkan-Samples

Alur post-processing menuju MLAA, SMAA, dan FXAA

  • Makalah Alexander Reshetov pada 2009 mengusulkan pendekatan yang menemukan tepi pada gambar dengan aliasing blocky, lalu mengurangi tepi berbentuk blok menggunakan aturan filtering berdasarkan bentuk piksel
  • Pendekatan berbasis morphology ini berkembang menjadi MLAA, lalu kemudian disempurnakan menjadi SMAA yang lebih berfokus pada penghilangan sub-pixel artifact
  • Sebagian pengguna menilai keluarga MLAA/SMAA terlalu buram, sehingga muncul ungkapan “vaseline on the screen”
  • Anti-aliasing post-processing menunjukkan pergeseran AA dari dukungan hardware yang tidak stabil menuju pendekatan berbasis shader

FXAA 3.11: struktur dan batasan AA post-processing cepat

  • FXAA adalah algoritme Fast approximate anti-aliasing dari Timothy Lottes, dan merupakan pendekatan yang terinspirasi dari MLAA
  • Versi final yang dipublikasikan adalah FXAA 3.11, dan demo didasarkan pada versi yang dirilis pada 12 Agustus 2011
  • Demo membandingkan adegan lingkaran pada resolusi Native, 1/2, 1/4, dan 1/8
  • Pengaturan default menggunakan FXAA_PC 1, FXAA_QUALITY_PRESET 12, fxaaQualitySubpix 0.75, fxaaQualityEdgeThreshold 0.166, dan fxaaQualityEdgeThresholdMin 0.0833
  • FXAA pertama-tama mengambil sampel luminance piksel tengah serta atas, bawah, kiri, dan kanan; jika local contrast lebih rendah dari ambang, FXAA mengembalikan piksel asli
  • Jika bukan early exit, FXAA mengambil sampel luminance diagonal, menghitung arah edge horizontal dan vertikal, lalu mencari kedua arah untuk menemukan ujung edge
  • Pada akhirnya, FXAA menggeser koordinat piksel untuk melakukan sampling texture2D, dan menurut whitepaper resminya, ini bukan sekadar metode yang mem-blur edge
  • Pada demo lingkaran, tepi dalam keadaan diam terlihat halus, tetapi saat lingkaran bergerak bentuknya terdistorsi
    • Tonjolan kecil muncul dan menghilang pada bagian atas dan bawah yang sejajar sumbu
    • Pada resolusi rendah, lingkaran kehilangan bentuk bulatnya dan bergoyang seperti grafis PlayStation 1
  • Karena setiap piksel hanya mempertimbangkan area sekitar 3x3, FXAA tidak dapat mengetahui bahwa area tersebut adalah bagian dari lingkaran besar
  • FXAA dibuat untuk melakukan anti-aliasing pada scene yang lebih kompleks dan menyediakan banyak pengaturan serta preset
  • Full demo yang menggunakan scene NeoTokyo° menghitung luminance channel dari aliased output lalu menerapkan FXAA, serta memungkinkan semua preset dan setting dimanipulasi

Input dan kondisi parameter FXAA

  • Jika FXAA_GREEN_AS_LUMA disetel ke 1, kanal hijau digunakan alih-alih luma, dan pada saat itu input RGB harus berada dalam ruang warna non-linear
  • RGB input FXAA harus berupa LDR; secara spesifik, FXAA harus diterapkan setelah tonemapping
  • Jika tidak menggunakan FXAA_GREEN_AS_LUMA, luma dalam perceptual space harus disimpan di kanal alpha sebelum FXAA dijalankan
  • FXAA hanya bekerja dengan benar jika luma dihitung dengan tepat
  • FXAA_QUALITY_PRESET adalah pengaturan yang menukar performa dengan kualitas
    • 12 adalah default
    • 15 dan 29 adalah highest quality
    • 39 adalah EXTREME QUALITY
  • fxaaQualitySubpix mengatur seberapa banyak sub-pixel aliasing dihilangkan
    • Nilai default adalah 0.75
    • 1.00 lebih halus, sedangkan 0.50 lebih tajam tetapi menghilangkan sub-pixel aliasing lebih sedikit
    • 0.00 berarti mati
  • fxaaQualityEdgeThreshold menentukan local contrast minimum yang diperlukan untuk menerapkan algoritme
  • fxaaQualityEdgeThresholdMin mengecualikan area gelap dari target pemrosesan
  • FXAA bisa memiliki biaya performa yang rendah jika sudah ada pipeline post-processing atau jika menggunakan deferred shading
  • Pada grafis mobile, akses memori mahal, sehingga jika harus membuat konfigurasi render-to-texture baru untuk FXAA, keunggulan biayanya menjadi lebih lemah

Inti dari Analytical Anti-Aliasing

  • Analytical Anti-Aliasing adalah cara menggambar piksel dalam bentuk yang sudah di-anti-aliasing ketika bentuk yang dibutuhkan sudah diketahui
  • Saat menggambar bentuk 2D atau 3D, batas bentuk di-fade secara tepat sebesar 1 piksel
  • Contoh membandingkan lingkaran pada resolusi Native, 1/2, 1/4, dan 1/8, serta menunjukkan edge smoothing dan pelestarian shape bahkan pada resolusi rendah
  • circle-analytical.fs menghitung signed distance field lingkaran dengan dist = length(uv)
  • Untuk memudarkan piksel di dekat batas lingkaran dengan lebar 1 piksel, digunakan alpha = (1.0 - dist) / pixelSizeAdjusted
  • Metode ini halus tanpa artifact, memungkinkan jumlah filtering diatur, dan tidak memerlukan buffer tambahan atau kebutuhan hardware tambahan
  • Berjalan juga di WebGL 1.0 atau OpenGLES 2.0 dasar tanpa extension
  • Smoothing 1 piksel terlihat tajam, tetapi bergantung pada kombinasi resolusi layar, ukuran, dan posisi lingkaran, sisi 90 derajat yang sejajar sumbu masih dapat terasa flat
  • Jika filtering dilakukan berdasarkan ukuran piksel diagonal, yaitu √2 px = 1.4142..., kesan flat dapat dikurangi, tetapi bentuk menjadi sedikit lebih blur

Makna “Analytical” dan implementasi berbasis SDF

  • Dalam pemrograman grafis, “Analytical” berarti efek yang dibuat dengan mengetahui terlebih dahulu komposisi shape yang diinginkan dan menghitungnya berdasarkan definisi matematisnya
  • Istilah ini digunakan secara longgar dalam computer graphics, dan dapat memiliki berbagai makna tergantung konteks
  • Implementasinya berbasis signed distance field, dengan asumsi bahwa pada setiap point yang disampling, jarak ke shape yang diinginkan diketahui
  • Informasi ini bisa di-bake ke texture seperti pada SDF text rendering, atau pada shape sederhana bisa diturunkan per-pixel dengan rumus matematika
  • Dengan mem-fade out shape border berdasarkan signed distance dan menetapkan jarak fade sebesar ukuran 1 piksel, smooth edge dapat diperoleh
  • Pertanyaan implementasi utamanya adalah bagaimana shader mengetahui ukuran piksel, dan bagaimana melakukan blend berdasarkan distance
  • Pendekatan ini memberikan motion-stable pixel-perfection, tetapi tidak cocok dengan traditional rasterization dan memerlukan signed distance field untuk keseluruhan shape

Perhitungan ukuran piksel: pra-hitung, dFdx/dFdy, fwidth

  • Jika lebar fade batas ditetapkan sebagai nilai tetap seperti 95% dari jari-jari lingkaran, hasilnya mungkin terlihat bagus pada ukuran dan resolusi tertentu, tetapi ketika ukurannya berubah bisa menjadi terlalu halus atau menimbulkan aliasing
  • Ukuran piksel adalah salah satu masalah yang diselesaikan oleh Screen Space derivatives
  • dFdx, dFdy, dan fwidth memungkinkan kita mengetahui seberapa besar nilai tertentu berubah dalam satuan piksel layar
  • Pada contoh, jumlah perubahan distance diperoleh dengan pixelSize = fwidth(dist) atau pixelSize = length(vec2(dFdx(dist), dFdy(dist)))
  • Screen Space derivatives mencerminkan transformasi termasuk perspektif 3D dengan benar, tetapi tidak termasuk dalam standar WebGL 1, sehingga memerlukan extension GL_OES_standard_derivatives atau WebGL 2
  • Metode length() menghitung panjang vektor yang dibentuk oleh dFdx dan dFdy, sedangkan fwidth() menggunakan pendekatan abs(dFdx()) + abs(dFdy())
  • Aproksimasi fwidth() diskalakan terlalu besar pada arah diagonal, sehingga fade dapat diterapkan lebih banyak pada diagonal
  • Extension Unity Shapes menyebut AAA berbasis fwidth() sebagai “Fast Local Anti-Aliasing”, dan metode berbasis length() sebagai “Corrected Local Anti-Aliasing”
  • Dalam 2D, karena ukuran rendering context dan ukuran quad diketahui, ukuran piksel dapat dihitung langsung untuk tiap objek
  • Contoh mengirim ukuran piksel berbasis tinggi seperti gl.uniform1f(pixelSizeCircle, (2.0 / (canvas.height / resDiv))), dan metode ini bekerja juga pada hardware lama tanpa WebGL 2 atau extension

Alpha blending dan pemilihan fungsi step

  • Setelah lebar fade diperoleh, opacity harus disesuaikan
  • Dalam 2D, Alpha blending adalah pilihan yang sederhana
  • Pilihan lain adalah menggunakan MSAA bersama Alpha to Coverage, yang dapat dipakai saat depth-buffer write diperlukan untuk blending yang benar dalam scene 3D
  • Alpha harus di-fade berdasarkan distance, dan umumnya digunakan fungsi step yang menginterpolasi antara start dan end
  • Dalam implementasi anti-aliasing GLSL, smoothstep() sering digunakan, tetapi dalam konteks ini fungsinya berada di dalam 1–2 piksel, sehingga hampir tidak ada kurva yang dapat diamati
  • Jika Hermite interpolation dihapus dari smoothstep(), hasilnya menjadi linearstep(), yaitu interpolasi linear yang di-clamp
  • Jika dalam satu quad hanya ada satu bentuk, clamp juga dapat dihilangkan
  • Alpha akhir dapat dihitung dengan pembagian sederhana seperti float alpha = (1.0 - dist) / (pixelSize * smoothingAmount);
  • Bagian yang tetap mahal dari sisi performa adalah pembagian yang dilakukan per piksel, sedangkan GPU modern dapat mengoptimalkan perkalian dan penjumlahan pada Hermite interpolation menjadi Fused Multiply-Add

Batas quad, MSAA, dan koreksi 0,5 piksel

  • Ada interaksi antara MSAA + Alpha to Coverage dan rasterizer yang hanya muncul pada sebagian hardware
  • Saat menggunakan MSAA + Alpha to Coverage, satu sisi quad dapat hilang tepat 0,5 piksel terlepas dari jumlah sampel
  • Untuk menanganinya, contoh menambahkan margin 0,5 piksel ke SDF dalam bentuk dist += pixelSizeAdjusted * 0.5
  • Dalam 2D, pemrosesan yang mirip dengan NV_conservative_raster_dilate dapat diimplementasikan langsung
    • Memperbesar quad sebesar 0,5 piksel di vertex shader
    • Mengurangi signed distance field sebesar 0,5 piksel di fragment shader
  • Demo 2D pada halaman bekerja dengan metode ini, dan vertex *= size + pixelSize menjalankan peran tersebut
  • Masalah gamma dan premultiplied alpha juga penting dalam semua bentuk AA, tetapi tidak dibahas agar fokus pada AAA

Berbagai bentuk dan ekstensi 3D

  • Beberapa bentuk dapat digambar di dalam satu quad, dan masing-masing dapat diberi anti-aliasing
  • Jika ada beberapa bentuk, kedua bentuk harus dievaluasi untuk setiap piksel, lalu hasilnya di-clamp, diberi bobot, dan dijumlahkan agar anti-aliasing tetap terjaga di titik perpotongan
  • Biaya mewarnai langsung pada output bentuk yang diperlukan lebih rendah dibanding menggambar overlay warna sebagai pass terpisah
  • Contoh 3D menggunakan kamera bergerak dan 2D rounded square yang ditempatkan dalam perspektif
  • Fragment shader 3D menghitung SDF rounded box dengan roundedBoxSDF, lalu mendapatkan ukuran piksel dengan length(vec2(dFdx(dist), dFdy(dist)))
  • Jika ada perkalian matriks kamera dan perspektif, menggunakan Screen Space derivatives untuk memperoleh ukuran piksel dapat diandalkan
  • Secara teori, tanpa derivatives, matriks inverse perspective bisa dikalikan ke fragment coordinates untuk setiap piksel, tetapi biaya performanya besar
  • Menempatkan fade di pusat batas dapat mengurangi deformasi bentuk pada ukuran kecil atau perspektif kuat, tetapi tepi bisa keluar dari quad sehingga menyebabkan hard edge atau clipping
  • NVIDIA memperkenalkan ekstensi NV_conservative_raster_dilate yang menyediakan piksel tambahan di batas, tetapi tidak tersedia di WebGL dan terbatas pada hardware NVIDIA

Contoh implementasi nyata

  • Ekstensi Unity karya Freya Holmér, Shapes, dinilai sebagai implementasi paling lengkap secara fungsional dari pendekatan ini
    • Meng-anti-alias SDF dengan MSAA atau melakukan blending dengan metode AAA
    • Mencakup motion blur, shape-respecting color gradients, serta fitur opacity fade untuk garis di bawah 1 piksel
    • Teknik untuk garis di bawah 1 piksel disebut Line Thinness Fading
  • Valve Software secara luas memperkenalkan signed distance field rendering ke Source engine selama pengembangan Orange Box
    • Sangat menonjol digunakan untuk membuat elemen UI yang halus tetapi tajam pada HUD Team Fortress 2
    • Mengembangkan line art shader system yang menghasilkan siluet halus bahkan ketika gambar beresolusi tetap diperbesar ke resolusi tinggi
    • Juga menangani outline dan drop-shadow, serta dapat diterapkan pada world element seperti papan penunjuk di ruang 3D
  • Valve memublikasikan implementasinya dalam makalah SIGGRAPH 2007, dan makalah tersebut juga mencakup contoh dunia game 3D
  • “Shape Decomposition for Multi-channel Distance Fields” karya Viktor Chlumský adalah contoh yang mengembangkan teknik dalam catatan kaki makalah Valve
    • Pekerjaan terkait mencakup msdfgen dan msdf-atlas-gen
  • Metode multi-channel distance field menggunakan RGB dan median term untuk membuat teks yang tajam, serta memasukkan SDF klasik ke alpha channel untuk menangani efek seperti glow dan drop shadow
  • Karakter CJK membutuhkan texture yang lebih besar karena detailnya halus, dan mengecilkan texture besar dapat menimbulkan artifact tersendiri
  • Pengguna Hacker News aappleby menyebutkan bahwa Google Maps menggunakan AAA berbasis capsule shape untuk segment jalan
    • aappleby mengatakan ia menulisnya sekitar 10 tahun lalu
    • Ia menjelaskan bahwa saat diperiksa dengan debugger WebGL Spector.js, shader code pada streets draw call tampak menunjukkan blended alpha yang bergantung pada bentuk

Keterbatasan metode SDF dan diskusi TAA

  • Yakov Galka menunjukkan bahwa karena pendekatan SDF mengambil sampel SDF pada titik tertentu, aliasing dapat terjadi jika SDF memiliki komponen berfrekuensi tinggi
  • Saat merasterisasi lingkaran yang lebih kecil dari 1 piksel, pendekatan dalam tulisan ini saja mungkin tidak dapat menghilangkan aliasing sepenuhnya
  • Yakov Galka menyebut Wavelet Rasterization oleh J. Manson dan S. Schaefer sebagai metode analitis sejati untuk merasterisasi polygonal dan bezier shape dengan anti-aliasing
  • Setelah tulisan dipublikasikan, ada masukan di komentar bahwa kritik terhadap TAA terlalu keras, dan diakui bahwa tulisan tersebut belum cukup membahas masalah yang ingin diselesaikan TAA serta masalah yang sulit diselesaikan dengan teknik lain
  • Timothy Lottes memandang TAA sebagai evolusi teknis yang jelas, tetapi mengatakan bahwa motion clarity tetap memiliki keterbatasan
  • FXAA 4 adalah 2-frame blender dan secara mendasar berbeda dari TXAA; TXAA tidak memiliki MLAA dan berbasis MSAA
  • Sebagai materi untuk memahami TAA dengan lebih tepat, direkomendasikan presentasi GDC dari developer Inside, Lasse Jon Fuglsang Pedersen, Temporal Reprojection Anti-Aliasing in INSIDE
  • AAA dinilai sebagai teknik yang dapat menggambar bentuk dengan berbagai ukuran secara halus, tajam, dan motion-stable pada resolusi native

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-21
Pendapat Hacker News

  • Saya penulisnya; kalau ada pertanyaan, akan saya jawab

    • Google Maps menggunakan AAA berbentuk kapsul untuk semua segmen jalan. Saya yang menulisnya sekitar 10 tahun lalu :D
    • Tulisan yang bagus. Saat mencoba memahami anti-aliasing pada font MSDF, saya menemukan beberapa klaim
      Ada klaim bahwa anti-aliasing harus dilakukan di ruang RGB linear, bukan ruang sRGB [1] [2], tetapi karena selama puluhan tahun hal itu tidak dilakukan, font sudah dikoreksi, sehingga kadang sRGB lebih baik [3] [4]. Saya penasaran apakah ada saran tentang anti-aliasing di ruang linear vs sRGB
      [1] https://www.puredevsoftware.com/blog/2019/01/22/sub-pixel-ga...
      [2] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing...
      [3] https://news.ycombinator.com/item?id=12023985
      [4] http://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing...
    • Koreksi kecil: WebGL mendukung MSAA sejak WebGL1. Hanya saja di WebGL1 itu hanya bisa pada canvas, jumlah sampel tidak bisa dikontrol, dan yang bisa dilakukan hanya sebatas mengaktifkan atau menonaktifkan anti-aliasing
      Di WebGL2 pun belum ada objek tekstur MSAA, hanya mendukung render buffer MSAA, jadi sampel individual tidak bisa dibaca langsung dari shader. Itu fitur yang berguna untuk render pass resolve kustom, tetapi hanya bisa dilakukan di WebGPU
    • Saya setuju bahwa tren terbaru yang terlalu bergantung pada upscaler sudah berlebihan, sehingga banyak game AAA menghasilkan tampilan yang buram dan penuh artefak. Namun setelah melihat analisis mendalam dari Digital Foundry ini [1], argumen bahwa hanya teknologi seperti DLSS yang bisa menghasilkan stabilitas gerak dan ketajaman tertentu, bahkan bisa lebih baik daripada SSAA, terasa cukup meyakinkan
      Jadi sekarang pandangan saya bergeser dari “TAA == buram” menjadi “TAA + machine learning yang diterapkan dengan benar adalah anti-aliasing terbaik yang saat ini mungkin untuk game 3D”; saya penasaran bagaimana Anda melihatnya
      [1] https://youtu.be/WG8w9Yg5B3g
    • Saya penasaran berapa lama waktu yang dibutuhkan untuk menulis artikel ini
      Saya juga pernah beberapa kali menulis artikel blog berbasis visualisasi real-time, dan itu memakan waktu sangat lama. Meski begitu, rasanya itu arah yang tepat. Di era ketika konten melimpah, menurut saya lebih bermanfaat bagi semua orang untuk membuat lebih sedikit konten berkualitas tinggi, meskipun membutuhkan waktu lebih lama

  • Masalah di sekitar anti-aliasing lebih besar daripada anti-aliasing itu sendiri. Berbagai singkatan yang bisa dipilih di pengaturan game hampir tidak dijelaskan perbedaannya, dan separuhnya adalah hal-hal yang sama sekali tidak saya ketahui
    Tentu saja bisa dicari, tetapi akan bagus jika sedikit lebih memperhatikan keramahan pengguna. Tulisan ini sepertinya akan membantu sebagai referensi ke depan

    • Game/grafis memang bidang yang penuh istilah teknis. Kalau tidak ingin menjadi penyihir, cukup coba ubah-ubah dan lihat hasilnya. Saya suka pendekatan seperti Dolphin yang memberi tooltip terperinci pada pengaturan, tetapi akan selalu ada sebagian pengetahuan implisit yang tersisa
      Secara meta, akhir-akhir ini saya sering melihat sentimen anti-singkatan. Menurut saya belum pernah ada masa ketika mencari informasi semudah sekarang. Memang ada tingkat penggunaan singkatan yang menghambat pembelajaran atau berperan sebagai semacam penjaga gerbang, tetapi pekerjaan baru bisa dilakukan jika konsep diberi nama pada tingkat yang berguna, jadi menurut saya singkatan pengaturan grafis dalam game cukup masuk akal

  • Cara menganalisis pemrograman grafis dengan contoh WebGL ini jenius. Ini hypertext yang benar-benar memanfaatkan keunggulan mediumnya. Mengingatkan saya pada tulisan yang mungkin terlihat di https://pudding.cool/, tetapi masuk jauh lebih dalam
    Selama beberapa waktu saya menggunakan MSAAx4 di rendering engine, dan belakangan mempertimbangkan untuk beralih ke implementasi FXAA/TAA, tetapi sekarang saya tidak yakin apakah benar-benar akan menggantinya. Saya banyak belajar dari sini, dan sepertinya akan mencoba pendekatan analitik untuk elemen UI. Tulisan pemrograman grafis tidak sering muncul di HN, jadi untuk yang lebih berminat saya merekomendasikan sumber daya berisi kumpulan tulisan analisis frame ini:
    https://www.adriancourreges.com/blog/

    • Steve Wittens juga banyak menulis artikel semacam ini dengan ilustrasi matematika yang dicampur WebGL di https://acko.net/
      Artikel yang sangat saya sukai adalah https://acko.net/blog/how-to-fold-a-julia-fractal/. Saya belum pernah melihat materi yang membantu memahami hubungan antara fungsi trigonometri dan bilangan kompleks sebaik ini
    • Saya benar-benar tidak suka TAA. Terutama pada frame rate rendah, ghosting-nya terlalu parah. Saya sering sengaja beralih ke algoritma yang lebih lambat untuk menghindari ghosting

  • Frame-frame dengan lingkaran dan bagian yang diperbesar menyampaikan pesannya dengan sangat baik. Seluruh tulisannya sangat enak dibaca

  • SDF atau mSDF bukan masa depan, melainkan klasik yang sudah cukup baik
    Bagian yang mengatakan “karena setiap segmen kurva Bezier harus diselesaikan untuk tiap piksel, performanya turun drastis” justru menurut saya lebih terasa sebagai masa depan, atau bahkan kondisi saat ini. Slug dan DirectWrite sudah digunakan dengan performa yang baik
    https://sluglibrary.com/
    https://learn.microsoft.com/en-us/windows/win32/directwrite/...

    • Rendering kurva implisit juga tidak boleh dilupakan [0]. Patennya akan segera kedaluwarsa [1]
      [0]: https://www.microsoft.com/en-us/research/wp-content/uploads/...
      [1]: https://patents.google.com/patent/US20070097123A1/en
    • Sekitar 20 tahun lalu saya menulis implementasi makalah Loop/Blinn untuk Microsoft Game Studios, dan saya penasaran apakah masih dipakai
      Butuh sangat banyak pekerjaan untuk membuatnya siap produksi. Tesselation berbasis Voronoi dalam makalah itu menjadi sangat buruk secara patologis pada banyak karakter Asia
    • Ingatan saya bisa saja sepenuhnya salah, tetapi bukankah algoritma yang dipakai Slug terkena paten?

  • Saat menggulir tulisan itu, screenshot NeoTokyo langsung menarik perhatian saya. Saya sudah berlari melewati koridor itu ribuan kali. Selama beberapa tahun saya mengoperasikan server mod tersebut, dan benar-benar menikmati komunitasnya yang kecil tetapi mahir dan menyenangkan

    • Yang lebih mengejutkan adalah game itu masih aktif dimainkan. Setiap Jumat malam satu server penuh, dan kadang juga pada Sabtu/Minggu. Ada basis penggemar yang cukup berdedikasi, dan saya belum pernah melihat dedikasi seperti itu pada game multipemain setua ini

  • Sebagai seseorang yang pernah menulis mesin rendering 2D dan 3D, saya ingin memberi sedikit konteks: keduanya benar-benar berbeda. Bukan sekadar bertambah satu dimensi, tetapi tujuan, kasus penggunaan, dan ekspektasinya sepenuhnya berbeda
    Jadi, alih-alih mengatakan “semua yang dibahas di sini juga dapat diperluas ke 3D”, saya cenderung mengatakan bahwa seluruh tulisan ini sebagian besar membahas rendering 3D, bukan rendering 2D. Artikel yang bagus tentang topik ini dari sudut pandang rendering 2D adalah https://ciechanow.ski/alpha-compositing/
    Kriteria antialiasing yang tidak dipedulikan siapa pun di 3D tetapi sangat penting di 2D adalah akurasi dan bias. Misalnya, AAA sangat bias sehingga tidak akurat. Jika bentuk yang sama digambar beberapa kali di posisi yang sama, hasilnya menjadi lebih opak atau lebih gelap. Hal yang sama tidak terjadi pada MSAA; galatnya terbatas dan tidak memiliki bias

    • Saya sedang membayangkan renderer vektor 3D berbasis WebGPU dalam JS/TS, lalu kemarin melihat proyek Anda [0]
      Menggambar garis tebal sangat menarik karena memang sulit [1]. Baru-baru ini saya juga melihat ini [2], dan jadi bertanya-tanya apakah semua bentuk bisa diubah menjadi segmen kurva Bezier kuadratik lalu memakai teknik tersebut. Saya penasaran apakah Anda melihatnya sebagai jalur yang layak diikuti
      [0] https://github.com/Lichtso/contrast_renderer
      [1] https://mattdesl.svbtle.com/drawing-lines-is-hard
      [2] https://scribe.rip/@evanwallace/easy-scalable-text-rendering...
    • Sulit mengatakan bahwa tulisan ini dapat digeneralisasi begitu saja ke 3D
      Solusi yang diajukan bergantung pada signed distance field, tetapi melewati begitu saja bagian pentingnya: “jarak ke apa?” Di 2D, ini jelas karena kita cukup mengukur jarak ke batas antara objek dan latar, yaitu siluet
      Di 3D, ini menjadi rumit karena objek dapat berotasi dan mengalami self-occlusion. Terhadap apa SDF harus diukur? Siluet proyeksi 2D dari objek 3D terus berubah dan tidak bisa sekadar diprakomputasi

  • Senang melihat tautan Captain Disillusion. Saya sebelumnya tidak mengenalnya, tetapi karyanya luar biasa. Tautan langsung untuk orang yang tertarik pada efek video: https://www.youtube.com/@CaptainDisillusion

  • Tulisannya tersusun dengan baik, tetapi menurut saya bagian yang menyerang TAA bisa membingungkan. Antialiasing SDF sama sekali bukan alternatif untuk TAA
    TAA menangani segala jenis aliasing, sedangkan di sini yang dibahas hanya aliasing tepi. Banyak game modern memakai pendekatan berbasis Monte Carlo untuk pencahayaan tidak langsung dan efek lain, yang pada praktiknya membutuhkan TAA

  • Bagian yang mengatakan “chip mobile secara tepat mendukung MSAAx4 dan situasinya aneh. Di Android Anda bisa memilih 2x, tetapi driver tetap memaksanya menjadi 4x” terasa agak membingungkan
    Di ponsel Android saya, perbedaan antara 2x dan 4x jelas terlihat, tetapi tidak tampak “membulat” seperti di iPhone