[WebGL Getting Started] 32, four dollars and Minmatrixb.js__ajax

Note: The article is translated from http://wgld.org/, the original author Sambonja Diana (Doxas)

The results of this demo
A library that handles four of millions of dollars

The last time the main introduction of what is four yuan, and its calculation method. However, it is not possible to understand the actual usage of the four-dollar number.
The actual application, to continue to understand. Transform the coordinates of the three-dimensional space into four-dollar numbers, and then rotate the processing.
Although, this is used to explain the demo, even if not using four of dollars can be easily implemented, but the use of four yuan, will be more intuitive some.
For the four-dollar number of peripheral processing, will use the site's algorithm library minmatrixb.js, there is another matrix-related processing is its sister library Minmatrix.js. Four-number-related processing is relatively difficult, using Minmatrixb.js can simplify the calculation of the four-dollar number. Minmatrixb.js's detailed usage has prepared another article, you can refer to. (Lufy: I will not separate translation, and this article merged together into the second half of the article.) ）
using the four-dollar number to control the lens

This demo will try to use the four-dollar number to control the lens.
The lens is defined by the transformation matrix of the view coordinate. When generating the view coordinate transformation matrix, the method used is the Mativ.lookat function in Minmatrix.js.
The LookAt function here requires lens coordinates, lens view, and the top of the lens up to three parameters. Because you want to use a four-dollar number to control the lens, use a four-dollar number to manipulate the information associated with those lenses.
The demo, rendering a ring at the origin and processing the lens while rotating the ring. In particular, the lens placed in the position at the front of the origin (where z is positive) allows the lens to rotate in the x direction, centering on the origin, so that the original point is always in the lens.
It is difficult to understand in language description, you can look at the following figure.

In order to achieve such a lens effect, the program how to do it. The point here is to generate a view coordinate transformation matrix when the lens-related information.
First, the lens that does not do the rotation is shown in the following figure (the モデル in the figure is the origin).

The model is rendered at the origin, and the lens is simply oriented to this position. When the lens is moving, the lens needs to be geared towards the model, and the effect is as follows if only the coordinates are rotated.

This is obviously very strange. Therefore, after the lens coordinates move, the lens direction also needs to follow the change, can obtain the correct rendering effect.
For example, to render a flying body like a flight simulator, consider a camera that rotates around the edge of the flight body, and the top of the lens is actually like a human neck.
The correct transformation of the lens coordinates and the direction of the lens is obtained, and the effect is shown in the following figure.

The purpose of this demo is to control the lens like the one above, and use the four-dollar number to control it.
vector rotation based on a four-dollar number

Last time, we used the four-number to rotate the vector, using the four-dollar number holding the rotation information and its conjugate four-dollar number to calculate.
This site uses the algorithm library Minmatrixb.js, has encapsulated the rotation three-bit vector function, that is the QTNIV.TOVECIII function.
Within this function, the conjugate four-dollar number is automatically generated and calculated based on the parameters. Passing in three parameters, holding the four-dollar number of rotation information, the vector to rotate, the vector to save the results, you can easily rotate a vector.

※ Below, q is an instantiated object of the Qtniv object.
Examples of >TOVECIII functions

Q.TOVECIII ([0.0, 0.0, 10.0], quaternion, vector);

Of course, the four-dollar number in the incoming TOVECIII will rotate this four-dollar number. The previous article also said how to rotate a four-dollar number, using Minmatrixb.js, you can easily rotate a four-dollar number.
Using the Qtniv.rotate function to rotate the four-dollar number, this function requires three parameters, a rotation angle, an axis vector, and a four-dollar number to hold the result.
Examples of >rotate functions

Q.rotate (Radian, [1, 0, 0], quaternion)

As above, you can generate a four-dollar number centered on the x-axis, with a rotational volume of radian. Using this generated four-dollar number, you can rotate a three-dimensional vector by executing the TOVECIII.
Above this, this time uses the four Yuan number to control the lens. Specifically, the four-dollar number to correspond to the relative lens coordinates and the direction of the lens, you can keep the camera to rotate the model.
Demo's CodeThe demo, as before, with light source for lighting, and then use four of dollars to control the lens. The light source part of the shader does not make any changes, so the HTML section is not much explained.
In the JavaScript program, the initialization of the four-dollar number and the statement of the lens-related variables are made. Then, in the loop process, rotate the four-dollar number and render it dynamically.

