Fragmen: platform untuk mempelajari coding kreatif dengan shader – Beragampengetahuan

Catatan Editor: Hari ini kami ingin fokus pecahansebuah proyek oleh Ben McCormick yang dirancang untuk membantu materi iklan belajar dan bereksperimen dengan shader. Kami senang memamerkan karya komunitas, jadi jika Anda sedang membangun sesuatu yang ingin Anda bagikan, hubungi kami dan kami akan dengan senang hati memamerkannya!

Halo semuanya! Saya Ben, seorang insinyur desain, pembuat kode kreatif, dan seniman shader yang tinggal di Perth, Australia Barat. Tahun lalu saya menemukan sesuatu yang merevolusi cara saya mendekati coding kreatif, dan saya telah membuat cuplikan untuk membagikannya.

bagaimana semuanya dimulai

Di usia 20-an, dahulu kala, saya memiliki ide untuk membuat alat visualisasi audio. Pikirkan plugin MilkDrop untuk Winamp (mungkin menunjukkan usia saya di sana). Saya terpesona dengan ide tersebut, namun saya tidak tahu bagaimana menerapkannya.

Saat itulah saya pertama kali belajar tentang pemrograman grafis dan shader dan mengembangkan minat seumur hidup terhadapnya.

Saya menghabiskan waktu bertahun-tahun untuk mencoba memahami cara kerjanya, dengan berbagai tingkat keberhasilan – tetapi sebagian besar gagal. Itu bisa sangat sulit untuk ditulis, terutama jika Anda tidak tahu apa yang Anda lakukan. Saya bertahan dan akhirnya mulai menguasainya.

Saya bisa membuat banyak barang keren, dan saya tahu cara kerjanya, tapi kemudian saya menghadapi masalah lain: Saya kesulitan menemukan cara yang tepat untuk menerjemahkan komponen mekanis yang saya pelajari menjadi barang menakjubkan dan kreatif yang ingin saya lakukan bertahun-tahun yang lalu.

Ada bagian yang hilang, hambatan psikologis untuk keseluruhan proses. Saya perlu menemukan sesuatu untuk membantu saya memecahkan masalah pengkodean kreatif ini.

momen bola lampu

Merasa sedikit tersesat, saya memutuskan untuk mencoba sesuatu yang berbeda dan akhir tahun lalu saya mengikuti Genuary 2025 Challenge. Saya belum pernah melakukan hal seperti ini sebelumnya; Saya selalu berpikir itu keterlaluan, tapi sebenarnya saya hanya ingin melihat apakah saya bisa melakukannya. Awalnya agak sulit.

Upaya pertama saya adalah bencana. Saya mencoba membuat pola yang menarik dan menggabungkannya dengan gerakan yang mengalir, tetapi yang saya dapatkan hanyalah statis dan tidak bernyawa segi tiga. Itu tidak menginspirasi dan membosankan.

Sejujurnya, saya merasa gagal. Ini biasanya merupakan titik di mana sebuah proyek terhenti dan saya memutuskan untuk mengesampingkan hal-hal dan beralih ke hal lain, tapi kali ini, untuk alasan apa pun, saya terus melanjutkan – dan segalanya segera berubah.

Dengan setiap prompt yang saya coba, saya mulai bermain-main dengan kode: mengubah variabel, menggunakan nilai sebagai input ke variabel lain, dan mengulangi hal-hal yang berbeda dari sebelumnya. Segalanya baru saja dimulai.

Pada hari ke 11, saya mencoba visualisasi yang terinspirasi oleh karya Sunnk, sesuatu yang selalu ingin saya lakukan tetapi tidak pernah percaya diri untuk mencobanya.

Ini merupakan terobosan yang menyeluruh. Saya akhirnya menciptakan apa yang selalu saya inginkan dan benar-benar mulai menjelajahi ruang kemungkinan. Memiliki perintah baru setiap hari membuat saya tetap fokus, membuat saya konsisten, membuat saya tetap fokus, dan membantu saya mengetahui proses saya.

Ini telah menjadi sebuah perubahan besar bagi saya dan saya yakin juga bagi orang lain. Saya ingin mengambil inspirasi ini lebih jauh dan membagikannya, dan itulah bagaimana Fragments lahir.

