Cache Kompilasi Shader WebGL: Strategi Optimisasi Performa yang Kuat

Dalam dunia pengembangan web yang dinamis, khususnya untuk aplikasi yang kaya visual dan interaktif yang didukung oleh WebGL, performa adalah yang terpenting. Mencapai frame rate yang mulus, waktu muat yang cepat, dan pengalaman pengguna yang responsif seringkali bergantung pada teknik optimisasi yang teliti. Salah satu strategi yang paling berdampak, namun terkadang terabaikan, adalah memanfaatkan Cache Kompilasi Shader WebGL secara efektif. Panduan ini akan mendalami apa itu kompilasi shader, mengapa caching sangat penting, dan bagaimana mengimplementasikan optimisasi yang kuat ini untuk proyek WebGL Anda, yang ditujukan untuk audiens pengembang global.

Memahami Kompilasi Shader WebGL

Sebelum kita dapat mengoptimalkannya, penting untuk memahami proses kompilasi shader di WebGL. WebGL, API JavaScript untuk merender grafis 2D dan 3D interaktif di dalam browser web yang kompatibel tanpa plug-in, sangat bergantung pada shader. Shader adalah program kecil yang berjalan di Unit Pemrosesan Grafis (GPU) dan bertanggung jawab untuk menentukan warna akhir setiap piksel yang dirender di layar. Mereka biasanya ditulis dalam GLSL (OpenGL Shading Language) dan kemudian dikompilasi oleh implementasi WebGL browser sebelum dapat dieksekusi oleh GPU.

Apa itu Shader?

Ada dua jenis shader utama di WebGL:

• Vertex Shader: Shader ini memproses setiap vertex (titik sudut) dari model 3D. Tugas utamanya termasuk mentransformasikan koordinat vertex dari ruang model ke ruang klip, yang pada akhirnya menentukan posisi geometri di layar.
• Fragment Shader (atau Pixel Shader): Shader ini memproses setiap piksel (atau fragmen) yang membentuk geometri yang dirender. Mereka menghitung warna akhir setiap piksel, dengan mempertimbangkan faktor-faktor seperti pencahayaan, tekstur, dan properti material.

Proses Kompilasi

Ketika Anda memuat shader di WebGL, Anda menyediakan kode sumber (sebagai string). Browser kemudian mengambil kode sumber ini dan mengirimkannya ke driver grafis yang mendasarinya untuk kompilasi. Proses kompilasi ini melibatkan beberapa tahap:

1. Analisis Leksikal (Lexing): Kode sumber dipecah menjadi token (kata kunci, pengidentifikasi, operator, dll.).
2. Analisis Sintaksis (Parsing): Token diperiksa terhadap tata bahasa GLSL untuk memastikan mereka membentuk pernyataan dan ekspresi yang valid.
3. Analisis Semantik: Kompiler memeriksa kesalahan tipe, variabel yang tidak dideklarasikan, dan inkonsistensi logis lainnya.
4. Generasi Representasi Menengah (IR): Kode diterjemahkan ke dalam bentuk menengah yang dapat dipahami oleh GPU.
5. Optimisasi: Kompiler menerapkan berbagai optimisasi pada IR untuk membuat shader berjalan seefisien mungkin pada arsitektur GPU target.
6. Generasi Kode: IR yang dioptimalkan diterjemahkan menjadi kode mesin khusus untuk GPU tersebut.

Seluruh proses ini, terutama tahap optimisasi dan generasi kode, bisa sangat intensif secara komputasi. Pada GPU modern dan dengan shader yang kompleks, kompilasi dapat memakan waktu yang cukup lama, terkadang diukur dalam milidetik per shader. Meskipun beberapa milidetik mungkin tampak tidak signifikan secara terpisah, ini dapat bertambah secara signifikan dalam aplikasi yang sering membuat atau mengkompilasi ulang shader, yang menyebabkan stuttering atau penundaan yang nyata selama inisialisasi atau perubahan adegan dinamis.

Kebutuhan Caching Kompilasi Shader

