3D-карта Game of Thrones — на основе пользовательского слоя Mapbox

внешний интерфейс

написать впереди

最终季！！转自豆瓣，如侵权请联系... https://movie.douban.com/photos/photo/2549876231/

Последний сезон «Игры престолов» уже в эфире, и я купил членство в Tencent и начал смотреть рекламу, чтобы следить за драмой. А если серьезно, игра силыАльтернативный мир действительно завораживает: обширный и холодный север, теплый и плодородный Дорн и Королевская Гавань, обращенная к заливу Блэкуотер.. Совпадение, я только что видел один некоторое время назадгитхаб проектЭто географические элементы и мобильные данные Game of Thrones, созданные и поддерживаемые большинством фанатов и официальных лиц. Как восторженная аудитория, вы должны внести свой вклад.

Итак, вот следующее ,играть адрес онлайн:

screenshot

На самом деле, несколько лет назад я использовал Threejs, чтобы воспроизвести красивую карту Средиземья Google. Приложение слишком деликатное. Начальная анимация и звуковые эффекты очень «средиземные», оригинальный запах Толкина. На самом деле, технология тоже очень проста, то есть bufferPlane + карта текстур + карта высот, в соответствии с картой высот для изменения значения z соответствующей вершины bufferPlane.онлайн-адрес

Опишите технический процесс

Подобно тому, что было описано в предыдущей статье о вытягивании карты, данные, которые мы используем, представляют собой изображение поверхности и карту высот (эта карта высот Цюанью была исправлена ​​ps после первого расчета каналов карты изображения. Конкретный процесс немного интересно)左边高程图+右边影像图

Во-первых, мы используем Threejs для создания bufferPlaneGeometry, который соответствует ширине и высоте изображения, а затем получаем все вершины bufferPlane, В это время нам нужно прочитать высоту соответствующего пикселя в карте высот через холст, считайте высоту с красной полосы, установите Дайте position.z вершин буферной плоскости, которая может установить плоскость на волнистую местность (как показано ниже)

根据高程图设置bufferPlane 的顶点高度

// geometry is bufferPlaneGeometry in THREEJS
// position flatArray [x,y,z,x1,y1,z1...] in geometry
  var flatArray = geometry.attributes.position.array;
  var verticesCount = flatArray.length / 3.0;
    console.warn('bufferGeom Vertices Array length: '+ verticesCount);
    for ( var i = 0, j = 0; i < verticesCount; i ++, j += 3 ) {
        if (data[i] === undefined) {
            console.warn(`data[${i}] is  undefined..`);
            break;
        } else {
            // set each vertice z-depth value with height
            flatArray[ j-1 ] = data[i] * extrusionRatio;
        }
    }

Интеграция с мапбоксом

Чтобы добавить текстовые метки, значки точек интереса и другие элементы в 3D-ландшафт, мы напрямую интегрируем этот слой Threejs в качестве пользовательского слоя mapbox. customlayer — важный интерфейс, открытый для разработчиков webgl посредством mapbox, который можно использовать в оригинальномВставить пользовательский слой в список слоев. Есть только два наиболее важных API для создания пользовательского слоя, вы можете обратиться кофициальная документация

  • onAdd (карта, gl), инициализировать webgl
  • render(gl, matrix), каждый кадр будет вызывать эту функцию рендеринга, здесь вы можете вводить операции, которые должны быть отрендерены в контексте webgl
