当前位置:网站首页>webgl_ Graphic transformation (rotation, translation, zoom)
webgl_ Graphic transformation (rotation, translation, zoom)
2022-07-07 15:39:00 【Vegetable chicken on the road】
translation
Translate a triangle , You need to measure each component of the vertex coordinates (x and y), Add the triangle on the corresponding axis ( Such as X Axis or Y Axis ) Up translation distance . such as , Will point p(x, y, z) Translation to p’(x’, y’, z’), stay X Axis 、Y Axis 、Z The translation distance in the three directions of the axis is Tx,Ty,Tz, among Tz by 0, As shown in the figure below .
Then on the corresponding component of the coordinate , Add these directly T value , You can be sure p’ It's the coordinates of , As shown below .
x’= x +Tx
y’ = y + Ty
z’=z+Tz
We only need to add a constant to each component of vertex coordinates in the shader to realize the above equation . obviously , This is a vertex by vertex operation , The above modification should occur in vertex shaders , Not in the slice shader .
When modifying the code , Translate the distance Tx、Ty、Tz The value of is passed into the vertex shader , Then they are added to the corresponding components of the vertex coordinates , Assigned to it again gl_Position. Let's take a look at the modified example program .
rotate
Rotation is slightly more complicated than translation , To describe a rotation , You must specify :
● Rotation axis ( The graph will rotate around the axis of rotation ).
● Direction of rotation ( Direction : Clockwise or counter clockwise ).
● Rotation Angle ( The angle through which the figure rotates ).
set sth. up p(x, y, z) rotate β The angle then becomes a point p ‘(x ’ , y ‘,z’): First of all, the rotation is around Z It's done on the axis , therefore z The coordinates will not change , Can be ignored directly ﹔ then ,x Coordinates and y The situation of coordinates is a little complicated , Here's the picture :
In the figure 3.22 in ,r Is from the origin to the point p Distance of , and α yes X The axis rotates to the point p The angle of . Use these two variables to calculate the point p Coordinates of , As shown below :
x = rcosα
y = rsinα
Similarly , You can use r、α、β To show a little p’ Coordinates of , After a series of changes, we get the final equation , As shown below :
x’= r cos (α +β)
y’= r sin (α +β)
===>
x’ = r (cosα cos β - sinα sin β)
y’ = r (sinα cos β + cosα sin β)
===>
x’= x cos β - y sin β
y’= x sin β + y cos β
z’=z
Again , For rotation operation , Also operate on vertex shaders , The modification procedure is as follows :
Above , In defining variables u_cosB and u_sinB when , Why uniform Variable , Because the values of these two variables are independent of vertices .
Transformation matrix : rotate
If the figure is rotated, after the complex operation of Translation , If we calculate as shown above , It's going to be complicated , So we introduce the transformation matrix , It is also the basis for subsequent graphic transformation operations .
Suppose there is a matrix as follows , Homovector (x,y,z), After multiplication, we get a new vector (x’,y’,z’):( Be careful : The multiplication of matrix and vector does not conform to the distribution rate of multiplication ,AxB It's not equal to BxA Of )
In this case , New vector obtained by multiplying matrix and vector , The three components are x’、y’、z, The values are as follows . Be careful , Only when the number of columns of the matrix is equal to the number of rows of the vector , Then you can multiply the two .
x’ = ax + by + cz
y’ = dx + ey + fz
z’ = gx + hy + iz
Now? , To understand how matrices replace mathematical expressions , Next, compare the matrix equation with the mathematical expression .
Bring the results into , You can get a new vector (x’,y’,z’) as follows :
This matrix is called the transformation matrix , Because it will be the vector on the right (x, y,z)“ Transformation ” For the vector on the left (x ', y ‘, z’). The transformation of the transformation matrix above is a rotation , So this matrix can also be called rotation matrix .
4*4 The rotation matrix of
Transformation matrix : translation
Transformation matrix : The zoom
We store each element of the matrix in an array , But the problem is : The matrix is two-dimensional , Its elements are arranged in rows and columns , And the array is one-dimensional , Its elements are just arranged in a line . here , We can store matrix elements in an array in two ways : By row main order and by column main order ,webGL and OpenGL equally , Matrix elements are stored in the array in the main order of columns . Here's the picture :
See here, you should have a certain understanding of the changes in graphics , Then use these changes to achieve complex transformation effects .
边栏推荐
- "Baidu Cup" CTF competition 2017 February, web:include
- Pat grade a 1103 integer factorizatio
- [quick start for Digital IC Validation] 26. Ahb - sramc (6) for system verilog project practice (Basic Points of APB Protocol)
- HW primary flow monitoring, what should we do
- A need to review all the knowledge, H5 form is blocked by the keyboard, event agent, event delegation
- Nacos conformance protocol cp/ap/jraft/distro protocol
- [markdown grammar advanced] make your blog more exciting (IV: set font style and color comparison table)
- The rebound problem of using Scrollview in cocos Creator
- 【Markdown语法高级】让你的博客更精彩(四:设置字体样式以及颜色对照表)
- [understanding of opportunity -40]: direction, rules, choice, effort, fairness, cognition, ability, action, read the five layers of perception of 3GPP 6G white paper
猜你喜欢
【OBS】RTMPSockBuf_Fill, remote host closed connection.
Ctfshow, information collection: web5
Stream learning notes
Wechat applet 01
What is Base64?
Super signature principle (fully automated super signature) [Yun Xiaoduo]
Unity之ASE实现全屏风沙效果
Ctfshow, information collection: web6
HW primary flow monitoring, what should we do
【深度学习】语义分割实验:Unet网络/MSRC2数据集
随机推荐
有一头母牛,它每年年初生一头小母牛。每头小母牛从第四个年头开始,每年年初也生一头小母牛。请编程实现在第n年的时候,共有多少头母牛?
Unity之ASE实现卡通火焰
Keil5 does not support online simulation of STM32 F0 series
Wechat applet 01
Oracle control file loss recovery archive mode method
PAT 甲级 1103 Integer Factorizatio
How to deploy the super signature distribution platform system?
连接ftp服务器教程
什麼是數據泄露
Gd32 F3 pin mapping problem SW interface cannot be burned
Runnable是否可以中断
【搞船日记】【Shapr3D的STL格式转Gcode】
【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC(9)(AHB-SRAMC SVTB Overview)
【数字IC验证快速入门】19、SystemVerilog学习之基本语法6(线程内部通信...内含实践练习)
摘抄的只言片语
Points for attention in porting gd32 F4 series programs to gd32 F3 series
Ctfshow, information collection: web1
居然从408改考自命题!211华北电力大学(北京)
leetcode 241. Different Ways to Add Parentheses 为运算表达式设计优先级(中等)
[make a boat diary] [shapr3d STL format to gcode]