@ codejen/ pack- glsl

A 类 简 gLSL 的包: 碎片和顶点阴影启动器, 加上您可以降入任何阴影器的功能 。 WebGL2的GLSL ES 3.00是默认的;每件事物也编译为桌面 GLSL 3.30 / 4.10 核心,以及 glsl:port 将原型从浏览器移动到 C++/OpenGL 时,切换阴影头.

联合国 https://learosema.github.io/jen/glsl.html 页面存档备份,存于互联网档案馆

安装

npm install --save-dev @codejen/pack-glsl   # or: npm install -g @codejen/jen @codejen/pack-glsl

jen glsl:frag --name=Clouds                                    # shaders/clouds.frag.glsl
jen glsl:util --fns=rot2,remap --into=shaders/clouds.frag.glsl # insert helpers before main()
jen glsl:port --file=shaders/clouds.frag.glsl --to=410         # ready for cpp:sdl3-opengl
jen cpp:shader --file=shaders/clouds.frag.glsl                 # (pack-cpp) embed it in the CMake build

WebGL 游乐场

jen glsl:webgl --name=Clouds            # index.html, shader-canvas.js, shaders/clouds.frag.glsl
jen glsl:webgl --name=Clouds --inline   # shader inside index.html – opens straight from disk

<shader-canvas> 是一个单一的无依赖脚本。 它会供养 uTime, (中文(简体) ), uResolution 财务报告和审定财务报表 uMouse,在画布上显示原始行号的编译错误,并使用 live 每当阴影文件更改时会重新编译(拖动文件需要任何静态服务器,例如. npx serve) (中文(简体) ). 它也画 mesh="plane|sphere" 带有自定义 vert 遮蔽器( 抹上 orbit),绑定 texture0.texture3 改为 uTexture0.uTexture3,暂停屏幕并尊重 prefers-reduced-motion. 桌面遮蔽器(#version 410 core)运行不变,所以同一文件在浏览器和在 cpp:sdl3-opengl。见 其读物 所有属性、制服和事件.

噪声

jen glsl:noise --kind=fbm --into=shaders/clouds.frag.glsl                  # simplexFbm(p, octaves[, gain])
jen glsl:noise --kind=worley --dim=3 --into=shaders/cells.frag.glsl        # worleyNoise(vec3), worley(vec3) → F1, F2
jen glsl:noise --kind=warp --name=Marble --tile                             # preview shader, drawn 2×2 to show the seams

• 基声 (单位:千美元)--kind=value|perlin|simplex|worley: <kind>Noise(p),大约[-1, 1]. 沃利还有 worley(p),距离最近的两个特征点.
• 分块 (单位:千美元)--kind=fbm|turbulence|ridged|warp: <base>Fbm(p, octaves) 和朋友,在任何基础噪声 通过 --base (默认) simplex) (中文(简体) ). 可选 gain (默认 0. 5) 设置粗糙度; 曲幅 a strength (默认为2.0)取而代之. 不同的碱基可以共享阴影: perlinFbm 财务报告和审定财务报表 simplexFbm 不要发生冲突.
• 流动 (单位:千美元)--kind=curl: curlNoise(p, alpha),用于粒子的无偏差向量字段;动画 alpha 因为旋转运动.

二维和三维--dim=2|3),每个函数都有一个超载 period 那瓷砖是无缝的,例如. simplexFbm(p, vec2(4.0), 6)和SVG的游戏一样 stitchTiles,但对于任何噪声:每个八分位数与频率相加相加相加. 周期为正整数;2D simplex想沿y实现一个偶数期,而3D simplex 周期限为289.

有符号的相距字段和射线

jen glsl:raymarch --name=Scene                     # starter: scene(), orbiting camera, soft shadows, AO, fog
jen glsl:raymarch --name=Scene --minimal           # just march, normal and diffuse light
jen glsl:raymarch --name=Scene --materials         # sceneMaterial() also returns a material id per surface
jen glsl:raymarch --name=Scene --lighting=pbr      # lambert (default), blinn, toon or pbr
jen glsl:raymarch --name=Land --scene=terrain --water  # a flyover: noise terrain, water, sky, sun, fog
jen glsl:sdf --dim=3 --shapes=box,torus --ops=smooth-union --into=shaders/scene.frag.glsl
jen glsl:sdf --shapes=star --effects=fill,stroke,glow --into=shaders/logo.frag.glsl
jen glsl:sdf --dim=3 --shapes=all --name=Shapes    # preview: every shape side by side

