当前位置:网站首页>Getting started with webgl (2)
Getting started with webgl (2)
2022-07-07 15:38:00 【Vegetable chicken on the road】
1. Draw a point
// Vertex shader program
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(-0.5, -0.5, 0.0, 1.0);\n' +
' gl_PointSize = 30.0;\n' +
'}\n';
// Chip shader program
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);\n' +
'}\n';
function main() {
// obtain <canvas> Elements
var canvas = document.getElementById('webgl');
// obtain WebGL Rendering context
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Specify empty <canvas> The color of the
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Empty <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw a point
gl.drawArrays(gl.POINTS, 0, 1);
}
Here we need to talk about the concept of shaders
2. Shaders
webgl There are two kinds of shaders :
(1) Vertex shader ( abbreviation vs): seeing the name of a thing one thinks of its function , It describes the characteristics of vertices , Mainly including location , Color, etc. . It is a point in two-dimensional or three-dimensional space ;
(2) Chip shader ( abbreviation fs): It can be understood as pixels , It is a unit of image , Piece by piece
3. Execution process
4. Execution results
Why is it displayed in the lower left corner ? stay webgl In the system , Divide the display area into four quadrants :
First quadrant :(+,+);
Beta Quadrant :(-,+);
The third quadrant :(-,-);
Quadrant four :(+,-);
**** Other explanations :
gl_Position = vec4(-0.5, -0.5, 0.0, 1.0):vec4 type , Describe the location of x.y.z coordinate , Finally, add a 1.0 As a component , The coordinates are transformed into a homogeneous coordinate .
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0):vec4 type , Describing color r,g,b,a;**
边栏推荐
- The difference between full-time graduate students and part-time graduate students!
- Android -- jetpack: the difference between livedata setValue and postvalue
- Use cpolar to build a business website (2)
- 2022 all open source enterprise card issuing network repair short website and other bugs_ 2022 enterprise level multi merchant card issuing platform source code
- 从 1.5 开始搭建一个微服务框架链路追踪 traceId
- Unity之ASE实现卡通火焰
- Unity之ASE实现全屏风沙效果
- Basic knowledge sorting of mongodb database
- MySQL bit类型解析
- [data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering
猜你喜欢
[Lanzhou University] information sharing of postgraduate entrance examination and re examination
Stream learning notes
Ctfshow, information collection: Web3
[server data recovery] data recovery case of raid failure of a Dell server
Why do we use UTF-8 encoding?
Unity之ASE实现卡通火焰
[quick start of Digital IC Verification] 23. AHB sramc of SystemVerilog project practice (3) (basic points of AHB protocol)
银行需要搭建智能客服模块的中台能力,驱动全场景智能客服务升级
[Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
写一篇万字长文《CAS自旋锁》送杰伦的新专辑登顶热榜
随机推荐
【數據挖掘】視覺模式挖掘:Hog特征+餘弦相似度/k-means聚類
Ctfshow, information collection: web5
2022年5月互联网医疗领域月度观察
Unity's ASE realizes cartoon flame
Why do we use UTF-8 encoding?
Mathematical modeling -- what is mathematical modeling
Ida Pro reverse tool finds the IP and port of the socket server
[Lanzhou University] information sharing of postgraduate entrance examination and re examination
[server data recovery] a case of RAID data recovery of a brand StorageWorks server
【数字IC验证快速入门】22、SystemVerilog项目实践之AHB-SRAMC(2)(AMBA总线介绍)
What are PV and UV? pv、uv
【数据挖掘】视觉模式挖掘:Hog特征+余弦相似度/k-means聚类
Write a ten thousand word long article "CAS spin lock" to send Jay's new album to the top of the hot list
[quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)
[quick start of Digital IC Verification] 19. Basic grammar of SystemVerilog learning 6 (thread internal communication... Including practical exercises)
大表delete删数据导致数据库异常解决
2. Heap sort "hard to understand sort"
CTFshow,信息搜集:web7
Ctfshow, information collection: web8
How to build your own super signature system (yunxiaoduo)?