# GLSL 筆記
---
* [rendering pipeline](https://www.khronos.org/opengl/wiki/Rendering_Pipeline_Overview)
* [GLSL rendering pipeline](https://www.lighthouse3d.com/tutorials/glsl-tutorial/pipeline33/)

* [OpenGL 2.0 pipeline](https://en.wikibooks.org/wiki/GLSL_Programming/OpenGL_ES_2.0_Pipeline)

OpenGL 3.2 以後的 pipeline

---
| OpenGL | GLSL | info |
| --- | --- | -- |
| 2.0 | 1.10 | 110 |
| 2.1 | 1.20 | 120 |
| 3.0 | 1.30 | 130 |
| 3.1 | 1.40 | 140 |
| 3.2 | 1.50 | 150 |
| 3.3 | 3.30 | 330 |
| 4.0 之後以此類推 | 4.00 | 400 |
| | |

| OpenGL ES | GLSL ES | WebGL | info |
| -- | -- | -- | -- |
| 2.0 | 1.00 (GLSL 1.20) | 1.0 | 100 |
| 3.0 | 3.00 (GLSL 3.30) | 2.0 | 300 es |

//use openGL 3.0
#version 130

//use openGL ES 3.0
#version 300 es

:::warning
* [WebGl "ERROR: unsupported shader version"](https://stackoverflow.com/a/59777271)
* [檢查瀏覽器的WebGL支援狀況](https://webglreport.com/?v=2)
:::

---
[GLSLangSpec](https://www.khronos.org/registry/OpenGL/index_gl.php)

| keyword | |
| -- | -- |
| GL_ES | openGL ES |
| [uniform](https://www.khronos.org/opengl/wiki/Uniform_(GLSL)) | |
| [gl_position](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/gl_Position.xhtml) | |
| gl_FragColor | ES 3.0 已移除 |

| [conditional compilation](https://www.cs.auckland.ac.nz/references/unix/digital/AQTLTBTE/DOCU_078.HTM) | |
| -- | -- |
| **#ifdef** KEYWORD<br>**#endif** | is defined |
| **#ifndef** KEYWORD<br>**#endif** | not defined |

| [precision](https://stackoverflow.com/a/4430934) | | range | performance | quality |
| -- | -- | -- | -- | -- |
| highp | high precision | 16-bit<br>floating point range: -2^62 to 2^62<br>integer range: -2^16 to 2^16 | low | high |
| mediump | medium precision | 10 bit<br>floating point range: -2^14 to 2^14<br>integer range: -2^10 to 2^10 | medium | medium |
| lowp | low precision | 8 bit<br>floating point range: -2 to 2<br>integer range: -2^8 to 2^8 | high | low |

:::success
使用中等精度的浮點數

#ifdef GL_ES
precision mediump float
#endif

:::

| [qualifier](https://www.shaderific.com/glsl-qualifiers) | |
| -- | -- |
| in | function arg read-only |
| out | function arg write-only |
| inout | function arg read/write |

uniform 變數由外部指定, 內部 read-only

---

[glsl canvas](https://github.com/actarian/glsl-canvas) 簡易測試
:::warning
uniform 需要對應 glslcanvas.js 定義的名稱
:::

<script type="text/javascript" src="https://unpkg.com/glsl-canvas-js/dist/umd/glsl-canvas.min.js"></script>
<canvas class="glsl-canvas" data-fragment-url="target.frag" width="500" height="500"></canvas>

<canvas class="glsl-canvas" data-fragment-url="target.frag" data-textures="file.png" width="200" height="200"></canvas>

---
native function

* [step()](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/step.xhtml)

    //edge > x return 0.0
    //edge <= x return 1.0
    float result = step(edge, x);

* [fract()](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/fract.xhtml)

    //return x - math.floor(x)
    float result = fract(x);

* [atan()](https://community.khronos.org/t/hlsl-to-glsl-atan2-function/53881)
GLSL 沒有 atan2()

---
[varying variable](https://www.lighthouse3d.com/tutorials/glsl-12-tutorial/varying-variables/)
:::warning
A varying variable must be written on a vertex shader
:::

:::warning
In the fragment shader the variable, whose value results from an interpolation of the vertex values computed previously, can only be read.
:::
| shader | access |
| -- | -- |
| vertex | write/read |
| fragment | read-only |

---

ES 2.0 to 3.0
:::info
ES 2.0

//vertex shader
attribute vec2 texcoord;
varying vec2 texUV;

//fragment shader
varying vec2 texUV;
uniform sampler2D tex;

void main(){
    gl_FragColor = texture2D(tex, texUV);
}

ES 3.0 以後

//vertex shader
in vec2 texcoord;
out vec2 texUV;

//fragment shader
in vec2 texUV;
uniform sampler2D tex;

out vec4 fragColor;

void main(){
    fragColor = texture(tex, texUV);
}

:::

---
輔助工具
* [GraphToy](http://www.iquilezles.org/apps/graphtoy/)
* [Shadershop](http://tobyschachman.com/Shadershop/)

---
###### tags: `GLSL`