Dibalik Pengalaman Departemen Desain KAI: Pemburaman Garis WebGL, Penghapusan Video, dan Animasi 3D – Beragampengetahuan

Proyek ini menyajikan situs web yang dibuat untuk departemen desain KAI Corporation, sebuah perusahaan Jepang dengan pengalaman 117 tahun di bidang manufaktur pisau. Situs web ini mencerminkan kepekaan estetika halus yang telah dikembangkan merek tersebut sepanjang sejarahnya yang panjang.

KAI lebih dari sekadar membuat produk dan mempertimbangkan aktivitas orang-orang yang menggunakan alatnya. Dari ide ini muncul kesimpulan utama: “Ketajaman pemotongan menarik kehidupan kita ke dalamnya.” Visual dan interaksi dirancang dengan cermat berdasarkan konsep ini. Garis-garis yang mengelilingi produk berfungsi sebagai panduan pergerakan, melambangkan bagaimana gerak tubuh manusia menggambarkan dan membentuk kehidupan sehari-hari. Melalui video scrubbing yang interaktif, pengunjung dapat merasakan sensasi sentuhan menggunakan alat tersebut. Website tersebut menampilkan estetika KAI sebagai pengalaman “video taktil”.

Dua tantangan teknis utama

Ada dua kendala teknis utama selama proses pengembangan:

• Cepat garis kabur alami Memiliki kedalaman bidang (DoF)
• melaksanakan Pembersihan video Respons interaksi drag dengan lancar

Bagian berikut menjelaskan cara mengatasi setiap tantangan.

kebebasan garis yang alami

Penerapan depth-of-field pada web sering kali meninggalkan inti tajam di bawah tumpukan lapisan buram, sehingga menghasilkan hasil yang tidak wajar. Misalnya, berikut adalah gambar yang dihasilkan oleh Gemini yang mengilustrasikan masalah umum ini:

Berbeda dari teknologi DoF yang digunakan dalam perangkat lunak 3DCG tradisional, perangkat lunak 3DCG tradisional mengandalkannya Peta kedalaman—Mencapai keburaman yang bersih dan alami murni di WebGL terbukti menantang. Jadi saya mengeksplorasi pendekatan yang berbeda (walaupun saya ingin mendengar apakah ada yang tahu pendekatan yang lebih baik):

1. Tampilkan garis yang jelas dan tidak buram ke dalam FBO.
2. Render FBO kedua, perbesar garis dengan radius blur dan enkode data tambahan dalam saluran RGB-nya:
   • G = daerah kabur
   • Kanan = kekuatan kabur
3. Gabungkan keduanya dan terapkan Kabur Gaussian Planar Dua proses, vertikal dan horizontal, digunakan.

Untuk menangani perpotongan garis, proses dilakukan dua kali – sekali untuk latar depan dan sekali untuk latar belakang – dipisahkan berdasarkan titik asal.

Pembersihan video

Di lingkungan Mac/Chrome modern, pembersihan diterapkan dengan sangat sederhana:

video.currentTime = sec;

Namun, untuk Kompatibilitas lintas browsermembutuhkan dua langkah tambahan. Pertama, setiap video dikodekan ulang dengan hati-hati menggunakan ffmpeg. Tidak semua parameter penting, namun faktor yang paling penting adalah parameternya Mempersingkat interval bingkai utama. meskipun -g 1 (All-Intra) mengubah setiap frame menjadi I-frame, sehingga menghasilkan ukuran file yang tidak praktis, jadi saya memilih setengah dari nilai tersebut.

ffmpeg \
  -i INPUT.mov \
  -hide_banner \
  -c:v libx264 \
  -crf 24 \
  -y \
  -pix_fmt yuv420p \
  -an -sn -dn \ # Remove audio, subtitle, and data tracks
  -map 0:v:0 \  # Keep only the main video track
  -profile:v baseline \  # Lightweight decoding profile
  -level 3.1 \  # Mobile compatibility
  -g 12 -keyint_min 12 -sc_threshold 0 \  # Shorter keyframe interval for smoother scrubbing
  -bf 0 -refs 1 \
  -tune fastdecode \  # Reduce decoding cost
  -x264-params "no-deblock=1:weightp=0:mbtree=0:rc-lookahead=0:aq-mode=0:subme=1:trellis=0:me=dia:partitions=none" \  # Disable heavy decoding features
  -video_track_timescale 24000 \  # Fix tbn to 24000 for 24fps consistency
  -movflags +faststart \  # Web-optimized header
  OUTPUT.mp4

Meski begitu, kompatibilitas Firefox masih menjadi masalah, jadi saya menambahkan Penggantian berbasis WebCodecs. Saya awalnya mempertimbangkan untuk menggunakan kotak mp4tapi akhirnya memilih kelinci media Karena dipelihara secara aktif dan lebih mudah digunakan.

import { ALL_FORMATS, BlobSource, Input, VideoSampleSink } from 'mediabunny';

...

const blobForDecode = await loadVideo(name, suffix);
this._input = new Input({
  source: new BlobSource(blobForDecode),
  formats: ALL_FORMATS,
});
const vtrack = await this._input.getPrimaryVideoTrack();
this._sink = new VideoSampleSink(vtrack);

this._canvas = document.createElement('canvas');
this._ctx = this._canvas.getContext('2d');
this._canvasTexture = new CanvasTexture(this._canvas);
this._canvas.width = vtrack.displayWidth;
this._canvas.height = vtrack.displayHeight;

...

this._sink.getSample(sec).then((sample) => {
  const vFrame = sample.toVideoFrame();
  this._ctx.drawImage(vFrame, 0, 0, this._canvas.width, this._canvas.height);
  vFrame.close();
  sample.close();
  this._canvasTexture.needsUpdate = true;
});

Animasi garis disinkronkan dengan video

Untuk menganimasikan garis dalam 3D dan menyinkronkannya dengan video, pengaduk digunakan. Pada timeline yang sama dengan bahan referensi, elemen berikut dibuat di Blender dan ringan JSON Ekspor melalui Python:

• lintasan garis
• Waktu untuk muncul dan menghilang (dikendalikan dengan menggerakkan kubus di sepanjang garis)

Tentang Munters Corporation

kita Perusahaan Munters Merencanakan dan menghasilkan berbagai karya kreatif, terutama situs web – mulai dari situs web acara dan promosi yang menyampaikan daya tarik produk hingga situs web informasi perusahaan dan toko online untuk merek fesyen. Kami juga bekerja di film, media cetak dan lainnya. Dalam setiap proyek kami berusaha untuk tidak melakukan kompromi. Kami menghadapi setiap tantangan dengan ketulusan dan komitmen untuk menciptakan sesuatu yang dapat kami banggakan untuk ditunjukkan kepada siapa pun – sesuatu yang benar-benar kami sukai. Dengan etos ini sebagai inti kami, kami terus menciptakan karya yang memberikan nilai berarti bagi pelanggan dan dunia.

Kunjungi situs web perusahaan kami untuk melihat lebih banyak proyek kami.