Initialization of > four-number

Four-number of the first generation of と
var q = new Qtniv ();
var xquaternion = q.identity (Q.create ());

After performing the above processing, the variable xquaternion represents the four-dollar number of the unit words.
Next, add the rotation information to the four-dollar number and rotate the four-dollar number.
> The rotation of the four-number and the corresponding vector

Lens coordinates
var camposition = [0.0, 0.0, 10.0];

Vector var camupdirection representing the top direction of the lens
= [0.0, 1.0, 0.0];

The counter's declaration
var count = 0;

Persistent loops
(function () {
    //Canvas initialization
    gl.clearcolor (0.0, 0.0, 0.0, 1.0);
    Gl.cleardepth (1.0);
    Gl.clear (GL. Color_buffer_bit | Gl. Depth_buffer_bit);
    
    Counter increment
    count++;
    
    Use counters to compute radians
    var rad  = (count% 180) * MATH.PI/90;
    var rad2 = (count% 720) * MATH.PI/360;
    
    Four-dollar rotation
    q.rotate (rad2, [1, 0, 0], xquaternion);
    Q.TOVECIII ([0.0, 0.0, 10.0], xquaternion, camposition);   *1
    Q.TOVECIII ([0.0, 1.0, 0.0], xquaternion, camupdirection);//*2/
    
    The coordinate transformation matrix of the view and projection
    M.lookat ( Camposition, [0, 0, 0], camupdirection, Vmatrix);
    M.perspective (C.width/c.height, 0.1, Pmatrix);
    M.multiply (Pmatrix, Vmatrix, Tmpmatrix);
    
    Intermediate ellipsis
    
    //continuous cycle
    settimeout (Arguments.callee, 1000/30);
}) ();

The middle of the processing is mostly omitted, only to see the key part on it.
The variable that holds the lens coordinates is camposition, and the variable holding the direction on the lens is camupdirection. In a loop, increments the counter each time and calculates radians. Using the calculated radians, rotate the four-dollar number first.
If you can add rotation information to a four-dollar number, you can then rotate the vector. The above *1 part of the code, is the lens of the coordinate transformation processing. The *2 part of the code is to rotate the variable that represents the direction on the lens.
Although the uniform variable generation and the command of the painting are omitted, how to deal with the four-dollar number in the main loop should be understood. Summary

This demo, the lens will always remain in the ring and around the circle around the ring rotation. Although only a simple rotation processing, but deliberately used four yuan, which is also to enable us to understand more deeply. With Minmatrixb.js and four-dollar numbers, you can easily rotate a vector. If you look at the Minmatrixb.js code, you can learn more about the four-dollar operation calculation. In fact, this is only related to some four of the basic use of the number of dollars. No matter what, understand the basic usage, will be very useful in the future. The following will give a demo link, we can confirm. The next time will be more specific about the use of the four-dollar number, using the mouse to rotate the model.

Using Minmatrixb.js to operate the demo of four Yuan number

------------------------------------------------------------------------
The following is the use of Minmatrixb.js ------------------------------------------------------------------------

An overview of a library for WebGL, including matrix calculations and four-dollar calculations.
It encapsulates the basic 4 x 4 matrices and the related calculations of four-element numbers, and can also output model data such as cubes, spheres, and toroidal bodies.
Float32array is used inside the library, so there is no guarantee that all browsers will work properly.
Like its sister library Minmatrix.js, basically did not do any error processing, the actual use of the time is best to expand. The section below with [※] is also encapsulated in the minmatrix.js. If only the basic matrix calculation, the use of minmatrix.js can be.
Minmatrix.js has a detailed description of the article, the transmission door http://blog.csdn.net/lufy_legend/article/details/38427571. There is no repetition of the translation.
This library is completely free, the revision can also be free to carry on, may also have some propaganda function to this station.


