Writing in the front

The final season of the power game is hot broadcast, I decisively bought Tencent members in order to follow the drama, jump advertising. But seriously, the world of Thrones is fascinating, with the vast, cold north, warm and fertile Dorne, facing King’s Landing at Blackwater Bay. Coincidentally, some time ago, I happened to see that a Github project is the geographic elements and MBtile data of Game of Thrones, which is jointly contributed and maintained by the majority of fans and officials. As an avid viewer, you have to add something.

Hence the following “Game of Thrones 3D Map Guide”, online play address:

In fact, A few years ago, I used Threejs to reproduce a beautiful Map of China created by Google. The app was so elaborate that the opening motion and sound effects were very “Middle Earth”, with the original Tolkien flavor. In fact, the technique is also very simple, is a bufferPlane + texture + elevation map, according to the elevation map to modify the bufferPlane corresponding vertex z value. Online address

Overview of the technical process

Similar to what was described in the last mapbox Extrude article, the data we used was a surface image and an elevation map (the elevation map of Game of Thrones was modified by PS after I first calculated according to the image band).

First, we use Threejs to establish a bufferPlaneGeometry that is consistent with the width and height of the image image, and then get all the vertices of this bufferPlane. At this time, we need to read the height of the corresponding pixels in the elevation map through a canvas, and read the height from the red band. Set position.z to the vertex of a bufferPlane. This will set the plane to the topography.

// 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; }}Copy the code

With mapbox integration

To add text annotations and interest point ICONS to the 3D terrain, we directly integrate this Threejs layer into the CustomLayer of MapBox. Customlayer is an important interface that MapBox opens to WebGL developers. You can insert CustomLayer into the existing layer list. The two most important apis for customLayer construction are as follows

  • OnAdd (map, GL) initializes webGL
  • Render (GL, matrix), each frame calls the render function, which can inject operations that need to be rendered in a WebGL context
// configuration of the custom layer for a 3D model per the CustomLayerInterface var customLayer = { id: RenderingMode: '3d', type: 'custom', // specify custom layer, otherwise fill, symbol etc. 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 // use mapBox webGL as threejs context}); // Pass Threejs scene, camera, and renderer into our custom terrainLoader. So add(bufferPlaneMesh) this.terrainLoader = new terrainLoader ({scene: this.scene, camera: this.camera, renderer: this.renderer }); }, render: function (gl, matrix) { // .. // 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. Update threejs camera projection matrix, to render, then forced to trigger mapbox repaint, under such animation can continue 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(); }} // Add the customLayer under the label, Map.on ('style.load', function () {map.addLayer(customLayer, 'roads labels'); });Copy the code

Github project address will add game of Thrones documentation and story-line animation when available, which is a bit more interesting. Welcome to continue to improve the 3d terrain category, must be able to photoshop…

Recent updates

  • GOT Wiki added a storyline panel in the upper left corner of the interface
  • Added animation for event points
  • If you want to add a story line, just clone it and add Timelines.
var timelines = [{ "id": "1", "title": "White Walkers Emerge", "description": "White Walkers, not seen for thousands of years, appear in the North. They attack a group of Rangers and wildlings of the Night's Watch ", "location": 'Castle Black', "camera": {center: [18.853961295738596, 34.89038102283956], ZOOM: 5.21, Pitch: 41, bearing: 0}} //... ;Copy the code

Write in the last

Send us a bonus post from bytedance

🚀 We are the r&d team of Douyin music. The products we need to support include Douyin, a product with hundreds of millions of daily active users, and Resso, an independent music product that has been launched in many overseas countries

We need not only experienced students, but also fresh graduates. For the interview, there are some requirements on the candidate’s algorithm ability. We examine the candidate’s problem solving ability, computer skills, thinking habits, etc

In terms of the front end, the work includes:

  • Responsible for the function development of Tiktok related products, including the development of user side functions, large-scale events, small programs, etc.;
  • Responsible for the design and development of full-stack technical solutions of Tik Toin related to The Middle Platform, business platform and ToB products;
  • Responsible for the design, development and maintenance of infrastructure such as infrastructure framework, tool chain and component library;
  • Solve core problems in cross-end, full stack, audio and video technology;

Interested students can click on the post:Position detailsOr send in your [email protected] the position. I will keep track of the progress

The resources

Github.com/mapbox/GOT-…

Custom Layer official document

Game_of_Thrones_Wiki has a wealth of resources, including map images