当前位置:网站首页>Vertex shader to slice shader procedure, varying variable
Vertex shader to slice shader procedure, varying variable
2022-07-07 15:39:00 【Vegetable chicken on the road】
varying Variable : Pass data from vertex shader to slice shader .
varying Variables can only be float( And related vec2,vec3,vec4,mat2,mat3,mat4).
We learned earlier that vertex shaders control the position of geometry 、 Dimensions even specify the color of the geometry , The final slice shader determines the color of the geometry ! But we don't know the specific process between them !
Now let's understand the two processes :
Graphic assembly process : The task of this step is , The left side of isolated vertices is assembled into geometry , The category of geometry is determined by gl.drawArrays() The first parameter of the function determines .
Grating process : The task of this step is to convert the assembled geometry into pieces .
The process from vertex shader to slice shader
******************************************************************************************
Ahead gl.deawArrays() The execution of the function (n=3):
step :
(1) according to gl.drawArrays() Parameters of n, Vertex shaders will be executed n Time ( Execute vertex shader results : Input and store the coordinates in the assembly area )
(2) Start assembly drawing . Use the incoming point coordinates , according to gl.drawArrays() The first parameter information of ( Such as :gl.TRANGLES) To decide how to assemble .
(3) Rasterize
Example :
// Vertex shader program
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n'+
'attribute vec4 a_Color;\n'+
'varying vec4 v_Color;\n'+
'void main() {\n' +
'gl_Position = a_Position ;\n' +
'v_Color = a_Color;\n'+
'}\n';
// Chip shader program
var FSHADER_SOURCE =
'precision mediump float;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
'gl_FragColor = v_Color;\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;
}
// Set vertex position
var n = initVertexBuffers(gl);
if(n<0){
console.log("fail initialTextexBuffer");
return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Empty <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,n);
}
function initVertexBuffers(gl) {
var verticesColors = new Float32Array([
0.0 , 0.5 , 1.0,0.0,0.0,
-0.5 , -0.5 , 0.0,1.0,0.0,
0.5 , -0.5 , 0.0,0.0,1.0
]);
var n =3;
// Create buffer object
var vertexColorBuffer = gl.createBuffer();
if (!vertexColorBuffer) {
console.log("vertexColorBuffer not exit");
return;
}
// Bind the buffer object to the target
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
// Write data
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
var FSIZE = verticesColors.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program,"a_Position");
// Assign cache objects to a_position
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE*5,0);
// Connect a_position Change to the cache object assigned to it
gl.enableVertexAttribArray(a_Position);
var a_color = gl.getAttribLocation(gl.program,"a_Color");
// Assign cache objects to a_position
gl.vertexAttribPointer(a_color,2,gl.FLOAT,false,FSIZE*5,FSIZE*2);
// Connect a_position Change to the cache object assigned to it
gl.enableVertexAttribArray(a_color);
return n;
}
Running effect :
Why is it such an effect , Because it involves the process of color interpolation :
边栏推荐
- The significance of XOR in embedded C language
- 【数字IC验证快速入门】25、SystemVerilog项目实践之AHB-SRAMC(5)(AHB 重点回顾,要点提炼)
- [follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
- [markdown grammar advanced] make your blog more exciting (IV: set font style and color comparison table)
- STM32F103C8T6 PWM驱动舵机(SG90)
- [quick start of Digital IC Verification] 22. Ahb-sramc of SystemVerilog project practice (2) (Introduction to AMBA bus)
- 【數據挖掘】視覺模式挖掘:Hog特征+餘弦相似度/k-means聚類
- Database exception resolution caused by large table delete data deletion
- 【兰州大学】考研初试复试资料分享
- [quick start of Digital IC Verification] 23. AHB sramc of SystemVerilog project practice (3) (basic points of AHB protocol)
猜你喜欢
如何在opensea批量发布NFT(Rinkeby测试网)
Steps to create P8 certificate and warehousing account
【数字IC验证快速入门】20、SystemVerilog学习之基本语法7(覆盖率驱动...内含实践练习)
Ctfshow, information collection: Web3
With 8 modules and 40 thinking models, you can break the shackles of thinking and meet the thinking needs of different stages and scenes of your work. Collect it quickly and learn it slowly
从 1.5 开始搭建一个微服务框架链路追踪 traceId
[target detection] yolov5 Runtong voc2007 data set
【目标检测】YOLOv5跑通VOC2007数据集
Ctfshow, information collection: web9
What is Base64?
随机推荐
Oracle控制文件丢失恢复归档模式方法
MySQL bit类型解析
[quick start of Digital IC Verification] 22. Ahb-sramc of SystemVerilog project practice (2) (Introduction to AMBA bus)
How to release NFT in batches in opensea (rinkeby test network)
【数据挖掘】视觉模式挖掘:Hog特征+余弦相似度/k-means聚类
【數字IC驗證快速入門】20、SystemVerilog學習之基本語法7(覆蓋率驅動...內含實踐練習)
[understanding of opportunity -40]: direction, rules, choice, effort, fairness, cognition, ability, action, read the five layers of perception of 3GPP 6G white paper
MongoDB数据库基础知识整理
银行需要搭建智能客服模块的中台能力,驱动全场景智能客服务升级
【数字IC验证快速入门】18、SystemVerilog学习之基本语法5(并发线程...内含实践练习)
“百度杯”CTF比赛 2017 二月场,Web:include
2022全开源企业发卡网修复短网址等BUG_2022企业级多商户发卡平台源码
全日制研究生和非全日制研究生的区别!
[Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
知否|两大风控最重要指标与客群好坏的关系分析
[quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)
什么是数据泄露
[Lanzhou University] information sharing of postgraduate entrance examination and re examination
Nacos一致性协议 CP/AP/JRaft/Distro协议
大表delete删数据导致数据库异常解决