Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.
The results of this demo run
three-dimensional modelThis time, I began to draw a stereo model.
The word [catch] here refers to the absence of any new technical knowledge points in this article. Just use what has been described so far to draw a solid torus.
So far, only triangles and quads have been drawn, of course, there is nothing wrong with drawing simple polygons in three-dimensional space, but the shortcomings are persuasive. Draw a torus this time and experience a decent 3D drawing.
To say the definition of a torus is not a good explanation, it is actually a model of the same shape as the "donut" (lufy: What? Don't know "donuts"? Popular Science , doughnut encyclopedia). When you prepare the Torus model data, you need to use sine and cosine to calculate the position of the vertices in the three-dimensional space.
In particular, start by drawing a circle at the beginning of the distance from the original point of R.
For example, a cross section of a three-dimensional space.
Then, the Y axis is centered, rotating like a compass, adding vertices continuously.
As shown in the effect, the rotation of a week, you can define the "donut" shape of the vertex, this time using the program to simulate.
the generation of the vertex data of a doughnut bodyCreate a new function to generate the model data for the torus.
think of it as a model of a tube shape that can be made into a wheel. You can create a torus by specifying the distance from the origin to the center of the tube and the thickness (radius) of the tube itself. Moreover, the more vertices forming the pipe, the smoother the curve of the torus is drawn. This new function accepts these parameters and then returns an array of vertex attributes for the resulting model.
> functions for generating torus model data
function Torus (row, column, Irad, Orad) {var pos = new Array (), col = new Array (), idx = new Array (); for (var i = 0; I <= row; i++) {var r = Math.PI * 2/row * i; var rr = Math.Cos (R); var ry = Math.sin (R); for (var II = 0; II <= column; ii++) {var tr = Math.PI * 2/column * II; var tx = (RR * Irad + orad) * Math.Cos (TR); var ty = ry * IRAD; var tz = (RR * Irad + orad) * Math.sin (TR); Pos.push (TX, Ty, TZ); var TC = HSVA (360/column * II, 1, 1, 1); Col.push (Tc[0], tc[1], tc[2], tc[3]); }} for (i = 0; i < row, i++) {for (ii = 0; ii < column; ii++) {R = (column + 1) * i + II; Idx.push (R, r + column + 1, r + 1); Idx.push (r + column + 1, r + column + 2, R + 1); }} return [pos, col, idx];}
This torus function, altogether receives four parameters.
The first parameter, which divides the pipe into how many parts, the larger the value, the more rounded the resulting torus, the smaller the value, the edges.
The second parameter is the number of vertices that make up the circle of the tube, the larger the value, the closer the tube is to a rounded shape, and the smaller the circle, the more angular it is.
The third parameter is the radius of the generated pipe.
The fourth parameter is the distance from the origin to the center of the Tube.
Conversion of HSV color mode to RGB color modein a function that generates model data for a torus, another function, the function Hsva that assigns the return value to the variable TC, is also used.
In this demo, the HSV color mode is used in the ring body. HSV is a different method of representing color with RGB, using the color of [hue = hue]? [saturation = saturation]? [luminance = Value] to represent the color.
using RGB To specify color is cumbersome, using HSV is very simple, this time the demo, a built-in from the HSV to RGB color conversion function, so you can add a beautiful rainbow color of the ring body.
>HSV conversion to RGB functions
function Hsva (h, S, V, a) { if (S > 1 | | v > 1 | | a > 1) {return;} var th = h%; var i = Math.floor (TH/60); var f = th/60-i; var m = v * (1-s); var n = v * (1-s * f); var k = v * (1-s * (1-f)); var color = new Array (); if (!s > 0 &&!s < 0) { color.push (V, V, V, a); } else { var r = new Array (V, N, M, M, K, v);
var g = new Array (k, V, V, N, M, m); var B = new Array (M, M, K, V, V, N); Color.push (R[i], g[i], B[i], a); } return color;}
this function, in order to represent the color of the HSV, receives four parameters, the fourth parameter is transparency, and the function is to convert the color to RGBA and return the result.
in HSV, the range of tones is 0 to 360, and the function adds more processing than this value in order to prevent errors. However, it is important to note that saturation and brightness cannot return the correct result if the value passed in is incorrect, and saturation, brightness, and transparency values range from 0 to 1.
The function of generating the torus, and the function of the HSV conversion to RGB, the code inside the function does not do the detailed explanation, wants to know the friend, may own look.
SummaryThis time, there is no description of the new WEBGL-related technologies, so run the demo to get a sense of it, and sure enough, a stereoscopic model like a torus is more interesting to draw than a simple plate-shaped polygon.
the shaders and HTML used in the demo are not the same as they were before, and the JavaScript-related part just adds a function to generate the torus and a function of the HSV transformation, with no particular point of change.
The torus drawn in the demo will rotate along the Y and Z axes, using colorful colors that should look pleasing to the eye. The demo link is at the bottom of the article.
next time, we will introduce a simple light source.
Draw a stereo model (torus)
http://wgld.org/s/sample_008/
reprint Please specify: transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend
