Установка Viewport

Отрисовка примитивов с помощью методов gl.drawElements или gl.drawArrays еще не гарантирует, что эти примитивы мы сможем лицезреть на экране. Для рисования нам нужна некая область, где будет происходить отрисовка. Наличие просто элемента canvas еще недостаточно, чтобы произвести отрисовку.

Для установки области рисования нам надо настроить viewport контекста WebGL. Во всех ранее использованных примерах настройка viewport была однотипна: сначала мы получали размеры области элемента canvas, которой представляет собой полотно рисования:

if(gl){
	gl.viewportWidth = canvas.width;
	gl.viewportHeight = canvas.height;
		
	initShaders();
	//.................

Свойства gl.viewportWidth и viewportHeight позволяли настроить ширину и высоту области рисования. Затем в функции отрисовки draw перед рисованием примитивов происходила установка области рисования: gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);. Таким образом, система знала, какую часть элемента canvas надо использовать для рисования, а gl.viewport указывает на левый нижний угол этой области, а также ее ширину и высоту

Это распространенный способ установки viewport. Однако, это не значит, что надо обязательно делать так и никак иначе. Мы вполне можем задать другую область рисования: gl.viewport(150, 200, 50, 50);:

В этом случае вся отрисовка будет идти на указанной нами области.