当前位置:网站首页>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
边栏推荐
- [quick start for Digital IC Validation] 26. Ahb - sramc (6) for system verilog project practice (Basic Points of APB Protocol)
- [Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
- 【搞船日记】【Shapr3D的STL格式转Gcode】
- 【兰州大学】考研初试复试资料分享
- [understanding of opportunity -40]: direction, rules, choice, effort, fairness, cognition, ability, action, read the five layers of perception of 3GPP 6G white paper
- How to build your own super signature system (yunxiaoduo)?
- Ida Pro reverse tool finds the IP and port of the socket server
- Ctfshow, information collection: web1
- 【OBS】RTMPSockBuf_Fill, remote host closed connection.
- 大表delete删数据导致数据库异常解决
猜你喜欢
HW primary flow monitoring, what should we do
[server data recovery] a case of RAID data recovery of a brand StorageWorks server
[Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
Ctfshow, information collection: web8
【深度学习】图像超分实验:SRCNN/FSRCNN
Unity之ASE实现全屏风沙效果
How to release NFT in batches in opensea (rinkeby test network)
【跟着江科大学Stm32】STM32F103C8T6_PWM控制直流电机_代码
[understanding of opportunity -40]: direction, rules, choice, effort, fairness, cognition, ability, action, read the five layers of perception of 3GPP 6G white paper
[quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)
随机推荐
【兰州大学】考研初试复试资料分享
【OBS】RTMPSockBuf_Fill, remote host closed connection.
大表delete删数据导致数据库异常解决
Android -- jetpack: the difference between livedata setValue and postvalue
2. 堆排序『较难理解的排序』
一个需求温习到的所有知识,h5的表单被键盘遮挡,事件代理,事件委托
简述keepalived工作原理
Nacos conformance protocol cp/ap/jraft/distro protocol
How to release NFT in batches in opensea (rinkeby test network)
【数字IC验证快速入门】19、SystemVerilog学习之基本语法6(线程内部通信...内含实践练习)
Write a ten thousand word long article "CAS spin lock" to send Jay's new album to the top of the hot list
众昂矿业:萤石继续引领新能源市场增长
居然从408改考自命题!211华北电力大学(北京)
The difference between full-time graduate students and part-time graduate students!
Ctfshow, information collection: web2
2022全开源企业发卡网修复短网址等BUG_2022企业级多商户发卡平台源码
[data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering
MySQL bit type resolution
The download button and debug button in keil are grayed out
Unity之ASE实现全屏风沙效果