当前位置:网站首页>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;**
边栏推荐
- What are PV and UV? pv、uv
- Nacos conformance protocol cp/ap/jraft/distro protocol
- [deep learning] semantic segmentation experiment: UNET network /msrc2 dataset
- CTFshow,信息搜集:web8
- 从 1.5 开始搭建一个微服务框架链路追踪 traceId
- Ctfshow, information collection: web4
- 【数字IC验证快速入门】25、SystemVerilog项目实践之AHB-SRAMC(5)(AHB 重点回顾,要点提炼)
- 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
- 知否|两大风控最重要指标与客群好坏的关系分析
- @Introduction and three usages of controlleradvice
猜你喜欢
【數字IC驗證快速入門】26、SystemVerilog項目實踐之AHB-SRAMC(6)(APB協議基本要點)
Ctfshow, information collection: web5
【数字IC验证快速入门】23、SystemVerilog项目实践之AHB-SRAMC(3)(AHB协议基本要点)
How to create Apple Developer personal account P8 certificate
TypeScript 发布 4.8 beta 版本
Use cpolar to build a business website (2)
CTFshow,信息搜集:web6
Ctfshow, information collection: web4
【OBS】RTMPSockBuf_Fill, remote host closed connection.
[quick start for Digital IC Validation] 26. Ahb - sramc (6) for system verilog project practice (Basic Points of APB Protocol)
随机推荐
【数字IC验证快速入门】23、SystemVerilog项目实践之AHB-SRAMC(3)(AHB协议基本要点)
#HPDC智能基座人才发展峰会随笔
Nacos conformance protocol cp/ap/jraft/distro protocol
What is data leakage
Ctfshow, information collection: web6
数学建模——什么是数学建模
【數據挖掘】視覺模式挖掘:Hog特征+餘弦相似度/k-means聚類
[make a boat diary] [shapr3d STL format to gcode]
[follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
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
15. Using the text editing tool VIM
Write a ten thousand word long article "CAS spin lock" to send Jay's new album to the top of the hot list
Connecting FTP server tutorial
Briefly describe the working principle of kept
CTFshow,信息搜集:web4
【数字IC验证快速入门】24、SystemVerilog项目实践之AHB-SRAMC(4)(AHB继续深入)
CTFshow,信息搜集:web6
【OBS】RTMPSockBuf_Fill, remote host closed connection.
银行需要搭建智能客服模块的中台能力,驱动全场景智能客服务升级
Excerpted words