登峰造极境

  • WIN
    • CSharp
    • JAVA
    • OAM
    • DirectX
    • Emgucv
  • UNIX
    • FFmpeg
    • QT
    • Python
    • Opencv
    • Openwrt
    • Twisted
    • Design Patterns
    • Mysql
    • Mycat
    • MariaDB
    • Make
    • OAM
    • Supervisor
    • Nginx
    • KVM
    • Docker
    • OpenStack
  • WEB
    • ASP
    • Node.js
    • PHP
    • Directadmin
    • Openssl
    • Regex
  • APP
    • Android
  • AI
    • Algorithm
    • Deep Learning
    • Machine Learning
  • IOT
    • Device
    • MSP430
  • DIY
    • Algorithm
    • Design Patterns
    • MATH
    • X98 AIR 3G
    • Tucao
    • fun
  • LIFE
    • 美食
    • 关于我
  • LINKS
  • ME
Claves
长风破浪会有时,直挂云帆济沧海
  1. 首页
  2. Platforms
  3. WEB
  4. WebGL
  5. 正文

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

2022-11-01
中文入门教程:
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。尽管如此你也还会见到各种各样的名字。

-

书籍

webgl-reference-card-1_0下载
opengles_shading_language下载

常见问题

1 float计算问题

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

float utime = time - float(int(time));
标签: 暂无
最后更新:2022-11-11

代号山岳

知之为知之 不知为不知

点赞
< 上一篇
下一篇 >

COPYRIGHT © 2099 登峰造极境. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

蜀ICP备14031139号-5

川公网安备51012202000587号