Son Güncelleme: 20 Aug, 2026

How to Integrate CAD File Processing into Web Apps? Step-by-Step Architecture

Web Tabanlı CAD İşleme: 3D Veriyi Ayrıştırma, Dönüştürme ve Görselleştirme İçin Tam Kılavuz

Mühendislik, inşaat ve üretim yazılımları uzun süredir ağır masaüstü iş istasyonlarına bağlıdır. On yıllar boyunca, bir tasarım üzerinde iş birliği yapmak, devasa dosyaları dışa aktarmak, özel masaüstü yazılımını çalıştırmak ya da zengin geometrileri ölü piksellere dönüştüren statik 2D PDF anlık görüntülerine razı olmak anlamına geliyordu.

Günümüzde, ürün ekipleri gerçek zamanlı tasarım iş birliği, bulut tabanlı parça teklifleri, otomatik tasarım doğrulaması ve web tarayıcısı içinde doğrudan sürtünmesiz model paylaşımı bekliyor. Bilgisayar Destekli Tasarım (CAD) dosyalarını web’e getirmek ünlü bir şekilde zordur. Özel dosya formatları, tekdüze olmayan rasyonel B-spline’lar (NURBS), devasa dosya yükleri ve tarayıcı GPU kısıtlamaları ciddi mimari zorluklar yaratır.

İşte modern web uygulamaları içinde CAD dosyalarını nasıl mimarileyeceğinizi, işleyeceğinizi ve render edeceğinizi gösteren pratik, uçtan uca bir açıklama.

1. CAD Manzarasını Anlamak: Web İşlemenin Neden Zor Olduğu

Bir veri alma betiği yazmadan veya bir 3D canvas kütüphanesi seçmeden önce, kullanıcılarınızın yüklediği formatlar ile tarayıcıların gerçekte render ettiği formatlar arasındaki farkı anlamalısınız.

Sınır Temsili (B-Rep) vs. Poligonal Mesh’ler

Masaüstü CAD araçları (SolidWorks, CATIA, Autodesk Inventor, Siemens NX) üçgenler üzerinden düşünmez. Geometrileri, B-Rep (Sınır Temsili) veya NURBS (Düzensiz Rasyonel B-Spline’lar) olarak bilinen matematiksel olarak tam eğriler, yüzeyler ve katı cisimler şeklinde depolar.

  • B-Rep Formatları (.step, .stp, .iges, .sldprt): Yüksek matematiksel hassasiyet, değişken kenar tanımları ve karmaşık topolojik ilişkiler.
  • Çizim Formatları (.dwg, .dxf): 2D/3D vektör taslak verileri, yoğun katmanlı, genellikle tescilli (özellikle ikili DWG).
  • Mesh Formatları (.stl, .obj, .ply): Üçgenleştirilmiş yaklaşımlar. STL, 3D baskı için yaygın olsa da, tüm anlamsal bilgileri (dişler, gerçek yarıçaplar, malzemeler, montajlar) kaybeder.

Web Sorunu: WebGL ve WebGPU motorları yalnızca nokta dizilerini, köşe noktalarını ve üçgen mesh’leri anlar. Tarayıcılar, parametrik NURBS denklemlerini saniyede 60 kare hızında yerel olarak değerlendiremez.

Bu nedenle, CAD’i bir web uygulamasına entegre etmek temelde bir tesselasyon ve işlem hattı sorunudur: matematiksel olarak kesin CAD katılarını, kritik mühendislik doğruluğunu kaybetmeden hafif, optimize edilmiş çokgen mesh’lere dönüştürmek.

2. Temel Mimari: Alım ve Dönüştürme Boru Hattı

200MB’lik bir STEP montajını istemci tarafında ayrıştırmaya çalışmak, kullanıcının tarayıcı sekmesini çökertir. Üretime hazır bir CAD işleme hattı, eşzamansız ve ayrık bir mimariye dayanır:

[Browser Client] 
       │ (Direct Upload via Presigned URL)
       ▼
[Cloud Storage: S3 / GCS] 
       │ (Event Trigger)
       ▼
[Message Queue: SQS / RabbitMQ] 
       │
       ▼
