current position：Home>Webgl lesson 25: basic knowledge of mapping August challenge
Webgl lesson 25: basic knowledge of mapping August challenge
2021-08-27 08:42:02 【dismember an ox as skillfully as a butcher】
This is my participation 8 The fourth of the yuegengwen challenge 11 God , Check out the activity details ：8 Yuegengwen challenge
In this paper, the title ：WebGL Lesson 25 ： The basics of mapping ｜ 8 Yuegengwen challenge Copy code
This article is WebGL Course column Of the 25 piece , It is strongly recommended to start from the front . Because I spent a lot of time explaining the concept of vector and matrix operation . These basics will affect your thinking .
We know a picture , Even if it's small , There are thousands of pixels .
But we are
WebGL The number of vertices , Usually not so much .
such as , Use the way we did last time , Draw a square , It was introduced
12 A little bit nothing more .( If you think it's a four point , You can go back to the last class and take a look at , Then taste the content of this class )
that , If we need to fill this square with a picture , What to do .
We can never , A pixel , Just prepare a vertex , It won't explode yet .
So , Still want to review
WebGL The principle of drawing triangles ：
- Position the three points of the triangle
- According to the incoming color , Or according to shader The color in , Draw the dots
interpolation( The point is this sentence )
Interpolation in-depth explanation
Two point interpolation
What is two-point interpolation ？ in other words , Now there are two points : and .
spot A The color of the is RGB To express is to (1,1,1), That is, pure white .
spot B The color of the is RGB To express is to (0,0,0), That is, pure black .
The problem is coming. , take AB Connect , ask AB What is the color of any point on the line segment ? Copy code
We use our
A simple feeling To come to a conclusion ：
He who is near to the red, he who is near to the black , That is to say near A White near B Black Copy code
The specific formula will not be listed , When you need it , Then list .
Three point interpolation
This will take a little time to say . Suppose there are three points : ABC, The colors are : red green blue .
Like the picture below ：
Okay , So these three points , Inside the triangle , Any point , For example, it , Let's make a point D come out , So this point D, If you use interpolation , What color should it be ?
Let's give an interesting conclusion ：
If ABC The coordinates of the three points are
If D The coordinates of point
that D The color of the point
in other words ： We find Three numbers a b c. If these three numbers can ABC The coordinates of are combined into D The coordinates of point , that D The color of the point , That is, these three numbers will ABC Combine the colors of .
Use a matrix to express
type 1, That is to say D The point coordinates are obtained ：
Use a matrix to express
type 2, That is to say D Point color to get ：
Formally speaking , But everything ABC What three points have , Whatever you are , Or color , Or something else , All can be used abc These three numbers are combined .
- For example ,
- For example ,
ABC The temperatures at the three points are 1℃, 30℃, 50 ℃. It is known that D Point coordinates ：
ask ： If the interpolation algorithm is used , that D What should be the temperature at the point ？
answer ： We use it abc Combine three numbers .
Sampling information ：UV
Need to know , The purpose of our class , It's not a simple synthesis of a color .
Instead, fill a picture in the middle .
It is necessary to add a step , It's our introduction
WebGL The point of , How does it correspond to the picture itself .
We know a picture , It's just one. width * height The rectangular area of .
Let's put this rectangular area
The lower left corner is regarded as the origin (0,0)
In the upper right corner (1,1) Words
So anywhere in the middle , All have a coordinate , Let's write this coordinate as (u, v).
for example ,
- In the center of the picture (u, v) = (0.5, 0.5)
- Upper left corner (u, v) = (0, 1)
- Right lower corner (u, v) = (1, 0)
in other words , Any one (u,v) Can be on a picture , Find a place , And this location must have the image itself RGB Color information .
This is how we specify the picture information of a coordinate point , The message is UV Information .
for example ,A Dot (u,v) = (0,0), that ,A Point sampling , Is to sample in the lower left corner of the picture .
for example ,B Dot (u,v) = (0,1), that ,B Point sampling , Is to sample in the upper left corner of the picture .
for example ,C Dot (u,v) = (1,1), that ,C Point sampling , Is to sample in the upper right corner of the picture .
So if A little bit D,D The coordinates of point ：
that D Dot (u,v) How much is? ？ According to the previous section , The algorithm of three number interpolation obtains ：
Okay , Now? D Dot (u,v) Come out , So the corresponding ,D Points can also be on the picture , Find a point , And then sampling .
WebGL When drawing triangles , If we provide both pictures and coordinates UV Information , So the other points in a triangle UV Information , It can be interpolated , With UV After the message , You can sample on the picture , then , The interior of the triangle can be filled with the color sampled from the picture .
End of text , Here's the answer Copy code
Xiao Neng can say ： ok , It's easy to understand , Do you want to practice in the next class , That is to do some code ？
- answer ： Yes , This class is about principles , The next lesson will release the code .
author[dismember an ox as skillfully as a butcher],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
Front end interview daily 3 + 1 - day 858
Spring Webflux tutorial: how to build reactive web applications
[golang] walk into go language lesson 24 TCP high-level operation
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
-  typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich