WebGL-Shader着色器编程语言GLSL学习

中文入门教程:
thebookofshaders.com/
https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-shaders-and-glsl.html
http://www.webgl3d.cn/WebGL/
https://juejin.cn/post/7055552513738539022

在线编程工具:
https://www.shadertoy.com/
http://editor.thebookofshaders.com/
https://cyos.babylonjs.com/

国内入门教程:
https://juejin.cn/post/7055552513738539022

着色器展览馆
https://www.shadertoy.com/results

一、基础

常见着色器输入(参考https://www.shadertoy.com/)

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

babylon.js的默认输入:

因为显卡的架构,所有线程的输入值必须统一(uniform),而且必须设为只读。也就是说,每条线程接收相同的数据,并且是不可改变的数据。

你可以把 uniforms 想象成连通 GPU 和 CPU 的许多小的桥梁。虽然这些 uniforms 的名字千奇百怪,但是在这一系列的例子中我一直有用到:u_time (时间), u_resolution (画布尺寸)和 u_mouse (鼠标位置)。按业界传统应在 uniform 值的名字前加 u_ ,这样一看即知是 uniform。尽管如此你也还会见到各种各样的名字。

书籍

常见问题

1 float计算问题

GLSL 语言规格比C语言更加严格,比如说-号,就要求两边均强制为float,必须用float()再次转换。

float utime = time - float(int(time));