Open kugimasa opened 4 years ago
Will be using Chrome for this project
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');
OpenGL : Right-hand Coordinate System
DirectX : Left-hand Coordinate System
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.
The Transformation Matrix will be given to the Vertex Shader
What WebGL can draw
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);
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
attribute
modifiersuniform
modifiersvarying
modifiersThere are various VBO(Vertex Buffer Object)s VBO for
and so on ...
The flow of VBO
attribute
variable and VBO in the Vertex Shader*Be sure that the Array is one-dimensional
For the type
attribute in <script>
tag, use
type = "x-shader/x-vertex"
type = "x-shader/x-fragmet"
Filename extension for the shader file the following are commonly used,
.vert
, .vs
.frag
, .fs
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);
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
minMatirx.js
is the Library used in this project
14: Rendering polygons
Rendering Flow
attribute
attribute
uniform
uniform
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.