Saat sel bertabrakan: Gunakan rapier dan tiga. – Beragampengetahuan

Setiap proyek dimulai dengan rasa ingin tahu. Biasanya berasal dari mengeksplorasi teknologi di luar jaringan dan membayangkan bagaimana mereka menerjemahkan menjadi pengalaman interaktif. Dalam hal ini, inspirasi adalah dari simulasi partikel menyelam.

Konsep ini

Gagasan inti dari proyek ini adalah setelah menonton tutorial tentang membuat partikel seperti sel menggunakan plugin Xparticles dari Cinema 4D. Tim sering mengambil inspirasi dari teknik desain gerak 3D, dan masalah ini sering terjadi di studio: “Bukankah keren jika itu interaktif?“Begitulah ide ini lahir.

Menurut contoh, setelah membangun pengaturan kami sendiri di C4D, kami membuat prototipe gerak universal untuk menunjukkan interaksi. Hasilnya adalah efek menjijikkan di mana sel bergerak sesuai dengan posisi kursor. Untuk membuat demo, kami menambahkan bola sederhana dan memberinya label collider sehingga partikel -partikel didorong pergi saat bola bergerak, sehingga meniru gerakan tikus. Cara mudah untuk menambahkan gerakan realistis adalah dengan menambahkan tag getaran pada collider dan memainkannya di tingkat gerakan dan frekuensi sampai terlihat bagus.

Arah artistik

Dengan bantuan partikel dasar dan demonstrasi interaktif, kami memberikan urutan dan bergerak dalam efek berikutnya untuk mulai menggunakan tampilan dan nuansa. Kami tahu kami ingin memberikan partikel dengan kualitas unik yang lebih bergaya daripada surealis atau ilmiah. Setelah beberapa eksplorasi, kami mendarat di penampilan pemetaan gradien Lo-Fi, yang terasa seperti arah yang menarik. Kami mencapai ini dengan lapisan efek:

• Efek> menghasilkan> 4 gradien warna: Tambahkan ke lapisan bentuk baru. Gradien hitam dan putih ini akan bertindak sebagai topeng untuk mengendalikan intensitas Blur.
• Efek> Blur> Kamera Blur: Tambahkan ke lapisan penyesuaian baru. Kabur umum ini akan menghaluskan partikel.
• Efek> blur> komposit blur: Tambahkan ke lapisan penyesuaian yang sama seperti di atas. Atur lapisan blur untuk menggunakan lapisan bentuk yang sama yang kami terapkan pada 4 gradien warna dan pastikan untuk mengaturnya ke efek efek dan topeng dan dalam daftar drop-down.
• Efek> Koreksi Warna> Colorama: Tambahkan sebagai lapisan penyesuaian baru. Di sinilah kesenangan dimulai! Anda dapat menambahkan gradien khusus ke siklus output dan bermain di fase shift untuk menyesuaikan penampilan ke preferensi Anda.

Selanjutnya, kami merancang UI sederhana untuk mencocokkan orientasi visual berbasis unit futuristik. Kami pikir ini akan bekerja dengan baik untuk perusahaan biotek – jadi, menciptakan merek sederhana dengan pesan kritis agar sesuai dan voila! Itulah kelengkapan tahap konseptual.