// configuration of the custom layer for a 3D model per the CustomLayerInterface
var customLayer = {
    id: '3d-terrain',
    type: 'custom',  // 指定是自定义图层，不然就是 fill，symbol 等图层.
    renderingMode: '3d',
    onAdd: function (map, gl) {
        this.camera = new THREE.Camera();
        this.scene = new THREE.Scene();
        this.map = map;

        // use the Mapbox GL JS map canvas for three.js
        this.renderer = new THREE.WebGLRenderer({
            canvas: map.getCanvas(),
            context: gl // 用mapbox 的webgl作为threejs 的上下文.
        });

        // 把Threejs 的scene，camera以及renderer 传入自定义的terrainLoader中，以便add(bufferPlaneMesh)
        this.terrainLoader = new TerrainLoader({
            scene: this.scene,
            camera: this.camera,
            renderer: this.renderer
        });
    },
    render: function (gl, matrix) {
        // ..省略部分 以下是将mapbox的matrix 参数同步给threejs 实例
        // sync mapbox matrix with THREE camera Matrix. 
        var m = new THREE.Matrix4().fromArray(matrix);
        var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
            .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
            .multiply(rotationX)
            .multiply(rotationY)
            .multiply(rotationZ);

        // sync mapbox matrix with THREE camera. 更新threejs camera的投影矩阵，重新渲染，再强制触发下mapbox 的repaint，这样动画就可以继续进行了
        this.camera.projectionMatrix.elements = matrix;
        this.camera.projectionMatrix = m.multiply(l);
        this.renderer.state.reset();
        this.renderer.render(this.scene, this.camera);
        this.map.triggerRepaint();
    }
}
// 把customlayer 加入label 之下，这样文字标注就可以浮在地形图层之上
map.on('style.load', function () {
    map.addLayer(customLayer, 'roads labels');
});

адрес проекта на гитхабеЕсли у меня будет время в будущем, я добавлю некоторые документы Игры Престолов иСюжетная анимация, это немного интереснее. Добро пожаловать, чтобы продолжать улучшать объем 3D-ландшафта, вы должны уметь фотошопить...

последнее обновление

  • Согласно вики GOT, в левый верхний угол интерфейса добавлена ​​панель сюжетной линии.
  • Добавлены анимационные эффекты для точек события.
  • Для студентов, которые хотят добавить сюжетные линии, просто клонируйте и добавьте timelines.js, чтобы автоматически добавлять сюжетные точки.
var timelines = [{
    "id": "1",
    "title": "White Walkers Emerge",
    "description": "已经数千年未见踪迹的异鬼在北境出现， 他们攻击了守夜人军团的一队游骑兵以及野人",
    "location": 'Castle Black',
    "camera": {
        center: [18.853961295738596, 34.89038102283956],
        zoom: 5.21,
        pitch: 41,
        bearing: 0
    }
}
// ...
];

напиши в конце

отправить одинНаши наклейки благосостояния, сообщение от ByteDance

🚀 МыДоуин МузыкаЧто касается команды R&D, продукты, которые нам необходимо поддерживать, включают Douyin, продукт с сотнями миллионов активных пользователей в день, и независимый музыкальный продукт, запущенный во многих зарубежных странах.Resso

Нам нужны не только опытные студенты, но и студенты, которые только что закончили ~ Для собеседования есть некоторые требования к способностям кандидата к алгоритму.Навыки решения проблем, основы работы с компьютероми т. д., привычки мышления и т. д.

На переднем конце с точки зрения, работа включает в себя:

  • Отвечает за функциональную разработку продуктов, связанных с Douyin, в том числеПользовательские функции на стороне продукта, масштабные мероприятия, разработка небольших программ и т.д.;
  • Отвечает за проектирование и разработку комплексных технических решений для промежуточной стадии, бизнес-платформы и продуктов ToB, связанных с Douyin;
  • Быть ответственным заБазовый фреймворк, набор инструментов, библиотека компонентовпроектирование, развитие и обслуживание инфраструктуры;
  • существуетКросс-энд и полный стек, аудио и видеои другие технические направления для решения основных проблем;

Заинтересованные студенты могут нажать, чтобы отправить:Детали работыили отправить свое резюме наhuangyixiu@bytedance.comи указать положение. буду следить за прогрессом~

Справочные ресурсы

GitHub.com/mapingboxing/got-…

Официальная документация пользовательского слоя

Game_of_Thrones_Wiki богата ресурсами, включая изображения карт.

Категории