Webgl programming guide learning (0)

WebGL Programming guide learning , Jieming city ,2022-3-1

0. WebGL Programming , From entering the pit to giving up

• Knowledge path
• 《WebGL Programming Guide 》 Environment building
• WebGL Programming paradigm

0.1 Knowledge path

• Level 1： Understand computer graphics , In particular, rendering related concepts
• Level 2： Used to OpenGL, know

0.2 《WebGL Programming Guide 》 Environment building

0.2.1 TODO

Comments on this book , It will be updated after reading the whole book

0.2.2 Code running environment

• Local operating environment ：MacOS Monterey 12.2.1
• Editor ：VS Code
• This book is right. WebGL Feature support ：WebGL 1.0 API
• The library files provided in this book ：
  • webgl-utils.js: The main function is to obtain WebGL The context of the running browser
  • webgl-debug.js： Mainly provide for WebGL Code , Especially the debugging function of shader code
  • cuon-utils.js： Author defined access WebGL Functions of context , There are also some common shader functions
  • cuon-matrix.js： Some matrix operation functions defined by the author , Other math related things
• Library file download address ： link : https://pan.baidu.com/s/1PBWKxVcl_Kv7iUVf8RtfoQ password : cocs
• Supported browsers ： Suggest Chrome

0.3 WebGL Programming paradigm

0.3.1 WebGL Software architecture

0.3.2 WebGL Application paradigm

HTML5 Introduced tags send JavaScript It is possible to draw graphics dynamically

Programming paradigm

• HTML file ：
  • Build a , Make it possible to draw graphics
  • call JavaScript file , stay JavaScript Use... In the document WebGL Rendering
• JavaScript Program ：
  • Get elements
  • obtain WebGL Drawing context （ That is to say WebGL The area drawn is ）
  • OpenGL Render pipeline

0.3.3 WebGL Rendering pipeline of web pages

TODO

0.3.4 WebGL Render pipeline

1. perform JavaScript Program , call WebGL Related methods
2. perform WebGL Related methods
   1. Operate vertex by vertex —— Vertex shader
   2. Slice by slice operation —— Chip shader
3. Render to color buffer
4. Show

0.3.5 WebGL Program structure

1. Get elements
2. obtain WebGL Drawing context
3. Initialize shaders
4. Set color buffer （ That is to say ） Background color
5. draw

JavaScript Program

//  from HTML obtain canvas Elements 
var canvas = document.getElementById('webgl');
//  obtain WebGL Context 
var gl = getWebGLContext(canvas);
if (!gl){
    
  console.log(' Can't get WebGL Context ');
  return;
}
//  Initialize shaders 
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
    
  console.log(' Failed to initialize shader ');
  return;
}
//  Set color buffer background 
gl.clearColor(0.0, 0.0, 0.0, 1.0)
//  Clear color buffer 
gl.clear(gl.COLOR_BUFFER_BIT)
//  draw 
gl.drawArrays(gl.POINTS, 0, 1)

Shaders Shader（ The string form is written in JavaScript in ）

var VSHADER_SOURCE = ''
var FSHADER_SOURCE = ''