Англійська для розробників Three.js
Словник для розробників, які створюють 3D-графіку за допомогою Three. js — сцени, сітки, геометрії, матеріали, камери і виклики draw — для команд, які обговорюють відтворення WebGL англійською мовою.
Three.js — це бібліотека JavaScript, яка обгортає низькорівневий API WebGL у графічний опис сцени, який ви можете розглядати — об’єкти, світла і камери замість сирих буферів і шаблонів для створення відтінків. Його словниковий запас в значній мірі запозичений з комп’ ютерної графіки і ігрових рушіїв, тому багато з цих термінів буде незнайомим навіть досвідченим веб- розробникам. Якщо ваша команда створює 3D- візуалізації, налаштування продуктів або WebGL, ось англійська версія, яка вам знадобиться для обговорення відтворення і перегляду швидкодії.
Сценарій фільму
** Сцена ** — кореневий контейнер, у якому містяться всі об’ єкти, світло і допоміжні елементи, які ви бажаєте відтворити; на екрані нічого не буде показано, якщо його не буде додано до сцени.
- “Модель завантажується без помилок, але ніколи не з’ являється — перевірте, чи її дійсно було додано до сцени, чи вона просто сидить у пам’ яті без приєднання.” *
** Меша** — поєднання геометрії (форми) і матеріалу (вигляду), яке фактично відтворює Three. js; фундаментальна видима одиниця у сцені.
“Ми створюємо нову сітку на частинку, що занадто дорого — переключаємося на InstancedMesh, щоб графічний процесор міг намалювати їх всі за один виклик.”
** Графік сцени ** — ієрархічне дерево об’ єктів, у якому кожен дочірній об’ єкт успадковує перетворення (позицію, обертання, масштаб) свого батька.
- “Родительські сітки колеса до об’ єкта тіла автомобіля — таким чином весь графік сцени обертається разом, замість того, щоб ми оновлювали чотири перетворення вручну.” *
Геометрія і матеріали
Geometry
** Геометрія ** визначає форму об’ єкта — первинні позиції вершин, норми і ультрафіолетові координати, без відомостей про колір або текстуру.
- « Геометрія не порушена; проблема полягає у матеріалі — норми виглядають зворотними, отже освітлення обчислюється назад ». *
Material
** матеріал ** визначає, як поверхня геометрії реагує на світло — колір, жорсткість, металічність, а також який затінювач використовується під капотом.
“Зміна з
MeshBasicMaterialнаMeshStandardMaterialвиправила плоский, неосвітлений вигляд — тепер він фактично реагує на освітлення сцени.”
UV-картографування
** Відображення за допомогою ультрафіолету ** — це спосіб обгортання двовимірного зображення текстури на поверхню тривимірної геометрії.
- « Текстура виглядає розтягнутою на полюсах сфери — це проблема з відображенням ультрафіолету, а не проблема з роздільною здатністю текстури. » *
Камера і рендерер
** Камера ** — об’ єкт, який визначає точку зору і проекцію (перспективну або ортографічну), які використовуються для відтворення сцени у 2- вимірне зображення.
- “Ми використовуємо перспективну камеру для переглядача продукту, але орфографічну для режиму технічного проекту — беззв’ язок вигляду дійсно важливий там.” *
** Рендерер ** — об’ єкт (зазвичай WebGLRenderer ), який відповідає за отримання сцени і камери, а також за фактичне малювання пікселів на полотно кожного кадру.
“Програма відтворення налаштована на неправильне співвідношення пікселів на екранах з високою роздільною здатністю — саме тому краї виглядають розмитими на екранах Retina.”
** Frustum ** — об’ єкт у формі піраміди, який представляє все, що можна побачити за допомогою камери; об’ єкти поза цим об’ єктом не слід малювати.
- “Ми додали фрустум- вилучення, щоб об’ єкти за камерою або далеко за екраном взагалі пропускали виклик рисунка — це вдвічі скоротило час кадрування.” *
Використання лексики
** виклик малювання ** — окрема інструкція, надіслана до графічного процесора для відтворення пакету геометричних об’ єктів; надто багато викликів малювання на кадр є поширеним джерелом збоїв у швидкодії.
“Ми перейшли від 4000 викликів до близько 200 об’єднуючи статичні геометрії — частота кадрів на мобільному телефоні нарешті стала використовуватися.”
** Uniform shader ** — значення, яке передається з JavaScript до програми для створення затінку і залишається постійним у всіх вершинах/ пікселях для виклику на рисування, наприклад, значення кольору або часу.
“Ефект пульсуючого світіння повністю керується
time- уніформою, яку ми оновлюємо кожен кадр — логіка анімації на вершину не потрібна.”
** LOD (рівень деталізації) ** — заміна моделі з високим рівнем деталізації на простішу, оскільки вона віддаляється від камери, щоб зменшити вартість відтворення.
- “Ми додали ланцюжок LOD для місцевості — повний опис зблизька, десяткова сітка за 50 метрів. Віддалені пагорби не потребують 10 000 трикутників
Поширені помилки
| Mistake | Correction |
|---|---|
| Calling any 3D object a “mesh” | Only geometry + material combos rendered as surfaces are meshes — lights and cameras are objects, not meshes. |
| Saying “the model is lagging” | Be specific: is it a draw call bottleneck, a shader compile stall, or a CPU-side animation loop issue? |
| Confusing “geometry” with “material” | Geometry is shape; material is appearance. A wireframe bug is usually a geometry issue, not a material one. |
| Treating frustum culling as automatic for everything | Three.js culls per-object by default, but custom shaders or instanced meshes sometimes need it handled manually. |
Практичні вправи
- Поясніть двома реченнями різницю між геометрією і матеріалом для тих, хто не має досвіду роботи з 3D- графікою.
- Написати короткий опис PR для заміни окремо відтворених сіток частинок на
InstancedMesh, щоб зменшити кількість викликів для відтворення. - Написати проект повідомлення для дизайнера, у якому буде пояснено, чому текстура виглядає розтягнутою на кривій поверхні (відображення за допомогою ультрафіолету), не використовуючи слово « вада »
Зв’язані ресурси
На практиці: Навігація та співпраця
Як розробник, що працює над будь-яким проектом, особливо таким складним, як сцена Three.js, ви неминуче зустрінете зворотній зв’язок - не тільки від вашої безпосередньої команди, але і від старших розробників або навіть зовнішніх співробітників. Спосіб, у який ви відповідаєте на ці коментарі і висловлюєте їх, є ключовим для ефективної співпраці і забезпечення якості вашої роботи. Часто, це не що сказано, а як це сказано, що має найбільше значення, особливо при спілкуванні англійською.
Поширеним сценарієм є отримання коментаря перегляду коду, наприклад: « Цей geometry виглядає трохи розрідженим; чи не могли б ви розглянути можливість використання більш детальної сітки для символу? Можливо, вам слід дослідити деякі з попередньо створених ресурсів або розбити модель на менші частини, щоб оптимізувати продуктивність. » Ключовим у цьому випадку є не лише розуміння * технічної * пропозиції — поліпшення щільності геометрії — але і професійне оформлення вашої відповіді. Просте, захисне “Це не моя проблема” не вирішить проблему. Замість цього, відповідь на кшталт: «Дякую за позначення цього! Я спочатку хотів легку модель, щоб зберегти високу продуктивність сцени, але ви підняли хороший момент про потенційну оптимізацію. Дозвольте мені дослідити деякі попередньо побудовані активи і побачити, чи можемо ми збалансувати візуальну вірність зі швидкістю відтворення.” демонструє залученість, бажання вчитися і визнає цінність зворотнього зв’язку. Аналогічно, в розмовах Slack, де обговорюються описи PR, чітка і точна мова є найважливішою. Недосконалої назви « Виправлено ваду » буде недостатньо; вам слід пояснити, * що * було виправлено, * чому * це було пошкоджено, і * як * ваше рішення вирішує проблему.
Інша поширена ситуація включає обговорення технічних деталей з колегою під час сеансу парного програмування. Ви можете пояснити свій підхід до створення нетипового матеріалу: « Я використовую THREE.ShaderMaterial, щоб отримати цей конкретний вигляд — по суті, я створив цей шаблон, який обчислює колір на основі розташування вершини у 3D просторі. » Хоча це технічно правильно, але може звучати незграбно. Більш зрозумілим варіантом може бути таке: « Я використовую цей шаблон для динамічного керування виглядом матеріалу; шаблон реагує на розташування об’ єкта у сцені, створюючи цей ефект зміни кольору ». Використання термінології на зразок « шаблон » і пояснення * ефекту *, а не лише технічного реалізування допоможе вашому колегі зрозуміти контекст і мету.
Нарешті, пам’ ятайте, що коротка документація є життєво важливою для підтримки, особливо при роботі зі складними проектами Three. js. Чисті описи змінних, функцій і навіть коментарів у коді сприяють спільному розумінню між членами команди.
// Example: Optimizing geometry using THREE.SimplificationParams
const simplification = new THREE.SimplificationParams();
simplification.iterations = 1; // Adjust for desired level of detail reduction
scene.traverse(object => {
if (object instanceof THREE.Mesh) {
object.geometry.computeBoundsBox();
object.geometry.optimize(() => {}); // Call optimize with a callback to handle potential errors
}
});Цей приклад демонструє використання THREE.SimplificationParams для зменшення складності сітки — поширений спосіб поліпшення продуктивності, який ви можете обговорити, коли ви звертаєтеся до користувачів з питаннями щодо часу завантаження сцени або проблем з відтворенням. У коментарі підкреслюється важливість ретельного розгляду під час оптимізації і надає конкретний інструмент для її досягнення.