Pure Shading Language drawing aircraft flame effect

"Pure shading language draw HTML5 Clock" embodies the GLSL programmability features, but does not reflect the GLSL can be programmed with a variety of cool effect features, today we will use pure shading language to draw the flame effect, and apply it to the " HT Graphics component design of the road (iv) of the airplane example of the flight.

Examples of flame I have sent in Http://js.do/hightopo/fireball, whose essence is in the drawing of GL. The points point type is used to draw a variety of color effects by generating noise noise in the fragment shader in the point area, and to overlay the colors generated by multiple different noise algorithms, while the noise generation also relies on time parameters, This eventually melts into a nice round flame effect.

Using GL. Points are drawn in different browser-to-point sizes and can be Gl.getparameter (GL. Aliased_point_size_range) know the minimum and maximum range of browser support, generally also have 1~255 or 1~300 interval, so it is basically enough to show the effect, http://js.do/hightopo/ In the example of fireball, float color = 3.0– (3.*length (2.*p)) in 52 rows, and the first 3.0 is the flame Strength intensity parameter, which can be changed by changing this value to achieve the effect of changing the flame intensity, which can be 1.0~ 4.0 range experience the effects from small fire to fire.

Example of the design of HT graphics Component (iv) I will overlay the flame effect on the tail of the aircraft, due to the complexity of the custom GLSL, HT does not open the functions of the entity custom GLSL, What we're going to do is overlay a WEBGL-driven canvas on top of the Graph3dview, and the flames are drawn to this upper canvas, so the graph3dview with HT are completely loosely coupled, without compromising all the display and interactivity of the HT components themselves, This kind of application is somewhat similar to the "Baidu Map and HT for Web GIS network topology Application" in GIS map and HT's Graphview component overlay effect.

Of course, this superposition will cause the flame is always at the top, can not reflect the three-dimensional spatial level of the problem, but as a monitoring system application is the most important indicator, for example, for telecom network management applications, when the device has alarm bubbling presentation, often call the police bubble to appear in the top not to be obscured by other devices, Similarly, if a real aircraft fire requires the monitoring system to prompt the alarm information in real time, it is also necessary that the flame is not obscured, so the real-world level of flaws here is the right solution.

It's easier to overlay the canvas to Graph3dview, join by Graph3dview.getview (). appendchild (canvas), and layout cavnas position size while Graph3dview layout. The position of the flame we implement this by moving a hidden node host to the tail of the aircraft so that the node will customize the position of the aircraft following the flight process, and when the flame is drawn we pass the graph3dview# The Toviewposition function transforms node three-dimensional coordinates into two-dimensional screen cavnas coordinates, which is not all that we have to convert the screen coordinates to the point coordinates of the WEBGL-driven canvas, with the following code:

function Draw () {gl.viewport (0, 0, canvas.width, canvas.height) gl.clearcolor (0.0, 0.0, 0.0, 0.0); Gl.clear (GL.     Color_buffer_bit); GL.UNIFORM1F (gl.getuniformlocation (program, ' Time '), (Date.now ()-StartTime)/1000); GL.UNIFORM1F (gl.getuniformlocation (program, ' intensity '), intensity); var vertexbuffer = Gl.createbuffer (); Gl.bindbuffer (GL.                                Array_buffer, vertexbuffer); var position = G3d.toviewposition (NODE.P3 ()); Gl.bufferdata (GL. Array_buffer, New Float32array ([Position.x/g3d.getwidth () *2-1, 1-position.y/g3d.getheight () * *]), GL. Static_draw) var vertexlocation = gl.getattriblocation (program, "Avertexposition"); Gl.vertexattribpointer ( Vertexlocation, 2, GL.                   FLOAT, False, 0, 0); Gl.enablevertexattribarray (vertexlocation); Gl.drawarrays (GL. POINTS, 0, 1); Requestanimationframe (draw); } function Resizecanvas () {canvas.width = G3d.getwidth () * devicepixelratio;canvas.style.width = G3d.getwidth (  ) + ' px '; Canvas.height = G3d.getheigHT () * devicepixelratio;canvas.style.height = g3d.getheight () + ' px '; }

The above code we also passed the intensity strength parameter, which we passed HT. Default.startanim animation function, the control of its value in the 0~4 between the constant change, so that the flame has a small change back and forth to transform the similar alarm flashing prompt effect. There are also var devicepixelratio = window.devicepixelratio; parameters are also easy to ignore details, depending on the level of retina support for the device, to avoid aliasing blur under high-resolution devices, Of course, through the devicepixelratio increase canvas.width and canvas.height is also the memory of the cost of drawing performance, if the effect is not too high conditions can also be used to deal with, in fact, the requirement is not too high three-dimensional scene even when the retina is 3 of the iphone 6 forcing the Devicepixelratio to 1 is not too problematic, and can save memory to improve drawing performance, some low-performance terminals can even downgrade to a value less than 1 at the expense of performance in some cases.

The hardships finally let the plane fly out of the effect I want (http://v.youku.com/v_show/id_ xodyymzu3mdg0.html), of course, there are countless details can be perfected, for example, can be based on the distance of the aircraft from the eye to dynamically change the size of point points, or transform GLSL to achieve smoke particle system effect, etc., but the new Year's holiday is over I have to work tomorrow, and other perfect places left to the reader to imagine.

Pure Shading Language drawing aircraft flame effect