• 形状 (单位:千美元)--shapes,以给出的顺序预览 : 2D circle, (中文(简体) ), box, (中文(简体) ), round-box, (中文(简体) ), segment, (中文(简体) ), polygon, (中文(简体) ), star, (中文(简体) ), vesica, (中文(简体) ), arch (一指拱; 三维) sphere, (中文(简体) ), box, (中文(简体) ), round-box, (中文(简体) ), torus, (中文(简体) ), capsule, (中文(简体) ), cylinder, (中文(简体) ), plane名称 sdCircle, (中文(简体) ), sdBox2D和3D超载.
• 运算符 (单位:千美元)--ops: union, (中文(简体) ), subtract, (中文(简体) ), intersect 联合国 smooth- 变体, round, (中文(简体) ), onion, (中文(简体) ), repeat, (中文(简体) ), repeat-limited,以及 extrude编号 :revolve 将 2D 形状变成 3D 形状.
• 二维效果 (单位:千美元)--effects: 抗异名 fill 财务报告和审定财务报表 stroke, (中文(简体) ), glow减少 shadow, (中文(简体) ), inner-shadow - 口罩在 [0, 1] 从一个距离.
• 光线助手 (单位:千美元)glsl:raymarch --into选择 --parts: raymarch, (中文(简体) ), calcNormal, (中文(简体) ), softShadow, (中文(简体) ), calcAO, (中文(简体) ), cameraMatrix他们叫你 float scene(vec3 p)他们将它宣布在前面 这样它就可以在阴凉的地方生活 对于材料,保持该函数返回距离,并在命中点一次查看材料,作为 --materials 启动器有 : vec2 sceneMaterial(vec3 p) 返回距离和编号, scene() 返回其 .x。 。 。 .

每份名单还须 all。公式遵循伊尼戈·奎莱斯关于 距离函数, (中文(简体) ), 2D 距离函数, (中文(简体) ), 跨部门射线, (中文(简体) ), 平滑最小值, (中文(简体) ), SDF 常规 财务报告和审定财务报表 软阴影他的片段是麻省理工学院的,Jen把他们的通知放在你的阴影旁边.

照明

jen glsl:lighting --models=pbr --tonemap=aces,srgb --into=shaders/scene.frag.glsl
jen glsl:lighting --models=toon --into=shaders/scene.frag.glsl

• 模型 (单位:千美元)--models: lambert(n, l, albedo), (中文(简体) ), blinnPhong(n, v, l, albedo, shininess, specular), (中文(简体) ), toon(n, v, l, albedo, bands) 带一束光 pbr(n, v, l, albedo, metallic, roughness) - 与GGX,Smith-Schlick和Schlick Fresnel一起烹饪-托伦斯,加 pbrAmbient()一个不需要环境图的天空/地面环境光.
• 环境 (单位:千美元)--env=sky|equirect|cube: envSky, (中文(简体) ), envEquirect (全景显示于 texture0)或(或) envCube (单位:千美元)cubemap0),每个 (…, dir, roughness),以及 pbrEnv() 以光辉和光辉的光辉照耀他们; glsl:raymarch --lighting=pbr --env=… 写一个开头语.
• 颜色输出 (单位:千美元)--tonemap: tonemapAces() (Stephen Hill的ACES 适配), tonemapReinhard(),以及 linearToSrgb()编号 :srgbToLinear() 与精确的 sRGB 曲线.

每个型号都是正常的 n,给观众的方向 v 和光线 l,并返回反射光为强度为1的白色光:由光的颜色和阴影相乘,总和超过光,色调图,编码. jen glsl:raymarch --name=Scene --lighting=pbr 显示一个模型在一个完整的场景.

过滤器

jen glsl:filter --name=Retro --kinds=crt,vignette
jen glsl:webgl --name=Retro --inline --shader=retro.frag.glsl --texture=test-pattern