Alasan utama untuk mengimplementasikan cache kompilasi shader adalah untuk mengurangi dampak performa dari kompilasi shader yang sama berulang kali. Di banyak aplikasi WebGL, shader yang sama digunakan di berbagai objek atau sepanjang siklus hidup aplikasi. Tanpa caching, browser akan mengkompilasi ulang shader ini setiap kali dibutuhkan, membuang sumber daya CPU dan GPU yang berharga.

Bottleneck Performa yang Disebabkan oleh Kompilasi yang Sering

Pertimbangkan skenario ini di mana kompilasi shader bisa menjadi bottleneck:

• Inisialisasi Aplikasi: Ketika aplikasi WebGL pertama kali dimulai, seringkali ia memuat dan mengkompilasi semua shader yang diperlukan. Jika proses ini tidak dioptimalkan, pengguna mungkin mengalami layar pemuatan awal yang lama atau startup yang lambat.
• Pembuatan Objek Dinamis: Dalam game atau simulasi di mana objek sering dibuat dan dihancurkan, shader terkait akan dikompilasi berulang kali jika tidak di-cache.
• Pergantian Material: Jika aplikasi Anda memungkinkan pengguna untuk mengubah material pada objek, ini mungkin melibatkan kompilasi ulang shader, terutama jika material memiliki properti unik yang memerlukan logika shader yang berbeda.
• Varian Shader: Seringkali, satu shader konseptual dapat memiliki beberapa varian berdasarkan fitur atau jalur rendering yang berbeda (misalnya, dengan atau tanpa normal mapping, model pencahayaan yang berbeda). Jika tidak dikelola dengan hati-hati, ini dapat menyebabkan banyak shader unik dikompilasi.

Manfaat Caching Kompilasi Shader

Mengimplementasikan cache kompilasi shader menawarkan beberapa manfaat signifikan:

• Mengurangi Waktu Inisialisasi: Shader yang dikompilasi sekali dapat digunakan kembali, secara dramatis mempercepat startup aplikasi.
• Rendering yang Lebih Mulus: Dengan menghindari kompilasi ulang selama runtime, GPU dapat fokus pada rendering frame, yang mengarah ke frame rate yang lebih konsisten dan lebih tinggi.
• Responsivitas yang Ditingkatkan: Interaksi pengguna yang sebelumnya mungkin memicu kompilasi ulang shader akan terasa lebih cepat.
• Pemanfaatan Sumber Daya yang Efisien: Sumber daya CPU dan GPU dihemat, memungkinkan mereka digunakan untuk tugas-tugas yang lebih penting.

Mengimplementasikan Cache Kompilasi Shader di WebGL

Untungnya, WebGL menyediakan mekanisme untuk mengelola caching shader: OES_vertex_array_object. Meskipun bukan cache shader langsung, ini adalah elemen dasar untuk banyak strategi caching tingkat tinggi. Secara lebih langsung, browser itu sendiri sering mengimplementasikan bentuk cache shader. Namun, untuk performa yang dapat diprediksi dan optimal, pengembang dapat dan harus mengimplementasikan logika caching mereka sendiri.

Ide intinya adalah untuk memelihara registri program shader yang telah dikompilasi. Ketika sebuah shader dibutuhkan, Anda pertama-tama memeriksa apakah sudah dikompilasi dan tersedia di cache Anda. Jika ya, Anda mengambil dan menggunakannya. Jika tidak, Anda mengkompilasinya, menyimpannya di cache, dan kemudian menggunakannya.

Komponen Kunci dari Sistem Cache Shader

Sistem cache shader yang kuat biasanya melibatkan:

• Manajemen Kode Sumber Shader: Cara untuk menyimpan dan mengambil kode sumber shader GLSL Anda (vertex dan fragment shader). Ini mungkin melibatkan memuatnya dari file terpisah atau menyematkannya sebagai string.
• Pembuatan Program Shader: Panggilan API WebGL untuk membuat objek shader (`gl.createShader`), mengkompilasinya (`gl.compileShader`), membuat objek program (`gl.createProgram`), melampirkan shader ke program (`gl.attachShader`), menautkan program (`gl.linkProgram`), dan memvalidasinya (`gl.validateProgram`).
• Struktur Data Cache: Struktur data (seperti Map atau Object JavaScript) untuk menyimpan program shader yang telah dikompilasi, dengan kunci berupa pengidentifikasi unik untuk setiap shader atau kombinasi shader.
• Mekanisme Pencarian Cache: Sebuah fungsi yang mengambil kode sumber shader (atau representasi konfigurasinya) sebagai input, memeriksa cache, dan mengembalikan program yang di-cache atau memulai proses kompilasi.