Platform Pengkodean Kreatif

Setelah Genuary, saya menyadari bahwa saya menemukan sesuatu yang penting, sebuah cara untuk menjembatani kesenjangan antara mempelajari dasar-dasar shader dan benar-benar menciptakan karya orisinal. Saya mulai mendokumentasikan segalanya: teknik yang berhasil, alat praktis yang terus saya kejar, dan sketsa yang mengajari saya hal-hal baru.

Fragmen menjadi platform yang saya harap saya miliki saat memulai, bukan kursus lain melainkan kumpulan strategi kreatif dan landasan.

Ini adalah puncak dari semua yang telah saya pelajari, coba, dan teliti, dan merupakan cerminan dari perjalanan saya sendiri.

apa yang membuatnya berbeda

Daripada membuat kursus dasar lainnya, saya ingin membuat sesuatu yang berbeda: manual tentang teknik pengkodean kreatif dengan strategi eksperimental yang mendalam. Inilah yang akan Anda temukan:

10 Tip Pengkodean Kreatif

Seperti arsitektur bidang aliran Buat pola organik yang menakjubkan menggunakan jutaan partikel; ini perjalanan ringan Teknologi yang memungkinkan saya membuat bentuk 3D yang mustahil dalam ruang 2D; atau Penyortiran piksel Teknologi memungkinkan saya menciptakan pola indah dari dunia lain dari gambar statis.

15+ utilitas

Kumpulan utilitas untuk menyederhanakan alur kerja TSL Anda dengan implementasi salin dan tempel. Dari fungsi noise hingga SDF hingga palet prosedural – banyak sekali hal yang sangat berguna.

120+ sketsa

Dilengkapi dengan kode sumber beranotasi untuk setiap karya seni yang saya tulis, beserta uraian tentang apa yang menurut saya membuatnya menarik. Pelajari apa yang ada di balik karya seni tersebut, lalu remix kontennya untuk menjadikannya milik Anda!

export const dawn1 = Fn(() => {
  // Get aspect-corrected UVs for the screen
  const _uv = screenAspectUV(screenSize).toVar()
  const uv0 = screenAspectUV(screenSize).toVar()

  // Color accumulator
  const finalColor = vec3(0.0).toVar()

  // Palette setup
  const a = vec3(0.5, 0.5, 0.5)
  const b = vec3(0.5, 0.5, 0.5)
  const c = vec3(1.0, 1.0, 0.5)
  const d = vec3(0.8, 0.9, 0.3)

  // Animated vertical gradient using cosine palette
  const col = cosinePalette(uv0.y.add(0.5).add(time.mul(0.01)), a, b, c, d)

  // Repeated sawtooth pattern in Y, softened
  const repeatedPattern = fract(_uv.y.mul(24)).mul(0.3)

  // Add pattern to color, boost with pow for punch
  finalColor.assign(col.add(pow(repeatedPattern, 2.0)))

  // Add grain for texture
  const _grain = grainTextureEffect(_uv).mul(0.2)
  finalColor.addAssign(_grain)

  return finalColor
})

Contoh proyekS

Proyek startup yang sepenuhnya dapat dikloning dengan semua utilitas yang Anda perlukan untuk memulai. Anda dapat menemukannya di sini:

Dibangun pada Three.js Shading Language (TSL)

Saya memilih TSL karena merupakan pilihan terbaik – matang dan cukup andal, namun cukup modern untuk mengeksplorasi fitur-fitur mutakhir seperti WebGPU. Selain itu, komunitas Three.js juga luar biasa.

mengharapkan

Apa yang awalnya merupakan eksperimen pribadi kini menjadi sesuatu yang sangat ingin saya bagikan. Setiap teknologi baru yang saya temukan membuka banyak kemungkinan baru, dan saya senang melihat apa yang diciptakan orang lain ketika mereka memanfaatkan elemen-elemen ini dan menjadikannya milik mereka.

Jika Anda pernah bingung antara mempelajari dasar-dasarnya dan membuat konten orisinal, mungkin Fragmen juga dapat membantu Anda menjembatani kesenjangan tersebut.