Підготовка до візуалізації в 3D
Перше, що вам знадобиться для використання WebGL для візуалізації в 3D - це елемент canvas. Фрагмент на HTML нижче містить елемент canvas і визначає обробник події onload. яке ініціалізує наш контекст WebGL.
Підготовка контексту WebGL
Перше, що ми тут робимо - отримуємо посилання на елемент canvas, поміщаємо її в змінну canvas. Очевидно, що якщо вам не потрібно багато разів отримувати посилання на canvas, ви повинні уникнути збереження цього значення глобально, а тільки зберегти її в локальній змінній або в поле об'єкта.
Як тільки ми отримали посилання на canvas, ми викликаємо функцію initWebGL (); Цю функцію ми визначаємо негайно, її робота - форматувати контекст WebGL.
Все перераховане вище необхідно зробити тільки для початкової ініціалізації. Трохи пізніше ми побачимо роботу по візуалізації тривимірних об'єктів.
Створення контексту WebGL
Функція initWebGL () виглядає наступним чином:
Щоб отримати контекст WebGL для canvas, ми запитуємо у елемента canvas контекст іменований як "webgl". Якщо дана спроба завершується невдало, ми намагаємося отримати контекст, іменований як "experimental-webgl". Якщо дана спроба також завершується невдало, ми відображаємо вікно з попередженням, що дозволяє користувачеві зрозуміти, що його браузер не підтримує WebGL. Це все, що необхідно зробити. На даному етапі ми будемо мати в змінної gl або значення null (що означає, що контекст WebGL не доступний), або посилання на контекст WebGL в якому, ми будемо виробляти отрисовку.
Зверніть увагу: Контекст, іменований як "experimental-webgl" - це тимчасове ім'я для контексту, що використовується на час процесу розробки специфікації. Після того, як специфікація буде повністю розроблена буде використовуватися тільки ім'я контексту "webgl".
На даному етапі цього коду достатньо, щоб успішно ініціалізувати контекст WebGL, і ви побачите порожній чорний блок, готовий до заповнення контентом.
Якщо ваш браузер підтримує WebGL, то ви можете подивитися результат виконання наведеного вище коду, клацнувши по цьому посиланню.
Зміна розміру контексту WebGL
Новий контекст WebGL матиме можливість завдання розмірів області відображення в момент отримання контексту шляхом завдання висоти і ширини елемента canvas, без використання CSS. Редагування стилю елемента canvas буде змінювати його відображається розмір, без зміни розмірів області відтворення. Редагування атрибутів ширини і висоти елемента canvas після створення контекст не буде також змінювати число пікселів для відтворення. Щоб змінити розмір області відтворення, з якої WebGL виробляє роботу, наприклад, коли користувач змінює розмір вікна на весь екран або коли вам необхідно міняти налаштування графіки в самому додатку, вам необхідно викликати контекстну функцію WebGL viewport (). щоб підтвердити зміни.
Щоб змінити розмір області відтворення контексту WebGL зі змінними gl і canvas. що використовуються в прикладі вище:
Елемент canvas буде змінювати розмір, в разі, якщо його отрисовать з іншими розмірами області відтворення, ніж ті, що вказані в його стилі CSS, згідно з якими він займає місце на екрані. Зміна розміру за допомогою CSS найбільш корисно для збереження ресурсів, отрісовивая з низьким дозволом і дозволяючи браузеру розтягувати отриманий результат; стискати можливо при використанні ефекту надлишкової вибірки згладжування (super sample antialiasing - SSAA) (призводить до менш прийнятних результатів і серйозних втрат продуктивності). У більшості випадків краще покладатися на множинну вибірку згладжування (MSAA) і на реалізацію алгоритмів фільтрації текстур, які підтримуються браузером користувача, ніж робити те ж саме за допомогою грубої сили і сподіватися, що алгоритм масштабування зображень, використовуваний браузером, видасть гарний результат.