holodepth

Framework entegrasyonları · React Three Fiber

Performans & İmperatif Kaçış: Ne Zaman Ada Açılır?

Deklaratif katalog çoğu vitrini taşır; sıcak yollarda uzlaştırma vergisi ürünü yer. Bu sayfa R3F'de bilerek imperatif adaya kaçış eşiğini anlatır: ref, instance köprüsü, «shell deklaratif · çekirdek elle» · Platform FPS diliminin tekrarı değildir.

Holodepth bu yaprağı genel «optimize et» sloganı veya InstancedMesh matematik dersi olarak yazmaz. Ms bütçesi / jank SLA Platform · FPS mantığı ve CPU / GPU yapraklarındadır. Instancing derinliği Three omurgasındadır. Kare mutasyonu useFrame / useThree yaprağında mühürlendi; burada soru «nasıl döner?» değil, «ne zaman deklaratif sözleşmeyi bilinçli bozarız?». React memo temeli React Vitae alanındadır. glTF LOD spekü format / Platform asset izleklerindedir.

Sayfayı bitirdiğinizde şu cümleyi kurabilmelisiniz: «Kaçış prematüre değildir, ölçülmüş eşiğe bağlıdır. Shell deklaratif kalabilir; sıcak adada ref/instance yaşar. Her kare React state yazmak vergi üretir. Escape okunabilirlik borcudur. R3F izleği burada kapanır; ölçüm Platform'a, instance matematiği Three'ye aittir.»

Bu sayfanın sınırı · komşu konularla ayrım

Bu sayfa R3F'de imperatif kaçış eşiğini anlatır:

  • Uzlaştırma vergisi · ne zaman ada açılır
  • ref sıcak nokta · shell / ada modeli
  • Instance köprüsü (yüzey) · kaçış disiplinı
  • Üç kaçış profili · izlek kapanışı

Bilinçli olarak dışarıda bırakılan konular:

Kısa ayrım: Bu sayfa «R3F'de ne zaman elle adaya geçilir?» · Platform FPS «ms / jank SLA» · Three instancing «GPU örnek matematığı» · useFrame «karede nasıl mutasyon».

Uzlaştırma vergisi

Her React render adayı, Fiber'in Three ağacıyla yeniden anlaşmasına kapı açabilir. Seyrek UI için vergi küçüktür; saniyede binlerce prop değişimi veya binlerce deklaratif mesh için vergi ürünü yer. Holodepth: performans burada «shader'ı kıs» demeden önce hangi iş React hattında gereksiz? diye sorar.

Platform sayfaları dilimi (JS / submit / GPU) ölçmeyi öğretir. Bu sayfa R3F'ye özgü teşhisi mühürler: uzlaştırma + sanal DOM düşüncesi 3D sıklığında pahalıysa, sıcak yol deklaratif kalmak zorunda değildir.

Deklaratif rahatlıktır; vergi görünmez faturadır.

Ne zaman ada açılır?

Kaçış kriteri ezber slogan değil, ölçülmüş eşiktir. Holodepth sinyal listesi:

  • Aynı karede yüzlerce mesh prop'u yeniden yazılıyor.
  • Liste key yağmuru ile sürekli remount.
  • useFrame ince ama üst bileşen her kare setState ile ağacı sarsıyor.
  • Binlerce benzer nesne tek tek deklaratif doğuyor (instance adayı).
  • Profilde uzlaştırma / JS dilimi GPU'dan önce şişiyor.

Sinyal yokken «hepsini imperatif yapayım» okunabilirliği ve güvenliği yakar. Önce ölçün (Platform), sonra adanın sınırını çizin.

Shell deklaratif · ada elle

Holodepth tercih modeli: Canvas, ışık, kamera iskelesi, seyrek UI bağları deklaratif kalsın; parçacık / kalabalık / sürekli trail gibi sıcak çekirdek ref üzerinde yaşasın. Ada, tüm uygulamayı «React'siz Three»ye çevirmez; sınırlı bir Object3D alt ağacını uzlaştırma dışı tutar.

primitive misafir modeli deklaratif sayfada tanındı; kaçışta fark şu: misafir bazen sizin her kare yazdığınız canlı motor olur. Sahiplik ve dispose yükleme yaprağındaki gibi yazılı kalır.