[Worker Nodes (Geometry Engine)]
       ├─ Format Parsing
       ├─ Tessellation & Meshing
       ├─ Decimation & Level-of-Detail (LOD)
       └─ Optimization
       │
       ▼
[Derived Output: glTF / GLB / Vector JSON]
       │
       ▼
[Client Web Viewer (Three.js / Babylon.js)]

Adım 1: Doğrudan Buluta Yükleme ile Güvenli Alım

Büyük CAD ikili dosyalarını çekirdek uygulama sunucunuz üzerinden yönlendirmeyin. Katı parçalı çoklu yükleme ile önceden imzalanmış S3 veya Google Cloud Storage yükleme URL’lerini kullanın. CAD montajları genellikle bir montaj (.sldasm) içinde birden fazla parça dosyasını (.sldprt) ya da .zip arşivlerini bir araya getirir; yükleme katmanınız çoklu dosya ve klasör alımını desteklemelidir.

Adım 2: Asenkron Dönüştürme İşçileri

Bir yükleme tamamlandığında, bir olay eşzamansız bir işçi havuzunu tetikler. CAD dönüşümleri CPU ve bellek yoğun olduğundan, işçilerinizi ölçeklenebilir hesaplama ortamlarında tutun (ör. AWS ECS, Kubernetes pod’ları veya özel hesaplama örnekleri).

Adım 3: Tesselleme ve Özellik Çıkarımı

İşçi dosyayı ayrıştırır, meta verileri (sınır kutuları, parça ağaçları, kütle özellikleri, katmanlar) çıkarır ve matematiksel yüzeyleri üçgenlere dönüştürür.

Adım 4: Web’e Hazır Standartlara Normalleştirme

Çıktı, glTF 2.0 (.glb)—çoğu zaman “3D’nin JPEG’i” olarak adlandırılan—veya özel uygulamalar için özelleştirilmiş ikili formatlara dönüştürülmelidir. 2D çizim verileri (.dwg/.dxf) için SVG gibi vektör formatlarına veya düz GeoJSON benzeri geometrilere dönüştürün.

3. Doğru Dönüştürme Motorunu Seçmek

Genellikle, arka uçta ayrıştırma ve tessellasyon işlemlerini yönetmek için üç seçeneğiniz vardır:

YaklaşımTipik AraçlarArtılarEksiler
Açık Kaynak Geometri ÇekirdekleriOpen CASCADE (OCCT), FreeCAD CLI, CadQueryİşlem başına lisans ücreti yok; tam veri kontrolü.Zor öğrenme eğrisi (C++); büyük montajlarda yavaş; manuel ayarlama gerektirir.
Ticari Başsız SDK’larTech Soft 3D (HOOPS), Spatial (ACIS), DatakitSahip olduğu özel formatlar için yerel destek (CATIA, Creo, SolidWorks); olağanüstü performans.Önemli kurumsal lisans maliyetleri.
Bulut Çeviri API’leriAutodesk Platform Services (Forge), ConvertigoHazır altyapı; yerleşik web görüntüleyici widget’ları; minimal bakım.Satıcı bağımlılığı; dosya başına işleme ücretleri; veriler özel sınırlarınızdan dışarı çıkar.

WebAssembly (Wasm) Ne Zaman Kullanılır

Hafif formatlar için (örneğin temiz .stl dosyaları veya basit 2D .dxf planları), arka uç kuyruklarını tamamen atlayabilirsiniz. Hafif C++ veya Rust ayrıştırıcılarını WebAssembly’ye derlemek, dosyaları doğrudan tarayıcıda Web Workers kullanarak okumanızı sağlar. Bu yaklaşımı tek parçalar için, 25 MB’nin altında tutarak istemci belleğini koruyun.

4. Web Performansı İçin 3D Geometriyi Optimize Etme

Ham tessellated CAD modeli kolayca milyonlarca poligon üretebilir ve tarayıcı kare hızlarını yavaşlatır. İşçi aşamasında optimizasyon zorunludur:

1. Uyarlanabilir Sapma (Teselleştirme Kontrolü)

