{"id":90100,"date":"2026-10-14T12:15:00","date_gmt":"2026-10-14T10:15:00","guid":{"rendered":"https:\/\/codescriptum.pl\/blog\/model-3d-z-cad-za-ciezki-do-przegladarki\/"},"modified":"2026-10-18T20:02:10","modified_gmt":"2026-10-18T18:02:10","slug":"model-3d-z-cad-za-ciezki-do-przegladarki","status":"publish","type":"post","link":"https:\/\/codescriptum.pl\/blog\/model-3d-z-cad-za-ciezki-do-przegladarki\/","title":{"rendered":"Model 3D z programu CAD jest za ci\u0119\u017cki do konfiguratora w przegl\u0105darce - jak go przygotowa\u0107"},"content":{"rendered":"<p>Model z programu CAD jest za ci\u0119\u017cki do konfiguratora, bo powsta\u0142 do produkcji, a nie do wy\u015bwietlania: zawiera ka\u017cd\u0105 \u015brub\u0119, otw\u00f3r i spaw, a przegl\u0105darka na telefonie musi to wszystko pobra\u0107, zapisa\u0107 w pami\u0119ci karty graficznej i narysowa\u0107 przy ka\u017cdym obrocie. Rozwi\u0105zaniem nie jest mocniejszy serwer, tylko osobna, lekka wersja modelu w formacie glTF\/GLB albo model budowany w kodzie z parametr\u00f3w produktu.<\/p>\n<h2>Po czym pozna\u0107, \u017ce model z CAD jest za ci\u0119\u017cki?<\/h2>\n<p>Najpro\u015bciej po zachowaniu konfiguratora na telefonie \u015bredniej klasy. Je\u015bli model \u0142aduje si\u0119 wyra\u017anie d\u0142u\u017cej ni\u017c reszta strony, a obracanie przycina, przyczyn\u0105 jest zwykle sam plik, a nie kod konfiguratora.<\/p>\n<ul>\n<li>plik modelu wa\u017cy wi\u0119cej ni\u017c wszystkie zdj\u0119cia na stronie razem, cho\u0107 produkt jest prosty, np. gara\u017c albo wiata,<\/li>\n<li>na komputerze konfigurator dzia\u0142a p\u0142ynnie, a na telefonie przycina albo karta prze\u0142adowuje si\u0119 w trakcie,<\/li>\n<li>narz\u0119dzia przegl\u0105darki pokazuj\u0105 bardzo du\u017c\u0105 liczb\u0119 tr\u00f3jk\u0105t\u00f3w i osobnych obiekt\u00f3w w scenie,<\/li>\n<li>po zmianie koloru albo wymiaru obraz zatrzymuje si\u0119 na chwil\u0119.<\/li>\n<\/ul>\n<h2>Dlaczego model z programu CAD nie nadaje si\u0119 wprost do przegl\u0105darki?<\/h2>\n<p>Bo program konstrukcyjny opisuje produkt z dok\u0142adno\u015bci\u0105 potrzebn\u0105 w warsztacie, a przegl\u0105darka potrzebuje tylko tego, co wida\u0107 z kilku metr\u00f3w. Ka\u017cdy detal, kt\u00f3rego klient nie zobaczy, i tak trzeba pobra\u0107, rozpakowa\u0107 i narysowa\u0107.<\/p>\n<h3>Ka\u017cda \u015bruba i ka\u017cdy otw\u00f3r<\/h3>\n<p>Pliki STEP, IGES czy eksporty z program\u00f3w do konstrukcji stalowych zawieraj\u0105 wkr\u0119ty, nakr\u0119tki, otwory monta\u017cowe, uszczelki i \u0142\u0105czniki. Przy hali stalowej to ogromna liczba drobnych cz\u0119\u015bci na ramach, p\u0142atwiach i ryglach. Klient ogl\u0105da bry\u0142\u0119, kolor, dach i bramy, a \u017cadnej z tych \u015brub nie rozr\u00f3\u017cni na ekranie telefonu.<\/p>\n<h3>Krzywizny zamienione na tr\u00f3jk\u0105ty<\/h3>\n<p>Przegl\u0105darka nie rysuje powierzchni opisanych matematycznie, tylko siatk\u0119 tr\u00f3jk\u0105t\u00f3w. Przy eksporcie ka\u017cdy otw\u00f3r, zaokr\u0105glenie i przet\u0142oczenie blachy trapezowej zamienia si\u0119 w g\u0119st\u0105 siatk\u0119, a domy\u015blne ustawienia eksportu daj\u0105 zwykle dok\u0142adno\u015b\u0107 potrzebn\u0105 do produkcji, a nie do ekranu.<\/p>\n<h3>Ukryte cz\u0119\u015bci i mn\u00f3stwo osobnych obiekt\u00f3w<\/h3>\n<p>Model z\u0142o\u017ceniowy zawiera elementy schowane wewn\u0105trz innych: kotwy, wzmocnienia pod blach\u0105, wewn\u0119trzne cz\u0119\u015bci zamk\u00f3w i zawias\u00f3w. Do tego ka\u017cdy element jest osobnym obiektem z w\u0142asnym materia\u0142em, a ka\u017cdy taki obiekt to osobne polecenie rysowania dla karty graficznej. Pliki BIM w formacie IFC dok\u0142adaj\u0105 jeszcze dane, kt\u00f3re w konfiguratorze s\u0105 zb\u0119dne, np. w\u0142a\u015bciwo\u015bci materia\u0142owe i opisy element\u00f3w.<\/p>\n<h3>Jednostki, osie i materia\u0142y<\/h3>\n<p>Format glTF przyjmuje metry i o\u015b Y skierowan\u0105 w g\u00f3r\u0119, a programy CAD cz\u0119sto pracuj\u0105 w milimetrach i z osi\u0105 Z w g\u00f3r\u0119. \u0179le przeliczony model jest tysi\u0105c razy za du\u017cy albo le\u017cy na boku. Materia\u0142y z CAD rzadko maj\u0105 parametry potrzebne do realistycznego wy\u015bwietlania, wi\u0119c i tak trzeba je przygotowa\u0107 od nowa jako materia\u0142y PBR.<\/p>\n<h2>Jak przygotowa\u0107 model z CAD do konfiguratora 3D?<\/h2>\n<p>Model z CAD traktuj jako \u017ar\u00f3d\u0142o wymiar\u00f3w, a do konfiguratora przygotuj osobn\u0105, uproszczon\u0105 wersj\u0119 w formacie GLB. Poni\u017cej najwa\u017cniejsze techniki, od tych, kt\u00f3re zwykle daj\u0105 najwi\u0119cej.<\/p>\n<table>\n<thead>\n<tr>\n<th>Technika<\/th>\n<th>Co daje<\/th>\n<th>Przyk\u0142ad<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Usuni\u0119cie niewidocznych cz\u0119\u015bci<\/td>\n<td>Mniej geometrii do pobrania i rysowania<\/td>\n<td>\u015aruby, kotwy, wn\u0119trza zamk\u00f3w, wzmocnienia pod blach\u0105<\/td>\n<\/tr>\n<tr>\n<td>Uproszczenie geometrii<\/td>\n<td>Mniej tr\u00f3jk\u0105t\u00f3w przy podobnym wygl\u0105dzie<\/td>\n<td>Przet\u0142oczenia blachy jako tekstura z map\u0105 normalnych zamiast pe\u0142nej siatki<\/td>\n<\/tr>\n<tr>\n<td>\u0141\u0105czenie obiekt\u00f3w<\/td>\n<td>Mniej polece\u0144 rysowania<\/td>\n<td>Elementy w tym samym materiale jako jedna siatka<\/td>\n<\/tr>\n<tr>\n<td>Instancje<\/td>\n<td>Jeden model rysowany wiele razy naraz<\/td>\n<td>P\u0142atwie, rygle, s\u0142upki ogrodzenia, arkusze blachy trapezowej<\/td>\n<\/tr>\n<tr>\n<td>Kompresja Draco lub Meshopt<\/td>\n<td>Mniejszy plik geometrii do pobrania<\/td>\n<td>Ca\u0142y model zapisany jako GLB<\/td>\n<\/tr>\n<tr>\n<td>Tekstury KTX2<\/td>\n<td>Mniej pami\u0119ci karty graficznej na telefonie<\/td>\n<td>Faktura blachy, drewna, pod\u0142o\u017ca pod obiektem<\/td>\n<\/tr>\n<tr>\n<td>Poziomy szczeg\u00f3\u0142\u00f3w (LOD)<\/td>\n<td>Prostsza wersja, gdy obiekt jest daleko<\/td>\n<td>Widok ca\u0142ej hali z du\u017cej odleg\u0142o\u015bci<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Instancje maj\u0105 najwi\u0119ksze znaczenie przy halach stalowych i ogrodzeniach, w kt\u00f3rych te same elementy powtarzaj\u0105 si\u0119 dziesi\u0105tki razy. Zamiast zapisywa\u0107 ka\u017cd\u0105 p\u0142atew jako osobn\u0105 kopi\u0119 geometrii, konfigurator przechowuje jeden model i list\u0119 pozycji, a karta graficzna rysuje wszystkie kopie w jednym poleceniu. W three.js s\u0142u\u017cy do tego InstancedMesh, a w formacie glTF rozszerzenie EXT_mesh_gpu_instancing.<\/p>\n<p>Kompresja Draco zwykle mocniej zmniejsza plik geometrii, a Meshopt szybciej si\u0119 rozpakowuje. Obie wymagaj\u0105 dekodera w przegl\u0105darce, wi\u0119c warto por\u00f3wna\u0107 je na w\u0142asnym modelu i patrze\u0107 na czas pojawienia si\u0119 modelu na telefonie, a nie tylko na rozmiar pliku. Tekstury KTX2 pozostaj\u0105 skompresowane tak\u017ce w pami\u0119ci karty graficznej, czego nie daj\u0105 pliki JPG i PNG. Ca\u0142o\u015b\u0107 mo\u017cna przygotowa\u0107 np. narz\u0119dziem glTF-Transform.<\/p>\n<p>Od producenta potrzebne s\u0105 zwykle: plik CAD lub rysunki z wymiarami, przekroje profili, rodzaje blach i pokry\u0107, zdj\u0119cia detali z bliska oraz pr\u00f3bki kolor\u00f3w. Lepiej przekaza\u0107 je na starcie w komplecie, bo brak rysunku bramy czy zdj\u0119cia obr\u00f3bki potrafi zatrzyma\u0107 przygotowanie modelu, a dorabianie detali po fakcie oznacza ponown\u0105 optymalizacj\u0119 ca\u0142ego pliku.<\/p>\n<h2>Kiedy lepiej zbudowa\u0107 model w kodzie, zamiast konwertowa\u0107 CAD?<\/h2>\n<p>Gdy produkt zmienia wymiary. Je\u015bli klient wpisuje szeroko\u015b\u0107, d\u0142ugo\u015b\u0107 i wysoko\u015b\u0107, model parametryczny budowany w kodzie z regu\u0142 produktu jest l\u017cejszy i \u0142atwiejszy w utrzymaniu ni\u017c zestaw przekonwertowanych plik\u00f3w dla kolejnych rozmiar\u00f3w.<\/p>\n<p>Przy hali stalowej konfigurator mo\u017ce ustawi\u0107 ramy w zadanym rozstawie, doda\u0107 p\u0142atwie i rygle jako instancje i pokry\u0107 \u015bciany blach\u0105 o d\u0142ugo\u015bci wyliczonej z wymiar\u00f3w. Pliki z CAD przydaj\u0105 si\u0119 wtedy jako \u017ar\u00f3d\u0142o przekroj\u00f3w profili, rozstaw\u00f3w i detali, a gotowe modele GLB zostaj\u0105 tylko dla element\u00f3w o sta\u0142ej formie, np. bram, drzwi, okien i \u015bwietlik\u00f3w. Jak takie podej\u015bcie wygl\u0105da przy obiektach wielkogabarytowych, pokazujemy na stronie <a href=\"https:\/\/codescriptum.pl\/konfigurator-3d-hal\/\">konfiguratora 3D hal stalowych<\/a>.<\/p>\n<h2>Co sprawdzi\u0107 przed wgraniem modelu? Lista kontrolna<\/h2>\n<ul>\n<li>model nie zawiera \u015brub, kotew ani cz\u0119\u015bci schowanych wewn\u0105trz innych,<\/li>\n<li>jednostk\u0105 s\u0105 metry, o\u015b Y wskazuje g\u00f3r\u0119, a punkt zero le\u017cy na poziomie pod\u0142o\u017ca,<\/li>\n<li>elementy w tym samym materiale s\u0105 po\u0142\u0105czone, a powtarzalne zapisane jako instancje,<\/li>\n<li>plik jest w formacie GLB z kompresj\u0105 Draco lub Meshopt,<\/li>\n<li>tekstury maj\u0105 umiarkowan\u0105 rozdzielczo\u015b\u0107 i s\u0105 zapisane w KTX2, a kolory w sRGB,<\/li>\n<li>materia\u0142y maj\u0105 ustawion\u0105 chropowato\u015b\u0107 i metaliczno\u015b\u0107,<\/li>\n<li>model dzia\u0142a p\u0142ynnie na telefonie \u015bredniej klasy, nie tylko na komputerze.<\/li>\n<\/ul>\n<div class=\"csb-note csb-note--tip\">\n<p>Ustal na pocz\u0105tku, kto przygotowuje lekk\u0105 wersj\u0119 modelu i do kogo nale\u017c\u0105 pliki \u017ar\u00f3d\u0142owe. Gdy produkt si\u0119 zmieni, poprawka zaczyna si\u0119 od pliku CAD, a lekka wersja powinna da\u0107 si\u0119 odtworzy\u0107 wed\u0142ug tej samej, spisanej procedury.<\/p>\n<\/div>\n<p>Modele, tekstury i spos\u00f3b ich \u0142adowania planujemy razem z ca\u0142ym wdro\u017ceniem <a href=\"https:\/\/codescriptum.pl\/konfigurator-3d\/\">konfiguratora 3D na stron\u0119<\/a>. Ten problem jest jednym z naszej listy <a href=\"\/blog\/50-problemow-z-konfiguratorem-3d\/\">50 problem\u00f3w z konfiguratorem 3D produktu<\/a>, w kt\u00f3rej opisujemy te\u017c tekstury, kolory i dzia\u0142anie konfiguratora na telefonach.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Model z programu CAD jest za ci\u0119\u017cki do konfiguratora, bo powsta\u0142 do produkcji, a nie do wy\u015bwietlania: zawiera ka\u017cd\u0105 \u015brub\u0119, otw\u00f3r i spaw, a przegl\u0105darka na telefonie musi to wszystko\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[102],"tags":[],"class_list":["post-90100","post","type-post","status-publish","format-standard","hentry","category-konfiguratory-3d"],"_links":{"self":[{"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/posts\/90100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/comments?post=90100"}],"version-history":[{"count":1,"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/posts\/90100\/revisions"}],"predecessor-version":[{"id":90131,"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/posts\/90100\/revisions\/90131"}],"wp:attachment":[{"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/media?parent=90100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/categories?post=90100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codescriptum.pl\/blog\/wp-json\/wp\/v2\/tags?post=90100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}