((Tips Populer: Jika Anda berinteraksi dalam perangkat lunak 3D seperti C4D, buat pesawat dengan tekstur kursor di atasnya dan kemudian tempatkan orang tuanya dengan komponen interaktif utama Anda (jika itu adalah sphere collider). Jadikan itu sebagai urutan agar cocok dengan simulasi Anda – Anda kemudian dapat melapisinya di teks, dll. Saat UI ada setelah pengaruh)

Metode dan alat teknis

Karena ini adalah situs statis satu halaman sederhana tanpa perlu backend, kami menggunakan boilerplate internal untuk astro dan vite dan trix.js. Untuk fisika, kami bekerja dengan Rapier untuk secara efektif menangani deteksi tabrakan, dan dengan tiga poin. Ini adalah persyaratan utama kami karena kami tidak memerlukan perhitungan simulasi atau perangkat lunak.

Untuk proyek teknologi seluler, kami ingin menunjukkan cara mencapai hasil yang memuaskan tanpa kepadatan layar dengan banyak fitur atau komponen. Fokus kami adalah pada efek visual dan interaktivitas – untuk memuaskan pengguna, ia perlu terasa halus dan mulus. Simulasi seperti cairan adalah cara yang bagus untuk mencapai ini. Dengan tidak adanya penglihatan, kami sering menerapkan efek ini sebagai bagian interaktif tambahan. Untuk proyek ini, kami ingin mengambil pendekatan yang sedikit berbeda, tetapi masih akan mencapai hasil yang serupa.

Menurut konsep desainer kami, ada dua arah untuk mempertimbangkan implementasi. Untuk mempertahankan pengalaman yang dioptimalkan, bahkan dalam skala besar, GPU biasanya merupakan cara terbaik untuk menangani sebagian besar perhitungan. Untuk melakukan ini, kita perlu berpengaruh dalam shader dan menggunakan implementasi yang lebih kompleks seperti algoritma pembungkus dan pola seperti Voronoi khusus. Namun, setelah menguji Perpustakaan Rapier, kami menyadari bahwa tabrakan objek tubuh yang kaku cukup untuk menciptakan kembali konsep secara real time.

Implementasi Fisik

Untuk melakukan ini, kita perlu menciptakan dunia fisik yang terpisah di sebelah dunia 3D yang diberikan, karena Perpustakaan Rapier hanya dapat menangani komputasi fisik dan menggunakan grafik untuk pilihan pengembang implementasi.

Berikut ini cuplikan penciptaan tubuh kita yang kaku:

for (let i = 0; i < this.numberOfBodies; i++) {
  const x = Math.random() * this.bounds.x - this.bounds.x * 0.5
  const y = Math.random() * this.bounds.y - this.bounds.y * 0.5
  const z = Math.random() * (this.bounds.z * 0.95) - (this.bounds.z * 0.95) * 0.5

  const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(x, y, z)
  bodyDesc.setGravityScale(0.0) // Disable gravity
  bodyDesc.setLinearDamping(0.7)
  const body = this.physicsWorld.createRigidBody(bodyDesc)

  const radius = MathUtils.mapLinear(Math.random(), 0.0, 1.0, this._cellSizeRange[0], this._cellSizeRange[1])
  const colliderDesc = RAPIER.ColliderDesc.ball(radius)
  const collider = this.physicsWorld.createCollider(colliderDesc, body)
  collider.setRestitution(0.1) // bounciness 0 = no bounce, 1 = full bounce

  this.bodies.push(body)
  this.colliders.push(collider)
}

Kisi -kisi yang mewakili tubuh dibuat secara terpisah, dan pada setiap skala, transformasi mereka diperbarui oleh transformasi dalam mesin fisika.

// update mesh positions
for (let i = 0; i < this.numberOfBodies; i++) {
  const body = this.bodies[i]
  const position = body.translation()

  const collider = this.colliders[i]
  const radius = collider.shape.radius

  this._dummy.position.set(position.x, position.y, position.z)
  this._dummy.scale.setScalar(radius)
  this._dummy.updateMatrix()

  this.mesh.setMatrixAt(i, this._dummy.matrix)
}

this.mesh.instanceMatrix.needsUpdate = true

Mengingat kinerjanya, kami pertama kali memutuskan untuk mencoba Perpustakaan Rapier dalam versi 2D, tetapi segera menjadi jelas bahwa efek visual tidak cukup meyakinkan untuk mendistribusikan sel pada pesawat. Dampak kinerja perhitungan lain di bidang Z dibenarkan dengan hasil yang lebih baik.

Membangun visi melalui pasca-pemrosesan

Jelas, efek pasca pemrosesan memainkan peran penting dalam proyek. Sejauh ini, yang paling penting adalah Blur, yang membuat sel berubah dari cincin sederhana transparan ke massa kental cairan. Kami menerapkan Kawase Blur yang mirip dengan Gaussian Blur, tetapi menggunakan kotak blur alih -alih fungsi Gaussian dan lebih berkinerja di tingkat blur level yang lebih tinggi. Kami hanya menerapkannya pada bagian -bagian tertentu dari layar untuk mempertahankan minat visual.

Ini telah membawa implementasi lebih dekat ke konsep. Bagian penting lain dari pengalaman ini adalah penilaian warna, di mana kami memetakan warna ke luminositas elemen dalam adegan. Kami tidak dapat menahan diri untuk menambahkan simulasi cairan yang khas, sehingga warnanya bergeser sedikit tergantung pada gerakan cairan.

if (uFluidEnabled) {
    fluidColor = texture2D(tFluid, screenCoords);

    fluid = pow(luminance(abs(fluidColor.rgb)), 1.2);
    fluid *= 0.28;
}

vec3 color1 = uColor1 - fluid * 0.08;
vec3 color2 = uColor2 - fluid * 0.08;
vec3 color3 = uColor3 - fluid * 0.08;
vec3 color4 = uColor4 - fluid * 0.08;

if (uEnabled) {
    // apply a color grade
    color = getColorRampColor(brightness, uStops.x, uStops.y, uStops.z, uStops.w, color1, color2, color3, color4);
}

color += color * fluid * 1.5;
color = clamp(color, 0.0, 1.0);

color += color * fluidColor.rgb * 0.09;

gl_FragColor = vec4(color, 1.0);

Optimalisasi Kinerja

Karena jumlah perhitungan yang diperlukan, daya komputasi yang dibutuhkan oleh mesin fisika telah meningkat dengan cepat, dan kami bertujuan untuk membuat pengalaman dioptimalkan mungkin. Langkah pertama adalah menemukan jumlah sel terkecil tanpa mempengaruhi efek visual, yaitu, itu tidak akan membuat sel terlalu jarang. Untuk melakukan ini, kami meminimalkan area di mana sel -sel dibuat dan membuat sel sedikit lebih besar.

Langkah penting lainnya adalah memastikan bahwa tidak ada perhitungan yang berlebihan, yang berarti bahwa setiap perhitungan harus dibuktikan dengan hasil yang terlihat di layar. Untuk memastikan ini, kami membatasi area di mana sel -sel dibuat untuk menutupi layar hanya terlepas dari ukuran layar. Ini pada dasarnya berarti bahwa semua unit dalam adegan terlihat di kamera. Biasanya, pendekatan ini melibatkan derivasi yang sedikit kompleks dari area batas bidang pandang kamera dan bidang jarak dari jarak objek, namun, untuk proyek ini, kami menggunakan kamera orthophone, yang menyederhanakan perhitungan.

this.camera._width = this.camera.right - this.camera.left
this.camera._height = this.camera.top - this.camera.bottom

// .....

this.bounds = {
  x: (this.camera._width / this.options.cameraZoom) * 0.5,
  y: (this.camera._height / this.options.cameraZoom) * 0.5,
  z: 0.5
}

Lihatlah demonstrasi langsung.

Kami juga telah mengungkapkan beberapa pengaturan pada demo langsung sehingga Anda dapat menyesuaikan warna sendiri di sini.

Terima kasih telah membaca rincian percobaan ini! Jika Anda memiliki pertanyaan, jangan ragu untuk menulis kepada kami @uns__nstudio.