search

kugimasa / webgl-page

https://kugimasa.github.io/webgl-page/
0 stars 0 forks source link

Introduction to WebGL #1

Open kugimasa opened 4 years ago

kugimasa commented 4 years ago

14/89 Read

Studying WebGL using "wgld.org" *The title of the contents are translated in English

Memo of this project will be written bellow.

kugimasa commented 4 years ago

1: Browser

Will be using Chrome for this project

kugimasa commented 4 years ago

2: Knowing canvas

CanvasRenderingContext2D

It provides the 2D rendering context for the drawing surface of a <canvas> element.

Reference here

const canvas = document.getElementById('kugi-canvas');
const ctx = canvas.getElementById('2d');
kugimasa commented 4 years ago

3: Basics of 3D drawing

OpenGL : Right-hand Coordinate System

DirectX : Left-hand Coordinate System

Keywords

kugimasa commented 4 years ago

4: Getting ready to render

WebGL doesn't have a fixed graphics pipeline. So we need to write the Transformation Matrix by ourselves.

Will be writing the shader code inside the JavaScript file for this project.

Keywords

kugimasa commented 4 years ago

5: Basics of Matrix

The Transformation Matrix will be given to the Vertex Shader

kugimasa commented 4 years ago

6: Vertex and Polygon

What WebGL can draw

Keywords

kugimasa commented 4 years ago

7: Initializing the context

Set the canvas size

const canvas = documet.getElementById('kugi-canvas');
canvas.width = 640;
canvas.height = 480;

Get webgl context from canvas

const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

And finally initialize canvas

gl.clearColor([R, G, B, A]);
gl.clear(gl.COLOR_BUFFER_BIT);
kugimasa commented 4 years ago

8: Basics of Shader

The Vertex Shader is called first then -> Fragment Shader Data must be assigned to gl_Position in the VertexShader However it is not required for gl_FragColor in FragmetShader

Keywords

kugimasa commented 4 years ago

9: Basics of Vertex Buffer

There are various VBO(Vertex Buffer Object)s VBO for

and so on ...

The flow of VBO

  1. Store vertex information in an Array
  2. Create VBO
  3. Give the Array data to VBO
  4. Connect the attribute variable and VBO in the Vertex Shader

*Be sure that the Array is one-dimensional

Keywords

kugimasa commented 4 years ago

10: Matrix Operations and Libraries

Keywords

kugimasa commented 4 years ago

11: Compiling the Shader

For the type attribute in <script> tag, use

Filename extension for the shader file the following are commonly used,

Compiling Shader

var shader = gl.createShader([gl.VERTEX_SHADER] or [gl.FRAGMENT_SHADER]);
gl.shaderSource(shader, [<script>Element].text);
gl.compileShader(shader);

Creating Program Object

var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);

Keywords

kugimasa commented 4 years ago

12: Object data and Vertex attributes

If you want to use N points, you will need N arrays having the positional information

Creating VBO

var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

*Binding buffer to WebGL is ONE at a time

Keywords

kugimasa commented 4 years ago

13: minMatrix.js

minMatirx.js is the Library used in this project

Keywords

kugimasa commented 4 years ago

14: Rendering polygons スクリーンショット 2020-04-20 14 25 31

Rendering Flow

  1. Initialize canvas and webgl context
  2. Create Vertex Shader & Fragment Shader
  3. Create Program Object and link with the shaders
  4. Get attribute
  5. Create VBO and assign attribute
  6. Create MVP-Matrix
  7. Get uniform
  8. Apply MVP-Matrix to uniform
  9. Render