Web_Designer_UK_Issue_263_2017

Tutorials
Create a WebGL data visualisation
composer = new THREE.
EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(filmPass);
composer.addPass(badTVPass);
composer.addPass(rgbPass);
composer.addPass(copyPass);
copyPass.renderToScreen = true;
params();
group = new THREE.Group();
scene.add(group);
6. Light the scene
Lighting from above is added into the scene to
ensure that objects can be seen. An Earth texture
is loaded that will be wrapped around the spheres.
The sphere geometry is created, the material is
made with the Earth texture and the Earth is added
to the group object.
7. A second Earth
Another model of the Earth is created just slightly
larger than the first, but this time it has a slightly lower
opacity to the texture. This just makes it a little more
interesting with the blending of textures as they rotate
around in the 3D scene. Notice how their blending is
set to be an additive blend.
material = new THREE.MeshBasicMaterial({
map: planetTexture, transparent: true,
opacity: 0.95, side: THREE.DoubleSide,
blending: THREE.AdditiveBlending
});
Listen for events
Event listeners are special browser actions that
monitor certain types of activity such as user
input or the browser resizing. The event usually
calls a function with the activity to perform when
the event is detected. JavaScript was originally
set up as an event-driven language.
earth = new THREE.Mesh(geometry, material);
earth.scale.x = earth.scale.y = earth.
scale.z = 1.02;
group.add(earth);
var mesh = new THREE.Object3D();
8. Lines around the Earth
An icosahedron model is added just around the outside
of the Earth, to make it look a little more technical in its
aesthetic look. This icosahedron is given a line material,
so that only the edges of the model are visible. Another
image is loaded here that will be used to add stars to
the scene.
9. Two thousand stars
The for loop creates 2,000 stars in the scene by adding
them at random positions in X, Y and Z space. A new
material is created that gets the star texture. As this
scene is about data, these look more like floating points
than stars as a deliberate nod to the data on display.
for (i = 0; i < 2000; i++) {
var vertex = new THREE.Vector3();
vertex.x = 400 * Math.random() - 200;
vertex.y = 400 * Math.random() - 200;
vertex.z = 400 * Math.random() - 200;
geometry.vertices.push(vertex); }
material = new THREE.PointsMaterial({
size: 2, map: sprite, transparent: true,
opacity: 0.5, alphaTest: 0.5
});
10. Add the data
Here the particles get added into the group and then
another for loop is created. This time the for loop is going
to get the latitude, longitude and magnitude data of the
earthquake. This data will be loaded at the end of the
tutorial from a JSON file and stored in a global variable.
particles1 = new THREE.Points(geometry,
material);
particles1.sortParticles = true;
group.add(particles1);
for (var i = 0; i < data.features.length;
i++) {
var geometry = new THREE.Geometry();
var lat = data.features[i].geometry.
coordinates[1];
var lon = data.features[i].geometry.
coordinates[0];
var mag = data.features[i].properties.mag;
var radius = 100;
11. Check the magnitude
If the magnitude is greater than zero, then the latitude
and longitude are mapped on the sphere as X, Y, Z
co-ordinates. This point becomes the starting point for a
line originating at the point of the earthquake. This vertex
is saved into the geometry.
12. Show the magnitude
Now the original vertex is cloned and multiplied out
based on the value of the magnitude of the quake. This
becomes a line with the addition of a line material that is
drawn between the two points. The colour of the line is
altered based on the value of the magnitude.
var vertex2 = vertex.clone();
vertex2.multiplyScalar((nmag * 0.4) + 1);
geometry.vertices.push(vertex2);
var myCol = new THREE.Color(0xffffff);
myCol.setHSL((mag / 5), 0.9, 0.6);
var line = new THREE.Line(geometry, new
THREE.LineBasicMaterial({ color: myCol,
linewidth: 1 }));
group.add(line);
}
}
13. Listen to the browser
The whole group is rotated slightly to simulate that the
Earth is on an angle. The document gets a number of
event listeners added for the mouse, and touch input so
that the screen can be zoomed into and looked at based
on the mouse or touch position.
Top left
The stars are now added to give much more depth to
the scene
Top right
With the parsed data from the JSON file the height and
location of the earthquakes can be added into the scene
Right
Now the shaders are all rendered using the effects
composer, it adds a little extra distortion to the scene
54