ref sıcak nokta

useFrame zaten ref mutasyonunu öğretti. Kaçış disiplini: sıcak alanlar (position, instanceMatrix, attribute) React state'e çıkmaz. State yalnız seyrek ürün olaylarında (seçim, panel aç/kapa) güncellenir. Böylece React hattı soğuk kalır, GPU hattı sıcak kalır.

Çift kaynak yasağı buraya da uyar: aynı alanı hem prop hem ref ile yarıştırmayın. Ada içinde prop donuk, mutasyon ref'te.

Instance köprüsü (yüzey)

Binlerce benzer mesh'i JSX'te tek tek doğurmak uzlaştırma ve draw tarafında pahalıdır. R3F'de instanced mesh / instance yardımcıları bir köprü yüzeyidir; matrix attribute, frustum ve picking kenarları Three derinliğindedir. Holodepth: kaçış kararını «instance mı, bin deklaratif mi?» diye ürün cümlesine yazın; formülü burada ezberletmeyin.

Adaylık · kaba süzgeç
Sahne İlk tercih Kaçış sinyali
12 ürün parçası Deklaratif group Nadiren
200–2000 benzer öğe Instance köprüsü JS dilimi / draw şişmesi
Her biri unique material graph Deklaratif veya atlas Instance her şeyi çözmez

Kaçış disiplini

Ada açmak borçtur. Holodepth kuralları:

  1. Sınır çiz: hangi Object3D alt ağacı ada?
  2. API daralt: dışarıya 2–3 prop / event; içeriye ref.
  3. Ölç: kaçıştan önce/sonra aynı senaryo.
  4. Geri dönüş yolu: ada büyürse bölümle veya dokümante et.
  5. Güvenlik: kullanıcı verisini elle buffer'a doğrulamadan yazma.

Premature escape, ekibi «yarı React yarı spagetti Three»ye böler. Geç escape, jank'i ürünleşmiş halde bırakır. Eşik ölçümle gelir.

Ada, sığınak değil; sınırlı yetki bölgesidir.

Kaçışın yanlış yerleri

  • Seyrek tıklanan vitrin butonu (deklaratif + picking yeterli).
  • Tek seferlik yükleme spike'ı (loader / Suspense alanı).
  • «Daha havalı» diye tüm sahneyi primitive etmek.
  • Ölçüm yokken mikro-optimizasyon tiyatrosu.
  • GPU bound sorunu görüp yalnız React'i suçlamak (Platform CPU/GPU).

Güvenli ada: simüle kaçış

Örnekler öğretim amaçlıdır. Instancing matematiği derinleştirilmez; sabit N ve güvenli mutasyon gösterilir. React memo dersi Vitae'dedir.

Simüle · sıcak trail adası. Dışarıya yalnız active; noktalar ref içinde. 

