# WebGL

{%hackmd @RintarouTW/About %}

[Learn WebGL](http://learnwebgl.brown37.net/index.html)

[The Book of Shaders](https://thebookofshaders.com)

http://math.hws.edu/graphicsbook/index.html

https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html

vertex := (x, y, z)

triangles(mesh) := indexes of vertexes (follow winding rule)

## Graphic Pipeline

<img src="http://learnwebgl.brown37.net/_images/pipeline_with_clipping.png" style="filter:invert(.9)"></img>
(From Learn WebGL)

## Coordinate Systems

- World Space : World coordinate in 3D coordinate (X: right Y: up, Z: point out of screen, right-handed)
- Camera Space : Relative to the Camera's frustrum coordinate in 3D. (u: right,v: up,n: camera's back, right-handed), Camera's up is not the same as world's up if camera is tilting or rotating horizontally.
- Viewport : 2D space of the viewport (final rendered image/framebuffer) (Model View matrix is before projection matrix, it's not related with this viewport)

## Transforms

- Model View Transform : all vertexes of a model is defined relative to the model's origin. we can apply a transform to rotate/scale/translate all vertexes relative to the model's origin and get the world coodinates of the transformed vertexes.

## Shader Programs

- **vertex shader** (`gl_Position`) : before rasteration, convert to transformed pixel coordinate. get vertexes/colors from array buffer by binding the attribute variable to the array buffer component. Also prepares and passes data about the vertex to the fragment shader.
- **fragment shader** (`gl_FragColor`) : after rasterization.

### Variables in Shader Programs

- `uniform` : set once no change
- `attribute` : bind value from the buffer.
- `varying` : varying variable are linearly interpolated. any varying variable declared in a vertex shader will be passed to the fragment shader for that individual vertex

:::info
The vertex shader puts data into a varying variable and the fragment shader gets an interpolated copy of that value
:::

### Variables Binding in JavaScript

Array Buffer must be `Float32Array`.

var f32 = new Float32Array(size);

gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

uint getUniformLocation(Object shader_program, string variable_name);
ulong getAttribLocation(Object shader_program, string variable_name);

gl.getUniformLocation()
gl.getAttribLocation()

### Set Variable Value

void uniform[1234][fi](uint location, value1, value2, value3, ...);
void uniform[1234][fi]v(uint location, Array values);
void uniformMatrix[234]fv(uint location, bool transpose, Array matrix);

- `[1234]` number of values
- `[fi]` float or integer
- `v` stands for vector(Array)

## Interleaved Buffers

http://learnwebgl.brown37.net/rendering/interleaved_buffers.html

gl.vertexAttribPointer(uint index, int size, enum type, bool normalized, long stride, long offset);

## Camera

http://learnwebgl.brown37.net/07_cameras/camera_introduction.html

Interesting Look At design, not really specified by the camera coordinates, the camera coordinates is calculated from the camera location and the center(target of the camera), and then cross the up vector to get the real coordinate of the camera.

- eye : the location of the camera.
- center : the location that camera is look_at().
- up : since the camera is **always** looking at the `center`, up vector(relative to the camera(eye) location) is used to calculate the right and real up directions(axis).

### Look At Design

- virtual camera
Defines a position and orientation from which to view a scene.
- camera coordinate system
Three orthogonal axes that form a right-handed coordinate system. Each axis is defined as a vector in global coordinates.
- eye
The 3D location of a camera defined in global coordinates.
- camera center point
The 3D location that a camera is pointed towards. This point will always be rendered exactly in the center of the output image.
- camera up vector
A 3D vector that points in the general direction of “up” from the camera. The exact direction of “up” for the camera is calculated from the u and n vectors.

[Linear Transformations](/yajXqd7PQnK7N6fr4HL3Iw)

## Simple Lighting Models

- Ambient (環境光) : 僅能展現物體原本的顏色
- Diffuse (散射光): 光打在物體上呈現各角度散射, cos(入射角), 入射角 = 光與 normal 間的夾角
- Specular (反射光): 光打在物體上後的反射光, $\theta$ = 鏡頭與反射光間的夾角 $cos(\theta)^{shininess}$

## Types of Light Sources

http://learnwebgl.brown37.net/09_lights/lights_other_models.html

- Point : 點光源 light source location 僅為一點 (<light position>)
- Spotlight : 聚光燈 (light position, cone angle)
- 範圍為一角錐
- 方向性
- 強度隨離心距離減弱
- Sun : 平行光 <light direction>
- 以方向來描述
- Light Direction was relative to world space, so need to be transformed to **camera space** first.
- Area : 區域光, 如日光燈.
- 投影 vertex 在 Area 平面上，並判斷此投影是否在 area 中
- 如在 area 中，以此投影點為光源位置
- 不在 area 中，以離 area 最近(邊緣)位置為光源位置

## Interaction (TODO)

## Normal maps

- Normal Map
- Phong Shading
- Bump Map

## Texture Mapping

- image texture
- procedural texture mapping
http://www.upvector.com/?section=Tutorials&subsection=Intro%20to%20Procedural%20Textures

### Image Texture Unit

## Implementation Design Consideration

model, shader program, scene rendering

- model
- vertexes
- light source
- objects
- materials
- texture map (with uv map)
- normal map
- bump map
- procedural map
- shaders
- vertex shader
- model transformation
- 3d to 2d projection
- vertex color
- fragment shader
- light source
- different lighting models
- ambient (environment)
- specular (reflection)
- diffuse
- different light source types
- point
- spotlight
- sun (parallel)
- area
- different materials
- absorption / magnitude
- transparency
- scene rendering
- scene graph update
- object nodes (motion if physics)
- camera (motion)
- matrix update
- color update
- physics system
- nodes motion update
- particle system
- smoke/fire/fog/rain/etc...

## Practices

- [X] 2D texture
- load texture
- create texture object.
- load to gl texture image unit.
- vertex uv map
- shaders
- matrix transforms
- [x] 3D
- cube
- with texture
- using darwElements() instead of drawArray()
- [x] Camera Control (Look At Design)
- basic look up/down/left/right
- move up/down/left/right
- [x] Lighting modeling
- specular
- ambient
- diffuse
- attenuation
- [ ] Light source types
- [x] point
- [x] directional(sub light)
- [ ] spotlight
- [ ] area
- [ ] Maps - materials
- normal map (Phong shading)
- bump map
- [ ] Shadow
- [ ] Interaction (Mouse Location 2D -> 3D)
- [ ] Scene Graph : Consider WebGPU instead or learn from Babylon.js.

###### tags: `WebGL`