mativ Builder ※create function ※
Identity function ※
Multiply function ※
Scale function ※
Translate function ※
Rotate function ※
LookAt function ※
Perspective function ※
Transpose function ※

Inverse function ※

>>ortho function

Composition: Matrix Mativ.ortho (float left, float right, float top, float bottom, float near, float far, Matrix dest)
first parameter: Left : The position at the left end of the section the
second argument: right: The position at the end of the section the
third parameter: top: The position at the top of the section
fourth parameter: bottom: Position of lower section
third parameter: near: Position
near section Fourth parameter: Far: The position of the distal section
fifth parameter: dest: The matrix used to hold the computed results
generates the projection coordinate transformation matrix based on the positive projection. The parameters are the top and bottom of the section and the decimal points of the front and rear coordinates.

> Examples

The context is x 300 when
var left   = -5.0;
var right  =  5.0;
var top    =  3.0;
var bottom = -3.0;
The range of the section must be set to a positive number
var near = 0.1;
var far = m;
M.ortho (left, right, top, bottom, near, far, Dmat);

Qtniv BuilderTo handle the four-dollar number, the Qtniv object needs to be instantiated.
> Examples

var q = new Qtniv ();

※ later see Q will represent the instantiation of the Qtniv object.


>>create function

Composition: quaternion qtniv.create (void)
generates four of dollars. is actually a one-dimensional array that contains 4 elements. As with the CREATE function of the Mativ object that handles the matrix, the array type is Float32array.

> Examples

var dqtn = Q.create ();

>>identity function

Composition: quaternion qtniv.identity (quaternion dest)
The first parameter: dest: The unit of four Yuan
will be four of the number of units.

> Examples

Q.identity (DQTN);

>>inverse function

Composition: quaternion qtniv.inverse (quaternion qtn, quaternion dest)
first parameter: qtn: Four-yuan inversion object The
second argument: dest: The four-dollar number
of saved results The four-dollar number is reversed to obtain the conjugate four-dollar number.

> Examples

Q.inverse (Qtn, DQTN);

>>normalize function

Composition: quaternion qtniv.normalize (quaternion dest)
The first parameter: dest: Normalized processing of four of dollars.
four of the number of regularization process.

> Examples

Q.normalize (DQTN);

>>multiply function

Composition: quaternion qtniv.multiply (quaternion qtn1, quaternion qtn2, quaternion dest)
first parameter: Qtn1: Objects multiplied by four-dollar number
The second argument: qtn2: The four-dollar number that is multiplied by the
third parameter: dest: Saves the result by multiplying the four-dollar
four-dollar number.

> Examples

Q.multiply (QTN1, QTN2, DQTN);

>>rotate function

Composition: quaternion qtniv.rotate (float angle, vec3 axis, quaternion dest)
first parameter: angle: Angle of rotation of any axis (radians)
Second parameter: Axis: Vector representing any axis
third parameter: dest: The four-dollar number used to save the result
generates a four-dollar number that rotates at any angle along any axis. The radian representing any angle is a decimal number, which indicates that the argument of any axis is a vector containing three elements.

> Examples

An example of 45 degrees rotation along any axis is
var angle = math.pi/180;
arbitrary axis vector
var axis = [x, y, z];
Q.rotate (angle, axis, dqtn);

>>TOVECIII function

Composition: Vec3 QTNIV.TOVECIII (vec3 vec, quaternion qtn, VEC3 dest)
first parameter: VEC: Coordinate Transformation object Vector
second parameter: qtn: Four-dollar number
for coordinate transformation Third parameter: dest: To save the results of the vector
three-dimensional space of any point, as well as a vector containing three elements, using a four-number coordinate transformation.

> Examples

var VEC = [x, y, z] of any point in three-dimensional space;
The transformed vector is saved with an array of
var dvec= [];
Q.TOVECIII (VEC, Qtn, Dvec);

>>tomativ function

Composition: Matrix Qtniv.tomativ (quaternion qtn, Matrix dest)
The first parameter: qtn: Multiplied by four of the number of the
second parameter: dest: Save the results with an array of
four and a 4 x Multiplied by a square of 4.

