After the Tianjin Port explosion, in addition to relocating the masses and holding people accountable for the accident, what people are most concerned about is the impact of the explosive pollutants on the surrounding environment, the most important of which is the safety of drinking water. Fortunately, the safety monitoring of water sources is well-founded. Environmental protection units and water supply companies are building their own drinking water source monitoring systems to monitor the safety of water sources for people's livelihood in real time.
Recently we undertook a project of automatic monitoring system for water source. Since water sources are generally far away from production and living areas, such as reservoirs, groundwater, wells, etc. in various places, it is not practical to send personnel to enter the hinterland of water sources for data monitoring in real time. In order to enhance the effectiveness of monitoring, the remote automatic water source monitoring system is necessary. In addition to monitoring various water quality indicators, the system can also remotely monitor the working conditions of water source wells, remotely monitor the working status of water pumps, and at the same time, it can also publish the monitoring indicators in the form of graphic display to supervisory units at all levels or the work platform of management leaders or Mobile work terminals (tablets, mobile phones, etc.).
Automated monitoring products are not uncommon. What really attracted the attention of customers in this project was the 3D rendering effect. In the past, the monitoring system was presented in a flat way, such as the following figure:
Or a fake 3D effect like this:
In addition to being more and more difficult to meet the increasing requirements of customers, the traditional plane method is indeed difficult to intuitively display the structure of the water source well, the installation position of the pump body and the working state. The 3D model itself does not have interactive functions, usually requires a lot of development work, and needs to install plug-ins in the system. In this project, we adopted the TWaver 3D development platform, combined with the TWaver IOT platform to complete the model construction and data driving, which not only realized the 3Dization of the monitoring scene, but also simultaneously displayed various monitoring indicators, allowing dispatchers and managers to understand the water source. The water quality and working conditions of the wells are clear at a glance, which improves the management efficiency and effectively enhances the service quality of the work at all levels.
Last handheld screenshot:
This is not a dead image, but a 3D scene that can be rotated, dragged, and interacted with. The water level and the valve switch will all change according to the actual data collected. The water source well model contains the following parts: the well, the pump, the sensor, the valve, and the pipe. Models can be built by importing 3D files directly, or by using the TWaver Mono Design modeling tool.
For example, we asked the artist mm to model the pump in 3DMax, export the obj file, and introduce it into the scene:
{
type: 'obj',
src: 'pump',
size: [100,200,100],
translate: [320,-380,80],
rotation: [0, 90, 0],
specularStrength: 4,
color: '#FF1700',
},
loadObj: function(box, json){
var loader = new mono.OBJMTLLoader ();
varsrc = json.src;
var size = json.size;
varpos = json.translate;
var style = json.style;
var rotation = json.rotation;
loader.load("images/"+src+".obj", "images/"+src+".mtl", json.images || "", function (object) {
var bb = object.getBoundingBoxWithChildren();
var max = bb.max, min = bb.min, w = max.x - min.x, h = max.y-min.y, l = max.z - min.z;
object.getDescendants().forEach(function(child, i){
child.setEditable(false);
});
box.addByDescendant(object);
object.setPosition(pos[0],pos[1],pos[2]);
varos = {'x': w, 'y': h, 'z': l};
object.setScale(size[0]/os.x,size[1]/os.y,size[2]/os.z);
if(style){
object.s(style);
}
if(rotation){
var f = demo.Util.getArc;
object.setRotation(f(rotation[0]), f(rotation[1]), f(rotation[2]));
}
});
},
Roughly as shown below:
For simpler valve objects, we used our own MONO Design editor to visually construct the valve model and convert it to the relevant JSON file:
{
type: 'mono',
url: 'resource / yali.json',
scale: [0.5,0.5,0.5],
translate: [-250, -155,0],
rotation: [0, -90, 0],
},
well.Default.registerFilter('mono', function(box, json){
initModelLib ();
mono.Toolkits.loadTemplateUrl(box, json.url, null, null, function(object){
var translate = json.translate;
object.setPosition(translate[0], translate[1], translate[2]);
var scale = json.scale;
if(scale){
object.setScale(scale[0], scale[1], scale[2]);
}
var rotation = json.rotation;
if(rotation){
var f = demo.Util.getArc;
object.setRotation(f(rotation[0]), f(rotation[1]), f(rotation[2]));
}
if(json.color){
object.getDescendants().forEach(function(child){
child.s({
'm.color': json.color,
'm.ambient': json.color,
});
});
}
});
});
Model of the valve:
For the well object, because its structure is relatively simple, and users are also very concerned about the environmental structure of the well, we directly use the API code of TWaver3D to generate the model, and use technologies such as light mapping to enhance its environmental effects.
{
type: 'cable',
color: '#BEC9BE',
direction: 0.05,
repeat: [10,1],
data:[
[-320, -180, 0],
[800, -180, 0],
[800, -1200, 0],
[1500, -1200, 0],
],
},
well.Default.registerFilter('cable', function(box, json){
var path = demo.Default.create3DPath(json.data);
path = mono.PathNode.prototype.adjustPath(path, 5);
var cable=new mono.PathNode(path, 100, 10);
var repeat = json.repeat || [10,1];
cable.s({
'm.type': 'phong',
'm.specularStrength': 4,
'm.color': json.color,
'm.ambient': json.color,
'm.texture.image': 'images/w002.jpg',
'm.texture.repeat': new mono.Vec2(repeat[0], repeat[1]),
'm.texture.offset': new mono.Vec2(0,0.7),
});
cable.setClient('flow', json.flow);
cable.setStartCap('plain');
cable.setEndCap('plain');
box.add(cable);
});
The water pipes in the scene are all created through the API. The models of the tank, water level, and baffle involve the addition and subtraction of the model, which can be generated through mono design or API.
After the static model and the scene are built, the binding of the data collected in the territory is completed through the IOT platform of TWaver, and the real-time data can be used to drive the objects in the scene. Users want more realistic interactions, and we hope we can add some animation support. The flow of water, the start and stop of the pump, and the rise and fall of the water level are more vivid and realistic using the working state in the well.
The following is an example of how to use the animation of the model:
varoffsetAnimate = new twaver.Animate({
from: 0 ,
to: 1,
type: 'number',
hard: 3000,
repeat:Number.POSITIVE_INFINITY,
reverse: false,
onUpdate: function(value){
cable.s({
'm.texture.offset': new mono.Vec2(value, 0),
});
},
});
offsetAnimate.play();
The animation effect is as follows:
Data-driven is the data collection, distribution, control and data binding completed with the help of TWaver 's IOT platform, so I won't go into details here. Interested friends can send us an email: [email protected], to exchange and communicate ideas and opinions.