Tekdüze alt bölünmeden kaçının. Kordal sapma ayarlarını kullanın: Düz yüzeyler çok az üçgen gerektirirken, sıkı yuvarlamalar ve radyal eğriler daha yüksek yoğunluk ister.

2. Ağ Azaltma ve LOD Oluşturma

Birden fazla Detay Seviyesi (LOD) oluşturun. Kullanıcı tüm makineyi görmek için uzaklaştırdığında, %80 daha az poligon içeren bir LOD renderleyin. Belirli bir cıvata veya rulmana yakınlaştırdığında, yüksek doğruluklu geometriyle değiştirin.

3. Draco ve Meshopt ile Ağ Sıkıştırma

Web çıktılarında her zaman geometri sıkıştırması uygulayın:

  • Google Draco: Dosya indirme boyutunu ağ üzerinden büyük ölçüde azaltır. Ancak, Draco modellerinin sıkıştırması açılması istemci CPU döngülerini tüketir.
  • Meshopt / EXT_meshopt_compression: Hızlı, yerel hızda WebAssembly sıkıştırma açma ile dengeli sıkıştırma sunar ve karmaşık montajların hızlı render edilmesi için idealdir.

4. Örnekleme

Üretim modellerinde vida, braket ve pim gibi parçalar onlarca kez tekrarlanır. Çeviri hattınızın yinelenen gövdeleri algılayıp örneklenmiş ağları (EXT_mesh_gpu_instancing) çıktığından emin olun. Bu, çizim çağrılarını yüzlerceden tek bir çağrıya indirger.

5. Tarayıcıda Renderleme: Ön Uç Mimarisi

İşçi optimize edilmiş bir .glb dosyası ürettiğinde, tarayıcı etkileşimi, incelemeyi ve ölçümü yönetir.

6. Bir Renderleme Motoru Seçme

  • Three.js: Endüstri standardı. Büyük ekosistem, hafif ve ürün yapılandırıcıları ve özel görüntüleyici UI’ları için özelleştirmesi kolay.
  • Babylon.js: Özellik açısından zengin, üretim seviyesinde bir motor; karmaşık PBR malzemeleri, fizik ve kurumsal iş akışları için kutudan çıkar çıkmaz destek sunar.
  • Autodesk Viewer / HOOPS Communicator: Yerleşik BIM/CAD özelliklerine (kesit düzlemleri, model ağaç hiyerarşileri, patlatılmış görünümler) sahip önceden paketlenmiş görüntüleyiciler, ancak kendi özel bulut arka uçlarına sıkı bir şekilde bağlıdır.

Temel Web CAD Görüntüleyici Özellikleri

Özel bir arayüz oluşturursanız, mühendislik kullanıcıları standart masaüstü etkileşimlerini bekleyeceklerdir:

  1. CAD-Style Orbit Controls: Masaüstü CAD araçları farklı fare eşlemeleri kullanır (ör. SolidWorks orta fare düğmesiyle döndürme; Revit Shift + orta fare düğmesi). Kullanıcıların kontrol şemalarını değiştirmesine izin verin.
  2. Interactive Bounding Box & Sectioning: Kullanıcıların katı bir montajın iç bileşenlerini dilimlemesine izin vermek için GL kırpma düzlemlerini kullanın.
  3. Hierarchy Tree (Scene Graph): Kullanıcıların belirli bileşenlerin veya alt montajların görünürlüğünü açıp kapatabilmesi için ebeveyn-çocuk montaj yapısını HTML/React içinde render edin.
  4. Doğru Ölçüm Araçları: Gerçek mesafeyi, yüzey alanını ve yarıçapı hesaplamak için köşe ve kenar döngülerine ışın atın.

6. Güvenlik ve Fikri Mülkiyet (IP) Koruması

