当前位置:网站首页>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;**
边栏推荐
- Create lib Library in keil and use lib Library
- [quick start of Digital IC Verification] 24. AHB sramc of SystemVerilog project practice (4) (AHB continues to deepen)
- Ctfshow, information collection: Web3
- Super signature principle (fully automated super signature) [Yun Xiaoduo]
- Niuke real problem programming - day18
- Ctfshow, information collection: web12
- Ctfshow, information collection: web13
- Typescript release 4.8 beta
- Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
- Super simple and fully automated generation super signature system (cloud Xiaoduo minclouds.com cloud service instance), free application in-house test app distribution and hosting platform, maintenan
猜你喜欢
2022 all open source enterprise card issuing network repair short website and other bugs_ 2022 enterprise level multi merchant card issuing platform source code
CTFshow,信息搜集:web5
【深度学习】图像超分实验:SRCNN/FSRCNN
Ctfshow, information collection: web10
TypeScript 发布 4.8 beta 版本
[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
[quick start of Digital IC Verification] 19. Basic grammar of SystemVerilog learning 6 (thread internal communication... Including practical exercises)
Unity's ASE achieves full screen sand blowing effect
Summer safety is very important! Emergency safety education enters kindergarten
随机推荐
Ctfshow, information collection: web9
[机缘参悟-40]:方向、规则、选择、努力、公平、认知、能力、行动,读3GPP 6G白皮书的五层感悟
Whether runnable can be interrupted
最安全的证券交易app都有哪些
[original] all management without assessment is nonsense!
[quick start of Digital IC Verification] 29. Ahb-sramc (9) (ahb-sramc svtb overview) of SystemVerilog project practice
使用Scrapy框架爬取网页并保存到Mysql的实现
[Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
什么是数据泄露
大表delete删数据导致数据库异常解决
There is a cow, which gives birth to a heifer at the beginning of each year. Each heifer has a heifer at the beginning of each year since the fourth year. Please program how many cows are there in the
#HPDC智能基座人才发展峰会随笔
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
【数据挖掘】视觉模式挖掘:Hog特征+余弦相似度/k-means聚类
【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC(9)(AHB-SRAMC SVTB Overview)
Yunxiaoduo software internal test distribution test platform description document
什麼是數據泄露
居然从408改考自命题!211华北电力大学(北京)
【原创】一切不谈考核的管理都是扯淡!
如何在opensea批量发布NFT(Rinkeby测试网)