• 类型 (单位:千美元)--kinds: grayscale, (中文(简体) ), sepia, (中文(简体) ), posterize, (中文(简体) ), dither (拜尔), vignette, (中文(简体) ), grain, (中文(简体) ), chromatic, (中文(简体) ), pixelate, (中文(简体) ), sobel (篱笆), blur-box, (中文(简体) ), blur-gaussian, (中文(简体) ), sharpen, (中文(简体) ), kuwahara (白话)和 crt 在蒂莫西·洛特斯的公有领域CRT阴影后.
• 投入数字 : texture0 打开 <shader-canvas> - 图像或视频(都需要网络服务器), camera,或 test-pattern。 。 。 .
• 通行证 (单位:千美元)--post:过滤整个场景 – 启动器读取 uPrevious,以及 jen glsl:webgl --shader=scene.frag.glsl --post=retro.frag.glsl 锁住他们.

Vertex流离失所和矩阵

jen glsl:displace --kind=noise --name=Blob    # shaders/blob.vert.glsl + blob.frag.glsl
jen glsl:displace --kind=waves --name=Sea     # Gerstner waves with exact normals
jen glsl:matrix --fns=rotate,look-at --into=shaders/mesh.vert.glsl

• 流离失所 (单位:千美元)glsl:displace: displace(position, normal) 将一个顶点推向正常的 float displacement(vec3 p) 并且从两个流离失所的邻居那里重新计算出正常情况,所以照明遵循了新的形状. --kind=noise 用3D简单音响驱动它, --kind=wobble 有正弦; --kind=waves 数额 gerstnerWave()s,其正常情况准确.

• 预览 (单位:千美元)--name: 使用下列特性和制服的顶点/碎片对: <shader-canvas>数字 :

  <shader-canvas mesh="sphere" detail="96" vert="shaders/blob.vert.glsl" src="shaders/blob.frag.glsl" orbit></shader-canvas>
  

  对于波浪,使用 mesh="plane" detail="128"。 。 。 .

• 矩阵 (单位:千美元)glsl:matrix: rotateX/Y/Z, (中文(简体) ), rotateAxis, (中文(简体) ), perspective, (中文(简体) ), lookAt, (中文(简体) ), translate, (中文(简体) ), scale 财务报告和审定财务报表 transform (mat3 → mat4),遵循OpenGL常规.

函数如何进入阴影

GLSL 没有 #include,所以功能 船为平坦 .glsl 文件在 glsl/与 --into=<shader> 联合国 .glsl 文件,或页面 glsl:webgl --inline ),jen会插入你所选择的,加上他们所依赖的,以上a // jen:functions 标记行。 如果您的阴影器还没有阴影, 标记会在第一个函数之前添加, 因此插入的函数会出现在您自己调用它们的代码之前( 一个光线提示) scene()说吧 后面的运行 加上已经存在。 文件中的任何内容都被跳过,所以运行两次发电机,或者共享一个帮助器的两台发电机,从不重复代码. 无 --into,每个函数都作为自己的文件在 lib/ 将文件移入何处( w)--dir用于包含机制的设置(vite-plugin-glsl, glslify, 三.js,.).

插入的代码与其精确的文本相匹配:如果您编辑了被插入的函数并运行一个再次需要它的生成器,则会再次被插入.

该包需要Jen 2或更新; npm警告如果你的Jen年龄较大.

档案去的地方

生成器写入当前目录; --dir=<path> 写别的地方. --into 财务报告和审定财务报表 --file 也相对当前目录.

glsl:webgl 在当前目录中创建新工程文件夹( n)--dir 名称)和 --shaderDir 命名其中的阴影子文件夹.

许可证

包本身的代码 - 启动器和函数 - 是 MIT 无归属 (MIT-0):随心所欲,不需要通知. (不是"Unlicense"或"CC0":德国版权法不能将代码放入公有领域,但可以无条件授予所有权利. )

其他作者的功能仅包含在麻省理工学院许可中,这确实需要他们的通知,或者发布到公有领域:当Jen插入这样的功能时,作者的完整通知(或者说不需要的一行)会进入一个 THIRD_PARTY_NOTICES.md 在你的阴影上,每个来源一次。 见 第三次议会 NoTICES.md 对所有作者和资料来源.

许可证

麻省理工学院,Lea Rosema;第三方职能