Анимированные текстуры
See the full project.
It can be very useful to animate a material that has been applied to a surface. The example shown here is scrolling a texture to simulate some movement.
Прокрутка материалов с картой отступа
Квадратная поверхность в примере использует скрипт scrolling-texture.js
, чтобы непрерывно менять отступ UV каждый кадр. Например, это может быть использовано для анимация текущей воды. Цикл обновления показан ниже.
ScrollingTexture.prototype.update = function(dt) {
var velocity = ScrollingTexture.tmpVec2;
var offset = ScrollingTexture.tmpOffset;
// Calculate how much to offset the texture
// Speed * dt
velocity.set(this.speed.x, this.speed.y);
velocity.scale(dt);
// Update the diffuse and normal map offset values
offset.copy(this.material.diffuseMapOffset);
offset.add(velocity);
this.material.diffuseMapOffset = offset;
this.material.normalMapOffset = offset;
this.material.update();
};
Мы рассчитываем необходимый отступ во временном векторе tmp
. Это просто скорость умноженная на временный отступ. После этого, мы добавляем отступ к отступу карты нормалей и цвета изменяя параметры diffuseMapOffset
и normalMapOffset
. Эти значения являются pc.Vec2
, которые и смещают UV-координаты, используемые на поверхности. Если вы используете другие карты (например, излучения), вам также надо обновлять и их отступ. Наконец, мы вызываем material.update()
чтобы передать изменения в шейдер.
Это простой метод модификации отступа материала и прокрутки текстуры. Этот метод имеет один существенный недостаток - если на вашей сцене несколько моделей использует один и тот же материал, они все будут подвержены смещению.