浏览器实时运行 光照 原始语言：GLSL ES 3.00
Fresnel 边缘光
在三维网格上实现的 Schlick 近似 Fresnel 边缘光，配合 Lambert 漫反射与 Blinn-Phong 高光，用来验证 mesh-3d 预览模式、世界空间法线计算与相机位置 uniform。
实时渲染 / 图形学开发者
F-Itok 实时渲染与 Shader 技术笔记
个人技术博客与作品集：C++ 与计算机基础、计算机图形学、OpenGL/GLSL、Unity URP/HLSL、实时渲染与 Shader 编程，并附带可在浏览器中实时调参的 WebGL 2 示例。
- C++ 与计算机基础
- 计算机图形学
- OpenGL 与 GLSL
- Unity URP 与 HLSL
- 实时渲染 / 材质 / 光照
- Shader 编程
精选 Shader
全部 →下面只显示静态缩略图；实时 WebGL 2 预览与参数控件在各自的详情页中按需加载。
浏览器实时运行 程序化生成 原始语言：GLSL ES 3.00
程序化波浪场
由多层正弦波叠加而成的程序化效果，纯数学计算、不依赖任何纹理，是本站 WebGL 2 实时预览管线的第一个示例，也用来定义参数控件与 uniform 的绑定约定。
浏览器实时运行 HLSL 移植 原始语言：HLSL (Unity URP)
URP RimLit 移植示例（HLSL → GLSL ES 3.00）
一个按 Unity URP 惯例编写的 RimLitUnlit HLSL 着色器，以及它的浏览器 GLSL ES 3.00 移植版本。页面给出完整的参数映射表、无法一致的部分及其原因，并如实标注验证方式。
项目
全部 → 开发中
Graphics Portfolio 网站本体
个人技术博客 + 作品集 + 可在浏览器中实时调参的 Shader 展示平台。Astro 纯静态生成，Tailwind CSS，Markdown/MDX 内容集合，three.js + WebGL 2 实时预览，Pagefind 离线搜索。
- Astro 7
- TypeScript 5.9
- Tailwind CSS 4
- three.js
- WebGL 2 / GLSL ES 3.00
- MDX
- Pagefind
- Shiki
- KaTeX
- Playwright
- GitHub Actions
最新文章
全部 → Unity URP 与 HLSL 约 6 分钟
Unity URP Shader 结构解析：ShaderLab、HLSLPROGRAM 与 CBUFFER
逐层拆解一个 URP 着色器文件的组成：ShaderLab 外壳、Properties 与材质面板、Pass 与 LightMode、URP 的头文件体系、UnityPerMaterial 与 SRP Batcher、宏与语义，以及 _Time、GetMainLight 这些每帧数据的来源。
实时渲染 约 5 分钟
Fresnel 效应的推导与实时近似
从电磁场的边界条件出发推导 Fresnel 反射率，说明 Schlick 近似为什么够用，给出 F0 与折射率的换算关系和常见介质的数值，并解释边缘光、GGX 中的 Fresnel 项与常见实现错误。
· 更新于 2026-06-02 OpenGL 与 GLSL 约 6 分钟
从 WebGL 1 到 WebGL 2：GLSL ES 3.00 迁移要点
整理桌面 OpenGL、WebGL 1 与 WebGL 2 之间着色器语言的差异，包括版本指令、in/out、整数类型、纹理采样、UBO 与 instancing，以及在 three.js 中使用 RawShaderMaterial 写原生 GLSL ES 3.00 的具体做法。