当前位置:网站首页>Getting started with webgl (3)
Getting started with webgl (3)
2022-07-07 15:39:00 【Vegetable chicken on the road】
Use attribute Variable
Purpose of use : Transfer location information from js Passed to vertex shaders in code , There are two main ways ,attribute Variables and uniform Variable ;
attribute Variable : Data related to vertices ;
uniform Variable : So the vertices are the same ( Vertex independent ) data .
Code up :
// Vertex shader program
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n'+
'void main() {\n' +
' gl_Position = a_Position ;\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;
}
// obtain attribute Storage location
let a_Position = gl.getAttribLocation(gl.program,"a_Position");
if(a_Position < 0){
console.log(" Failed to get storage location !");
return;
}
// Pass the vertex position to attribute Variable
// gl.vertexAttrib1f(a_Position,0.0);
// gl.vertexAttrib2f(a_Position,0.0,0,0);
gl.vertexAttrib3f(a_Position,0.0,0.0,0.0);
// 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);
}
Above , The process is :
(1)attribute vec4 a_Position Variables are declared in attribute, Must be a global variable , Passed in from outside the shader ;
(2) Use getAttribLocation Method to get attribute The address of the variable , The value returned >=0 It means that the address of the variable is returned ,=-1 It means that the variable does not exist ;
(3) Use vertexAttrib3f Method pass value .
This method has 3 Homologous functions , Represents the incoming 1-4 It's worth ,, The length of the array of numbers to be changed in the function . If declared attribute A variable is vec4 type , Only incoming 1 Parameters , The default complement of the last two components is 0.0, The last component is 1.0;
(4) draw , Or draw a dot , It's just to change the way of external value transfer
边栏推荐
- 【数字IC验证快速入门】18、SystemVerilog学习之基本语法5(并发线程...内含实践练习)
- "Baidu Cup" CTF competition 2017 February, web:include
- [server data recovery] data recovery case of raid failure of a Dell server
- HPDC smart base Talent Development Summit essay
- [deep learning] semantic segmentation experiment: UNET network /msrc2 dataset
- Ctfshow, information collection: web4
- 众昂矿业:萤石继续引领新能源市场增长
- [target detection] yolov5 Runtong voc2007 data set
- Win10 or win11 taskbar, automatically hidden and transparent
- [Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
猜你喜欢
Ctfshow, information collection: web13
【數據挖掘】視覺模式挖掘:Hog特征+餘弦相似度/k-means聚類
简述keepalived工作原理
Ctfshow, information collection: web9
[quick start of Digital IC Verification] 29. Ahb-sramc (9) (ahb-sramc svtb overview) of SystemVerilog project practice
Unity's ASE realizes cartoon flame
【跟着江科大学Stm32】STM32F103C8T6_PWM控制直流电机_代码
[deep learning] semantic segmentation experiment: UNET network /msrc2 dataset
15. Using the text editing tool VIM
Niuke real problem programming - Day17
随机推荐
【数字IC验证快速入门】25、SystemVerilog项目实践之AHB-SRAMC(5)(AHB 重点回顾,要点提炼)
一个需求温习到的所有知识,h5的表单被键盘遮挡,事件代理,事件委托
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
Keil5 does not support online simulation of STM32 F0 series
PAT 甲级 1103 Integer Factorizatio
[data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering
How to build your own super signature system (yunxiaoduo)?
【数字IC验证快速入门】22、SystemVerilog项目实践之AHB-SRAMC(2)(AMBA总线介绍)
Runnable是否可以中断
What is data leakage
Niuke real problem programming - day20
如何在opensea批量发布NFT(Rinkeby测试网)
Stream learning notes
Stm32f103c8t6 PWM drive steering gear (sg90)
Database exception resolution caused by large table delete data deletion
【服务器数据恢复】戴尔某型号服务器raid故障的数据恢复案例
简述keepalived工作原理
Bye, Dachang! I'm going to the factory today
使用cpolar建立一个商业网站(2)
Use cpolar to build a business website (2)