CAD dosyaları hassas fikri mülkiyet içerir. Mühendislik verilerini halka açık tarayıcılara akıtmak, sıkı güvenlik kontrolleri gerektirir:

  • Yalnızca Ağ (Mesh) Teslimatı: Yerel B-Rep geometrisi yerine tessellated (döşeli) ağlar göndererek, ham parametrik matematiği doğal olarak korursunuz. Üçgenleştirilmiş bir yüzeyden yerel bir CAD modelini tersine mühendislik yapmak zordur ve kusurludur.
  • Akış Parça Şifrelemesi: Geometrileri, kısa ömürlü oturum tokenlarıyla kimlik doğrulanan şifreli ikili segmentler halinde teslim edin.
  • Geçici İşleme: Dönüştürme hattı kalıcı depolamaya yazdıktan hemen sonra geçici depolama ve işçi belleğini temizleyin.
  • Harici İzleyiciler İçin Geometri Basitleştirme: Dosyaları üçüncü taraf satıcılara veya halka açık izleyicilere gösteriyorsanız, web ağı oluşturulmadan önce iç bileşenleri (dişliler, bölmeler, gizli iç mekanizmalar) kaldıran bir dış kabuk algoritması çalıştırın.

Sonuç

CAD işleme entegrasyonu artık sadece kurumsal CAD satıcıları için ayrılmış deneysel bir özellik değil. Asenkron bulut çalışanları aracılığıyla alımı ayırarak, parametrik eğrileri optimize edilmiş çokgen ağlara dönüştürerek ve WebGL/WebGPU ön yüzlerini kullanarak, herhangi bir modern tarayıcı içinde hızlı, işbirlikçi mühendislik araçları sunabilirsiniz.

İyi tanımlanmış bir MVP ile başlayın: STEP gibi tek bir nötr format seçin, glTF çıktısına yönelmek için yerleşik bir ayrıştırıcıdan yararlanın ve Three.js ile render edin. Kullanıcı tabanınız genişledikçe, çoklu format dönüşüm hatları, uyarlanabilir LOD’lar ve özel mühendislik araçları ekleyin.

Sıkça Sorulan Sorular (SSS)

Q1. Modern web tarayıcıları ham STEP veya DWG dosyalarını arka uç dönüşümü olmadan yerel olarak açabilir mi? Hayır, tarayıcılar özel CAD formatları için yerel ayrıştırıcıya sahip değildir ve ya sunucu tarafı dönüşümü ya da WebAssembly tabanlı işleme ile glTF gibi üçgen ağ formatlarına dönüştürülmesini gerektirir.

Q2. 3D CAD verilerini verimli bir şekilde renderlemek için en iyi web formatı nedir? Meshopt veya Draco sıkıştırmalı ikili glTF (.glb), web tarayıcıları üzerinden yüksek performanslı 3D modeller sunmanın sektör standardıdır.

S3. Büyük CAD montajlarını, mobil cihazlarda milyonlarca poligonla nasıl yönetiyorsunuz? Detay Seviyesi (LOD) hiyerarşileri, agresif ağ azaltma ve örnekli renderleme uygulayarak GPU yalnızca görünen, sadeleştirilmiş geometrileri işler.

S4. Özel CAD fikri mülkiyeti, halka açık bir web sayfasında gösterildiğinde güvende mi? Evet, çünkü CAD modellerini yüzey ağlarına dönüştürmek, yerel parametrik geçmişi ve matematiksel yapı verilerini ortadan kaldırır, böylece tersine mühendislik kolaylaşmaz.

S5. Açık kaynak motorları (Open CASCADE gibi) mı yoksa ticari bulut çeviri API’lerini mi kullanmalıyım? Open CASCADE, yerinde gizlilik ve sıfır lisans ücreti gerektirdiğinizde en iyisidir, ticari API’ler ise Autodesk Platform Services gibi, hızlı pazara giriş ve daha geniş yerel format desteği için idealdir.

Ayrıca Bakınız

CAD Dosya Biçimleri FileFormat.com’da

CAD dosya biçimleriyle çalışmak için Açık Kaynak API’leri

AutoCAD Olmadan CAD Otomasyonu: Geliştiriciler İçin En İyi Açık Kaynak Çerçeveler

Dosya Formatı Forumları – Sorgularınızı dosya formatı forumlarında gönderin ve dosya formatı uzmanları ve topluluk kullanıcılarından faydalı bilgiler alın

Dosya Formatı Wiki – Çeşitli dosya formatları hakkında bilgi için dosya formatı kategorilerini keşfedin

STEP vs IGES Açıklaması: Modern ve Eski CAD Değişim Formatlarını Karşılaştırma