Вы можете нарисовать твердотельная модель цвета не достаточна для того, чтобы представить более реалистичную модель, мы также должны рисовать текстуры карты модели.
Потеря связи
GPU как общественный ресурс, он будет использоваться несколькими процессами одновременно, при отсутствии достаточных ресурсов (например, ПК или мобильный телефон при входе в режим сна или пробуждения перед государством), мы потеряем захват контекста ситуации, обеспечить устойчивость бега, мы имеем дело с ним после потери контекста.
Холст дает нам два события, чтобы слушать, в контексте утраты и восстановления, см специфических использовать следующий код:
. 1 вар Холст = document.getElementById ( "myGLCanvas" ); 2 // слушатель отсутствует контекст события . 3 canvas.addEventListener ( "webglcontextlost", функция (событие) { . 4 // отменить поведение по умолчанию 5. В event.preventDefault (); . 6 / / коды остановки продолжить рисунок 7. }, ложь ); . 8 // прослушивания восстановления контекста событий . 9 canvas.addEventListener ( "webglcontextrestored", функция () { 10 // повторная инициализация кода 11 // Обратите внимание , что с помощью Canvas getContext метод получения объекта контекста не требуется повторное обнаружение, объект контекста может продолжать использовать ранее приобретенные 12 // возобновляет рисование код 13 }, ложь );
Имитация потери контекста
Мы хотим проверить потери контекста обычного кода обработки, необходимо ли, чтобы вызвать потерю контекста, мы можем использовать следующую JS библиотеку для моделирования потери контекста:
https://github.com/KhronosGroup/WebGLDeveloperTools
Можно обратиться к его ЦСИ \ Debug \ выплавляемым контекстно-имитатор-test.html примерным каталог, используемый.
2D отображение и отображение куба
Мы должны быть прикреплены к 2D-изображения на 3D-модели, нужно использовать 2D-изображений с помощью УФ-координат для определения точки 3D поверхности может соответствовать одному пикселю на 2D изображения или множества пикселей (образцов), следующий УФ координат система координат:
(S, соответствующие U, T, соответствующий V), диапазон [0-1].
карта Куб 2D изображения содержит шесть отображения, отображение окружающей среды, как правило, используется для реализации или реализовать среды, отражающими следующие примеры приложения могут демонстрировать хорошие экологические соображения:
https://threejs.org/examples/#webgl_materials_envmaps
В дополнение к отображению куба он также широко используется для создания окна неба (Skybox).
размер текстуры
Мы представили на высоту и ширину размера изображений GPU должен быть 2 ^ п, а именно (2,4,8,16,32,64,128,256 ...), но в WebGL и OpenGL ES 2.0, мы можем также использовать аспект не-п-й степени 2 фотографий, которые NPOT (не сила двух);
Если мы используем п-ю степень 2 не-изображения, будут некоторые из следующих ограничений:
- Вы не можете использовать отображение MIPMAP;
- Выборка текстурной карты в шейдере: фильтрация текстур только с ближайшей точкой или линейным, повторяющимся узор не может быть использован.
Конкретная взгляд: https://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences
Вдоль оси у
Давайте посмотрим на разницу между системой координат системы координат DOM объекта изображения и WebGL текстур:
Может быть найден, две оси у системы координат как раз наоборот, для того, чтобы привести его в соответствие с системой координат, мы должны использовать следующий код, чтобы перевернуть ось у:
gl.pixelStorei (gl.UNPACK_FLIP_Y_WEBGL, правда);
Texture Filtering
Наша текстура изображения и размер области, чтобы быть оказанной не всегда точно так же, когда текстура меньше, чем область, нуждающимся в оказывающем расширении текстуры, это больше, чем когда область рендеринга текстур нуждаются в Texture сокращения;
MIPMAP
Когда текстуры растяжения слишком большой и слишком большое сокращение, будет выглядеть размытым и насечкой для того, чтобы решить эту проблему, мы можем использовать наборы текстурных размер, чтобы соответствовать для визуализации областей разных размеров, графический процессор будет автоматически выбран в зависимости от размера области визуализации;
преимущество
- Когда модель как от или ближе к камере, дисплей будет более естественным;
- Повышение эффективности рендеринга;
недостаток
- Использование памяти будет увеличиваться по мере одной картины 1/3;
Создать метод MIPMAP
- После подачи текстуры, вызовите метод gl.generateMipmap WebGL автоматически генерирует MIPMAP указана текстура;
- После прохождения через внешний инструмент, непосредственно генерировать все MIPMAP хорошее, ручное представление, как правило, метод, используемый для особых ситуаций, таких, как различные уровни MIPMAP несовместимым изображения текстуры;
Упаковка текстурных координат
- GL_REPEAT: выходит за рамки координат текстуры игнорируются целая часть, образуют повторяющийся эффект.
- GL_MIRRORED_REPEAT: выходит за рамки координат текстуры игнорируются целая часть, инвертировать нечетное число, но когда целая часть выполнена в виде зеркального эффекта.
- GL_CLAMP_TO_EDGE: за рамки координат текстуры обрезаются до 0 и 1, эффект формирования текстуры, проходящий край.
activeTexture 和 bindTexture
gl.activeTexture
Активация операция текущего отображения, последующий код обозначен текстура, который работает, параметр является перечислением gl.TEXTURE0 gl.TEXTURE7 (См максимальных gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS, минимум 8);
BindTexture позже называет связать текущую операцию отображения, если нет вызова для вызова bindTexture activeTexture, активировать по умолчанию текстурник номер 0 (будут оценены по умолчанию, что вызов gl.activeTexture (gl.TEXTURE0) код);
gl.bindTexture
Связующие определяет текстуру к блоку текстуры активации activeTexture, и может указать тип текстуры;
Более подробную информацию можно найти здесь: https://www.jianshu.com/p/1829b4acc58d
примеров
https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_4/index.html