Apa itu Playground Shader WebGL?

Tulis shader GLSL vertex dan fragment lalu lihat hasil render secara instan melalui WebGL. Tidak perlu pengaturan lokal. Gunakan untuk belajar pemrograman shader, membuat prototipe efek, atau mencoba grafis yang dipercepat GPU.

Uniform bawaan mencakup `u_time` untuk animasi, `u_resolution` untuk ukuran kanvas, `u_mouse` untuk posisi pointer, `u_frame` untuk jumlah bingkai yang dirender, dan tekstur noise siap pakai yang bisa diubin `sampler2D u_noise`. Unggah gambar apa pun untuk terikat sebagai `sampler2D u_texture` sehingga fragment shader bisa langsung menyamplingnya. Tersedia sepuluh preset (gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells), penggeser kecepatan animasi, penunjuk FPS langsung, sakelar autocompile, tombol jeda untuk membekukan lini masa, tautan berbagi yang membawa seluruh kode sumber, serta ekspor PNG dari bingkai aktif.

Cara menggunakan

1. Tulis atau tempel kode fragment shader GLSL Anda ke dalam editor. Shader default sudah dimuat.
2. Pratinjau langsung diperbarui saat Anda mengetik. Uniform bawaan meliputi waktu, resolusi, dan posisi mouse.
3. Ekspor shader Anda sebagai tangkapan layar PNG atau salin kode untuk digunakan dalam proyek WebGL Anda sendiri.

Kapan menggunakan

• Belajar sintaks GLSL tanpa repot menyiapkan proyek C++ atau Three.js lokal.
• Membuat purwarupa efek fragment shader sebelum dipindah ke mesin game atau situs web.
• Mengambil tangkapan layar latar animasi untuk portofolio, slide, atau unggahan media sosial.

Hasil

Seorang pengembang game yang membuat prototipe efek riak air menulis fragment shader dengan gelombang sinus dan uniform waktu. Panel pratinjau menampilkan hasil animasi yang diperbarui secara langsung.

FAQ

Apakah saya harus paham C atau pemrograman grafis untuk memakainya?

GLSL adalah bahasa kecil mirip C: ada perulangan, kondisi, dan operasi float. Yang sudah pernah menyentuh C, Java, atau JavaScript akan cepat akrab. Shader preset diberi komentar, jadi mengutak-atik nilainya biasanya sudah cukup untuk memulai tanpa pengalaman GPU.

Shader berhasil dikompilasi tapi pratinjau gelap. Apa penyebabnya?

Penyebab umum: menulis `gl_FragColor` di luar fungsi main, mengembalikan `vec3` alih-alih `vec4`, atau pembagian dengan nol di fungsi noise. Buka konsol peramban; WebGL mencetak peringatan berguna meski kompilasi terlihat berhasil.

Apakah saya bisa men-sample tekstur atau memuat gambar saya sendiri?

Bisa. Klik Unggah Gambar di bilah pratinjau untuk mengikat PNG atau JPG apa pun sebagai `sampler2D u_texture`. Float pendamping bernama `u_hasTexture` menjadi 1.0 saat gambar siap, sehingga shader bisa memutuskan apakah tekstur tersedia — pola yang sama dengan channel input di Shadertoy.

Versi WebGL apa yang dipakai?

WebGL 1 dengan GLSL ES 1.0. Artinya `varying` menggantikan `in/out`, `gl_FragColor` menggantikan output bernama, dan tidak ada tekstur integer. Shader untuk WebGL 2 atau OpenGL 3+ desktop perlu sedikit penyesuaian sintaks agar bisa jalan di sini.

Apakah ada data yang dikirim ke server?

Tidak. Kompilasi dan rendering berjalan di GPU lokal melalui peramban. Kode shader tidak meninggalkan halaman; menutup tab tanpa menyalin berarti kode hilang begitu saja.

Alat terkait