Strategi Caching yang Praktis

Berikut adalah pendekatan langkah demi langkah untuk membangun sistem caching shader:

1. Definisi dan Identifikasi Shader

Setiap konfigurasi shader yang unik memerlukan pengidentifikasi yang unik. Pengidentifikasi ini harus mewakili kombinasi dari kode sumber vertex shader, kode sumber fragment shader, dan define atau uniform preprosesor yang relevan yang memengaruhi logika shader.

Contoh:

            const shaderConfig = {
  name: 'basicMaterial',
  vertexShaderSource: `
    attribute vec4 a_position;
    void main() {
      gl_Position = a_position;
    }
  `,
  fragmentShaderSource: `
    precision mediump float;
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Warna merah
    }
  `
};

// Cara sederhana untuk menghasilkan kunci bisa dengan melakukan hash pada kode sumber atau kombinasi pengidentifikasi.
// Untuk kesederhanaan di sini, kita akan menggunakan nama deskriptif.
const shaderKey = shaderConfig.name;

            

              
                Copy
              
            
          

2. Penyimpanan Cache

Gunakan Map JavaScript untuk menyimpan program shader yang telah dikompilasi. Kuncinya akan menjadi pengidentifikasi shader Anda, dan nilainya akan menjadi objek WebGLProgram yang telah dikompilasi.

            const shaderCache = new Map();

            

              
                Copy
              
            
          

3. Fungsi getOrCreateShaderProgram

Fungsi ini akan menjadi inti dari logika caching Anda. Ia mengambil konfigurasi shader, memeriksa cache, mengkompilasi jika perlu, dan mengembalikan program tersebut.

            
function getOrCreateShaderProgram(gl, config) {
  const key = config.name; // Atau kunci yang dihasilkan lebih kompleks

  if (shaderCache.has(key)) {
    console.log(`Menggunakan shader dari cache: ${key}`);
    return shaderCache.get(key);
  }

  console.log(`Mengkompilasi shader: ${key}`);

  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, config.vertexShaderSource);
  gl.compileShader(vertexShader);

  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.error('ERROR mengkompilasi vertex shader:', gl.getShaderInfoLog(vertexShader));
    gl.deleteShader(vertexShader);
    return null;
  }

  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, config.fragmentShaderSource);
  gl.compileShader(fragmentShader);

  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.error('ERROR mengkompilasi fragment shader:', gl.getShaderInfoLog(fragmentShader));
    gl.deleteShader(fragmentShader);
    return null;
  }

  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error('ERROR menautkan program:', gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);
    return null;
  }

  // Bersihkan shader setelah penautan
  gl.detachShader(program, vertexShader);
  gl.detachShader(program, fragmentShader);
  gl.deleteShader(vertexShader);
  gl.deleteShader(fragmentShader);

  shaderCache.set(key, program);
  return program;
}

            

              
                Copy
              
            
          

4. Varian Shader dan Define Preprosesor