import { useRef, useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'

const N = 128 // Eğitim: ürün N'sini ölçerek seçin.

/**
 * Shell deklaratif kalır; sıcak noktalar ref'te.
 * active seyrek UI state'tir · her kare setState yoktur.
 */
export function TrailIsland({ active = true }) {
  const line = useRef(null)
  const positions = useMemo(() => new Float32Array(N * 3), [])
  const geom = useMemo(() => {
    const g = new THREE.BufferGeometry()
    g.setAttribute('position', new THREE.BufferAttribute(positions, 3))
    return g
  }, [positions])

  useFrame((state) => {
    if (!active || !line.current) return
    const t = state.clock.elapsedTime
    for (let i = 0; i < N; i++) {
      const o = i * 3
      const u = i / (N - 1)
      positions[o] = (u - 0.5) * 4
      positions[o + 1] = Math.sin(t * 2 + u * 8) * 0.35
      positions[o + 2] = Math.cos(t * 1.4 + u * 5) * 0.2
    }
    geom.attributes.position.needsUpdate = true
  })

  return (
    <line ref={line} geometry={geom}>
      <lineBasicMaterial color="#2ee7f2" />
    </line>
  )
}

Simüle · kaba instance yüzeyi. Matrix yazımı ada içinde; Three instancing teorisi linkte kalır. 

import { useRef, useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'

const COUNT = 400 // Eğitim tavanı · profil ile doğrulayın.

export function InstanceGate() {
  const mesh = useRef(null)
  const dummy = useMemo(() => new THREE.Object3D(), [])

  useFrame((state) => {
    const m = mesh.current
    if (!m) return
    const t = state.clock.elapsedTime
    for (let i = 0; i < COUNT; i++) {
      const col = i % 20
      const row = (i / 20) | 0
      dummy.position.set(col * 0.35 - 3.5, Math.sin(t + i * 0.01) * 0.15, row * 0.35 - 3.5)
      dummy.rotation.y = t * 0.4 + i * 0.02
      dummy.updateMatrix()
      m.setMatrixAt(i, dummy.matrix)
    }
    m.instanceMatrix.needsUpdate = true
  })

  return (
    <instancedMesh ref={mesh} args={[undefined, undefined, COUNT]}>
      <boxGeometry args={[0.2, 0.2, 0.2]} />
      <meshStandardMaterial color="#9aa6b8" roughness={0.5} metalness={0.15} />
    </instancedMesh>
  )
}

Güvenlik: COUNT / buffer uzunluğunu kullanıcı girdisinden doğrulamadan şişirmeyin (bellek DoS). Ada içinde yazılan attribute boyutunu sabitleyin veya üst sınır koyun.

Kaçış tuzakları

  1. Premature escape: ölçüm yok, okunabilirlik yok.
  2. Çift kaynak: prop + ref aynı alanı iter.
  3. Ada şişmesi: yarım uygulama elle yazılmış.
  4. GPU bound'u React ile «düzeltmek»: yanlış dilim.
  5. needsUpdate unutmak: buffer değişti görünmez.
  6. Sınırsız COUNT: bellek / GPU çöküşü.
  7. Dispose unutmak: ada unmount'ta sızıntı.

Üç kaçış profili

  • 01 · Ada

    Vitrin (kaçış yok)

    Stil
    Tam deklaratif + ince useFrame
    Ölçüm
    Spike yoksa dokunma
    Risk
    Erken spagetti
  • 02 · Ada

    Sıcak trail / FX

    Stil
    Shell deklaratif · buffer ref
    State
    Yalnız active / kalite
    Risk
    needsUpdate / sızıntı
  • 03 · Ada

    Kalabalık benzeri

    Stil
    Instance köprüsü
    Tavan
    COUNT ürün sabiti
    Risk
    Unique material tuzağı

Ölçüm köprüsü

«Daha hızlı hissettim» kapı değildir. Holodepth: aynı kamera yolu, aynı asset seti, taban ms / p99 (Platform FPS). Kaçış sonrası JS dilimi düştü mü, GPU aynı mı kaldı? CPU/GPU yaprağı dilim teşhisini; bu sayfa yalnız R3F kararını bağlar.

Holodepth perspektifleri

Önce ölç, sonra ada

Sinyalsiz kaçış teknik borç üretme sanatıdır.

Shell'i koruyun

Tüm sahneyi elle yazmak nadiren kazanır; sınırlı ada çoğu zaman yeter.

Borcu belgele

Ada API'si, COUNT tavanı, sahiplik: ticket'a üç satır.

Teşhis maddeleri

  1. Uzlaştırma / JS dilimi gerçekten mi şişiyor?
  2. Kaçış eşiği yazılı mı, ezber mi?
  3. Shell / ada sınırı net mi?
  4. Çift kaynaklı alan var mı?
  5. Instance mı, unique graph mı?
  6. COUNT / buffer tavanı var mı?
  7. Önce-sonra ölçüm alındı mı?
  8. Platform FPS veya glTF spekü bu sayfaya sızmış mı?

Holodepth içgörüsü

R3F'nin gücü deklaratif köprüdür; performansı «React'i silmek» değil, verginin olduğu yere ada açmaktır. İzlek: kapı → harita → kare → kargo → isabet → kaçış.

İzlek kapanışı · sonraki kapılar

React Three Fiber alt ana konusu bu yaprakla kapanır. Ölçüm ve dilim teşhisi için Platform FPS mantığı / CPU / GPU yapraklarına dönün. Framework entegrasyonlarında sıradaki boş iskeletler Vue + Three ve Angular + Three'dir; R3F omurgası tekrar ziyaret için Canvas köküne dönebilirsiniz.