> Examples

Q.tomativ (Qtn, Dmat);

>>slerp function

Composition: quaternion qtniv.slerp (quaternion qtn1, quaternion qtn2, float time, quaternion dest)
first parameter: qtn1: Four Yuan object A
Second parameter: qtn2: Four RMB object B
third parameter: Time: Timeline Decimal (0 ~ 1)
fourth parameter: dest: The four-dollar number used to save the result is a
linear tween of the spherical surface using two four elements to generate a four-dollar number of any timeline. The argument is two four dollars and any time axis, the value range of any time axis is 0 ~ 1, the nearer 0 is closer to the first four-dollar rotation, the closer to 1 the closer to the second four-dollar rotation.

> Examples

Q.slerp (QTN1, QTN2, Time, DQTN);

number of >>torus about us

Composition: any torus (int row, int column, float irad, float orad [, vec4 color]) The
first parameter: Row:トーラスを formation する The number of splits the
second parameter: column:パイ The number of the プ section of the Yen Division the
third parameter: irad:パイプ を table す decimal point number
fourth parameter: Orad: Origin からパイプの Center point までの Distance を table す decimal point number
Fifth parameter: color:モデルに suitable to use する color を table す Four つの element を to
generate the ring model data with つ. The parameters can be divided into the number of tubes that form the torus, the number of points that make up the circle of the pipe, the distance from the center of the pipe, the radius of the pipe, and the color of the torus.
If the argument row specifies 6, the torus becomes a hexagonal shape. Parameter column is specified as 5, the cross-section of the torus becomes a five-corner shape. The
fifth parameter of this function can be omitted, after omitting, the color information is automatically computed by the HSVA function. If you specify a color, you need to pass in an array of four elements.
The return value of the function is an object that contains 5 attributes, p is the vertex's position information, n is the vertex's normal information, C is the vertex's color information, T is the texture coordinate, and I is the index of the model. ※the function that returns the result like this also has the following sphere function and cube function.

> Examples

var Objtorus = Torus (16, 16, 1.0, 2.0, [1.0, 1.0, 1.0, 1.0]);

number of >>sphere about us

Composition: any sphere (int row, int column, float rad [, Vec4 color])
first argument: row: The number of divisions in the longitude direction of a sphere the
second parameter: column: The number of divisions in the latitude direction of the sphere
third parameter: rad: The radius of the sphere the
fourth parameter: color: Model colors, is a four elements of an array to
generate a sphere model data, you can specify the sphere of the warp and weft division, the radius of the sphere, and the color of the sphere. The
fourth parameter of this function, like the fifth parameter of the torus about us number, can be omitted. And the return value is also a special object

> Examples

var objsphere = Sphere (16, 16, 1.0, [1.0, 1.0, 1.0, 1.0]);

number of >>cube about us

Composition: Any cube (float side [, vec4 color]) The
first parameter: side:キューブの one jinyong さを table す decimal point
second parameter: color:モデルに suitable する color を table す four つの elements を with
つ Generate a cube model data, the parameter is the cube's length, in addition can specify the color of the cube. The
second parameter of this function, like the fifth parameter of the torus function, can be omitted. The return value is also a special object.

> Examples

var objcube = cube (1.0, [1.0, 1.0, 1.0, 1.0]);

number of >>hsva about us

Composition: any HSVA (int h, float s, float V, float a) The
first parameter: H:hue (hue) Integer (0 ~ 360) The
second parameter: s:saturation (color) (0 ~ 1) The
third parameter: V : Value (Brightness) (0 ~ 1)
the fourth parameter: A:alpha (transparency) (0 ~ 1)
HSV color transform to RGB color. parameter to specify the HSV color. The elements in HSV s and V, and transparency A, range from 0 ~ 1. The
return value is an array of four elements, and the function does not generally modify the transparency.

> Examples

var color = HSVA (180, 1.0, 1.0, 1.0);

Click to download Minmatrixb.js

Welcome to keep an eye on my blog

reprint Please specify: transferred from Lufy_legend's blog Http://blog.csdn.net/lufy_legend