Dalam aplikasi dunia nyata, shader seringkali memiliki varian yang dikendalikan oleh direktif preprosesor (misalnya, #ifdef NORMAL_MAPPING). Untuk men-cache ini dengan benar, kunci cache Anda harus mencerminkan define ini. Anda dapat meneruskan array string define ke fungsi caching Anda.

            
// Contoh dengan define
const texturedMaterialConfig = {
  name: 'texturedMaterial',
  defines: ['USE_TEXTURE', 'NORMAL_MAPPING'],
  vertexShaderSource: `
    #version 300 es
    in vec4 a_position;
    in vec2 a_texcoord;
    out vec2 v_texcoord;
    void main() {
      v_texcoord = a_texcoord;
      gl_Position = a_position;
    }
  `,
  fragmentShaderSource: `
    #version 300 es
    precision mediump float;
    in vec2 v_texcoord;
    uniform sampler2D u_texture;
    out vec4 fragColor;
    void main() {
      fragColor = texture(u_texture, v_texcoord);
    }
  `
};

function getShaderKey(config) {
  // Pembuatan kunci yang lebih kuat mungkin mengurutkan define secara alfabetis dan menggabungkannya.
  const defineString = config.defines ? config.defines.sort().join(',') : '';
  return `${config.name}-${defineString}`;
}

// Kemudian modifikasi getOrCreateShaderProgram untuk menggunakan kunci ini.

            

              
                Copy
              
            
          

Saat menghasilkan sumber shader, Anda perlu menambahkan define ke kode sumber sebelum kompilasi:

            
function generateShaderSourceWithDefines(source, defines = []) {
  let preamble = '';
  for (const define of defines) {
    preamble += `#define ${define}\n`;
  }
  return preamble + source;
}

// Di dalam getOrCreateShaderProgram:
const finalVertexShaderSource = generateShaderSourceWithDefines(config.vertexShaderSource, config.defines);
const finalFragmentShaderSource = generateShaderSourceWithDefines(config.fragmentShaderSource, config.defines);
// ... gunakan ini di gl.shaderSource

            

              
                Copy
              
            
          

5. Invalidasi dan Manajemen Cache

Meskipun tidak sepenuhnya merupakan cache kompilasi dalam arti HTTP, pertimbangkan bagaimana Anda mungkin mengelola cache jika sumber shader dapat berubah secara dinamis. Untuk sebagian besar aplikasi, shader adalah aset statis yang dimuat sekali. Jika shader dapat dihasilkan atau dimodifikasi secara dinamis saat runtime, Anda akan memerlukan strategi untuk membatalkan atau memperbarui program yang di-cache. Namun, untuk pengembangan WebGL standar, ini jarang menjadi masalah.

6. Penanganan Kesalahan dan Debugging

Penanganan kesalahan yang kuat selama kompilasi dan penautan shader sangat penting. Fungsi gl.getShaderInfoLog dan gl.getProgramInfoLog sangat berharga untuk mendiagnosis masalah. Pastikan mekanisme caching Anda mencatat kesalahan dengan jelas sehingga Anda dapat mengidentifikasi shader yang bermasalah.

Kesalahan kompilasi umum meliputi:

• Kesalahan sintaksis dalam kode GLSL.
• Ketidakcocokan tipe.
• Menggunakan variabel atau fungsi yang tidak dideklarasikan.
• Melebihi batas GPU (misalnya, sampler tekstur, varying vector).
• Kualifikasi presisi yang hilang di fragment shader.

Teknik Caching Lanjutan dan Pertimbangan

Di luar implementasi dasar, beberapa teknik lanjutan dapat lebih meningkatkan performa WebGL dan strategi caching Anda.

1. Pra-kompilasi dan Bundling Shader

Untuk aplikasi besar atau yang menargetkan lingkungan dengan koneksi jaringan yang berpotensi lebih lambat, melakukan pra-kompilasi shader di server dan menggabungkannya dengan aset aplikasi Anda bisa bermanfaat. Pendekatan ini memindahkan beban kompilasi ke proses build daripada runtime.

• Alat Build: Integrasikan file GLSL Anda ke dalam pipeline build Anda (misalnya, Webpack, Rollup, Vite). Alat-alat ini seringkali dapat memproses file GLSL, berpotensi melakukan linting dasar atau bahkan langkah pra-kompilasi.
• Menyematkan Sumber: Sematkan kode sumber shader langsung ke dalam bundle JavaScript Anda. Ini menghindari permintaan HTTP terpisah untuk file shader dan membuatnya siap tersedia untuk mekanisme caching Anda.

2. Shader LOD (Level of Detail)

Mirip dengan LOD tekstur, Anda dapat mengimplementasikan LOD shader. Untuk objek yang lebih jauh atau kurang penting, Anda mungkin menggunakan shader yang lebih sederhana dengan lebih sedikit fitur. Untuk objek yang lebih dekat atau lebih penting, Anda menggunakan shader yang lebih kompleks dan kaya fitur. Sistem caching Anda harus menangani varian shader yang berbeda ini secara efisien.

3. Kode Shader Bersama dan Include

GLSL tidak secara native mendukung direktif #include seperti C++. Namun, alat build seringkali dapat memproses GLSL Anda untuk menyelesaikan include. Jika Anda tidak menggunakan alat build, Anda mungkin perlu menggabungkan potongan kode shader umum secara manual sebelum meneruskannya ke WebGL.

Pola umum adalah memiliki serangkaian fungsi utilitas atau blok umum dalam file terpisah dan kemudian menggabungkannya secara manual:

            // common_lighting.glsl
vec3 calculateLighting(vec3 normal, vec3 lightDir, vec3 viewDir) {
  // ... perhitungan pencahayaan ...
  return calculatedLight;
}

// main_fragment.glsl
#include "common_lighting.glsl"

void main() {
  // ... gunakan calculateLighting ...
}

            

              
                Copy
              
            
          

Proses build Anda akan menyelesaikan include ini sebelum menyerahkan sumber akhir ke fungsi caching.

4. Optimisasi Khusus GPU dan Caching Vendor

Perlu dicatat bahwa implementasi browser dan driver GPU modern seringkali melakukan caching shader mereka sendiri. Namun, caching ini biasanya tidak transparan bagi pengembang, dan efektivitasnya dapat bervariasi. Vendor browser mungkin men-cache shader berdasarkan hash kode sumber atau pengidentifikasi internal lainnya. Meskipun Anda tidak dapat mengontrol cache tingkat driver ini secara langsung, mengimplementasikan strategi caching Anda sendiri yang kuat memastikan bahwa Anda selalu menyediakan jalur yang paling optimal, terlepas dari perilaku driver yang mendasarinya.

Pertimbangan Global: Vendor perangkat keras yang berbeda (NVIDIA, AMD, Intel) dan jenis perangkat (desktop, seluler, grafis terintegrasi) mungkin memiliki karakteristik performa yang bervariasi untuk kompilasi shader. Cache yang diimplementasikan dengan baik menguntungkan semua pengguna dengan mengurangi beban pada perangkat keras spesifik mereka.

5. Generasi Shader Dinamis dan WebAssembly

Untuk shader yang sangat kompleks atau dihasilkan secara prosedural, Anda mungkin mempertimbangkan untuk menghasilkan kode shader secara terprogram. Dalam beberapa skenario lanjutan, menghasilkan kode shader melalui WebAssembly bisa menjadi pilihan, memungkinkan logika yang lebih kompleks dalam proses generasi shader itu sendiri. Namun, ini menambah kompleksitas yang signifikan dan biasanya hanya diperlukan untuk aplikasi yang sangat terspesialisasi.

Contoh dan Kasus Penggunaan di Dunia Nyata

Banyak aplikasi dan pustaka WebGL yang sukses secara implisit atau eksplisit menggunakan prinsip caching shader:

• Mesin Game (misalnya, Babylon.js, Three.js): Kerangka kerja JavaScript 3D populer ini sering menyertakan sistem manajemen material dan shader yang kuat yang menangani caching secara internal. Ketika Anda mendefinisikan material dengan properti tertentu (misalnya, tekstur, model pencahayaan), kerangka kerja menentukan shader yang sesuai, mengkompilasinya jika perlu, dan menyimpannya di cache untuk digunakan kembali. Misalnya, menerapkan material PBR (Physically Based Rendering) standar di Babylon.js akan memicu kompilasi shader untuk konfigurasi spesifik tersebut jika belum pernah terlihat sebelumnya, dan penggunaan berikutnya akan mengenai cache.
• Alat Visualisasi Data: Aplikasi yang merender set data besar, seperti peta geografis atau simulasi ilmiah, sering menggunakan shader untuk memproses dan merender jutaan titik atau poligon. Kompilasi shader yang efisien sangat penting untuk rendering awal dan pembaruan dinamis apa pun pada visualisasi. Pustaka seperti Deck.gl, yang memanfaatkan WebGL untuk visualisasi data geospasial skala besar, sangat bergantung pada generasi dan caching shader yang dioptimalkan.
• Desain Interaktif dan Creative Coding: Platform untuk creative coding (misalnya, menggunakan pustaka seperti p5.js dengan mode WebGL atau shader kustom dalam kerangka kerja seperti React Three Fiber) mendapat banyak manfaat dari caching shader. Ketika desainer sedang mengiterasi efek visual, kemampuan untuk melihat perubahan dengan cepat tanpa penundaan kompilasi yang lama sangat penting.

Contoh Internasional: Bayangkan sebuah platform e-commerce global yang menampilkan model 3D produk. Saat pengguna melihat produk, model 3D-nya dimuat. Platform mungkin menggunakan shader yang berbeda untuk jenis produk yang berbeda (misalnya, shader metalik untuk perhiasan, shader kain untuk pakaian). Cache shader yang diimplementasikan dengan baik memastikan bahwa setelah shader material tertentu dikompilasi untuk satu produk, ia segera tersedia untuk produk lain yang menggunakan konfigurasi material yang sama, menghasilkan pengalaman menjelajah yang lebih cepat dan lancar bagi pengguna di seluruh dunia, terlepas dari kecepatan internet atau kemampuan perangkat mereka.

Praktik Terbaik untuk Performa WebGL Global

Untuk memastikan aplikasi WebGL Anda berkinerja optimal untuk audiens global yang beragam, pertimbangkan praktik terbaik ini:

• Minimalkan Varian Shader: Meskipun fleksibilitas itu penting, hindari membuat jumlah varian shader unik yang berlebihan. Konsolidasikan logika shader jika memungkinkan menggunakan kompilasi bersyarat (define) dan teruskan parameter melalui uniform.
• Profil Aplikasi Anda: Gunakan alat pengembang browser (tab Performance) untuk mengidentifikasi waktu kompilasi shader sebagai bagian dari performa rendering Anda secara keseluruhan. Cari lonjakan aktivitas GPU atau waktu frame yang lama selama pemuatan awal atau interaksi tertentu.
• Optimalkan Kode Shader Itu Sendiri: Bahkan dengan caching, efisiensi kode GLSL Anda penting. Tulis GLSL yang bersih dan dioptimalkan. Hindari perhitungan, loop, dan operasi mahal yang tidak perlu jika memungkinkan.
• Gunakan Presisi yang Sesuai: Tentukan kualifikasi presisi (lowp, mediump, highp) di fragment shader Anda. Menggunakan presisi yang lebih rendah jika dapat diterima dapat secara signifikan meningkatkan performa pada banyak GPU seluler.
• Manfaatkan WebGL 2: Jika audiens target Anda mendukung WebGL 2, pertimbangkan untuk bermigrasi. WebGL 2 menawarkan beberapa peningkatan performa dan fitur yang dapat menyederhanakan manajemen shader dan berpotensi meningkatkan waktu kompilasi.
• Uji di Berbagai Perangkat dan Browser: Performa dapat sangat bervariasi di berbagai perangkat keras, sistem operasi, dan versi browser. Uji aplikasi Anda pada berbagai perangkat untuk memastikan performa yang konsisten.
• Peningkatan Progresif: Pastikan aplikasi Anda dapat digunakan bahkan jika WebGL gagal diinisialisasi atau jika shader lambat untuk dikompilasi. Sediakan konten fallback atau pengalaman yang disederhanakan.

Kesimpulan

Cache kompilasi shader WebGL adalah strategi optimisasi mendasar bagi setiap pengembang yang membangun aplikasi yang menuntut secara visual di web. Dengan memahami proses kompilasi dan mengimplementasikan mekanisme caching yang kuat, Anda dapat secara signifikan mengurangi waktu inisialisasi, meningkatkan kelancaran rendering, dan menciptakan pengalaman pengguna yang lebih responsif dan menarik untuk audiens global Anda.

Menguasai caching shader bukan hanya tentang memangkas milidetik; ini tentang membangun aplikasi WebGL yang berkinerja, dapat diskalakan, dan profesional yang menyenangkan pengguna di seluruh dunia. Terapkan teknik ini, profil pekerjaan Anda, dan buka potensi penuh grafis yang dipercepat GPU di web.