three.js 自定义 GLSL 着色器画面不显示怎么排查【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js在 three.js 中用ShaderMaterial之类的方式编写自定义 GLSL 着色器时最常见的故障现象是对象完全不出现在画面里或者出现了错误的颜色、纹理、变形。官方手册的 Debugging - GLSL 一节给出了作者在实际调试中使用的定位路径。它的核心思路是一个分叉判断先把片元着色器fragment shader的输出换成纯色根据能否看到对象把问题范围切成片元侧或顶点侧再在对应一侧逐项排查。GLSL 本身的语法学习手册并不覆盖本文只处理画面不显示这一故障的排查操作。第一步把片元着色器输出改成纯色新建的 GLSL 着色器如果什么都没显示出来手册给出的第一个动作是把片元着色器改成返回一个纯色。在着色器main()的最底部把颜色输出替换为void main() { ... // 你原有的着色器代码 gl_FragColor vec4(1, 0, 0, 1); // red }然后重新运行页面根据结果走下面两条分支之一能看到对象轮廓红色块几何、顶点数据和矩阵基本没问题问题在片元着色器一侧。可能是坏掉的纹理、未初始化的 uniform、uniform 传入了错误的值——手册原文列出的是这几类可能方向确定了再逐个验证。依然什么都看不到问题大概率在顶点着色器一侧比如某些矩阵是错的、attribute 数据坏了或设置不正确。片元侧把着色器的输入直接画出来确认问题在片元着色器后手册的建议是把用到的输入值直接作为颜色画出来和正常的样子做对比。检查法线如果片元着色器里用到了法线把手头已有的法线 varying 直接输出为颜色gl_FragColor vec4(vNormal * 0.5 0.5, 1);法线的取值范围是 -1 到 1所以先乘 0.5 再加 0.5把值映射到 0.0 到 1.0这样才能作为颜色使用。手册用标准几何体渲染过一张正常法线长什么样的参考图文档示例用于对照你的场景是否符合预期如果画面里法线的分布和这种规律不一致就有线索知道该看哪了。如果你自己在片元着色器里对法线做过变换也可以用同样的手法把变换结果画出来。检查纹理坐标同理纹理坐标也可以用类似的方式画出来gl_FragColor vec4(fract(vUv), 0, 1);这里加fract是应对 UV 超出 0 到 1 范围的情况——当texture.repeat被设置成大于 1 时这是常见的。手册同样给了一张标准几何体 UV 的参考图手册强调这个手法可以推广到片元着色器里的所有值先估计它的取值范围再加几行代码把gl_FragColor设成把该范围缩放到 0.0 到 1.0 的结果。用已知可用的纹理替换验证如果怀疑是纹理本身的问题手册建议换用一个你确定能工作的 CanvasTexture 或 DataTexture 来试。这样可以把纹理源有问题和采样代码有问题区分开。顶点侧先检查矩阵再看顶点数据纯色输出后仍然什么都看不到的话按手册的顺序往下查。用断点检查矩阵里有没有 NaN手册的做法是在renderer.render(scene, camera)调用之后立刻打断点然后在 DevTools 的检查器里逐项展开先看相机的 world matrix 和 projection matrix 是否至少不是满屏NaN再展开场景查看它的children确认各个对象的 world matrix 看起来合理没有NaN并且每个矩阵的最后 4 个值对你的场景来说是合理的。手册给的判断示例如果你预期场景是 50x50x50 个单位而某个矩阵里出现了 552352623.123 这样的值那这里显然有问题。下图是文档示例展示在 DevTools 中展开矩阵的检查过程把顶点的值传到片元着色器画出来和片元侧一样顶点着色器里的值也可以通过 varying 传到片元着色器来可视化在顶点着色器和片元着色器里各自声明同一个 varying把你不确定是否正确的那个值传过去。手册举例如果着色器里用了法线可以把手头已有输出法线的片元着色器拿来把vNormal改成你想查看的那个值并缩放到 0.0 到 1.0 的范围然后看结果是否符合预期。用最简着色器确认几何体能被画出来另一条手册明确给出的路径是先换一个更简单的着色器确认数据本身能画出来试试能否直接用 MeshBasicMaterial 画出你的数据。能画出来的话确认它显示的位置和范围是否符合预期。如果不能找到能可视化你的几何体的最简单顶点着色器通常简单到gl_Position projection * modelView * vec4(position.xyz, 1);如果这个最简形式能画出来就把你原来的改动一次加回一点点直到找出引入问题的那一步。可选用 Shader Editor 扩展做实时调试手册还提到可以在 Chrome 里安装 Shader Editor 扩展其他浏览器也有类似工具用它查看其他着色器是怎么工作的也可以在你提出的一些修改比如上面的纯色输出、值可视化在代码运行中直接实时改动。这适合不想反复改文件、刷新页面的场景。小结整条排查路径收敛为一次二分加两组逐项检查纯色输出切分片元/顶点两侧片元侧逐项画出法线、UV 等输入并与参考图对比、用已知可用的纹理替换验证顶点侧查矩阵 NaN 与合理性、用 varying 可视化顶点值、用最简着色器逐步加回改动。完整原文见 manual/pages/debugging-glsl.html着色器 API 细节可查 ShaderMaterial。需要注意这一节手册只覆盖画面不显示的定位方法GLSL 语法本身的学习不在其中。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 three.js 自定义 GLSL 着色器画面不显示怎么排查？
three.js 自定义 GLSL 着色器画面不显示怎么排查【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js在 three.js 中用ShaderMaterial之类的方式编写自定义 GLSL 着色器时最常见的故障现象是对象完全不出现在画面里或者出现了错误的颜色、纹理、变形。官方手册的 Debugging - GLSL 一节给出了作者在实际调试中使用的定位路径。它的核心思路是一个分叉判断先把片元着色器fragment shader的输出换成纯色根据能否看到对象把问题范围切成片元侧或顶点侧再在对应一侧逐项排查。GLSL 本身的语法学习手册并不覆盖本文只处理画面不显示这一故障的排查操作。第一步把片元着色器输出改成纯色新建的 GLSL 着色器如果什么都没显示出来手册给出的第一个动作是把片元着色器改成返回一个纯色。在着色器main()的最底部把颜色输出替换为void main() { ... // 你原有的着色器代码 gl_FragColor vec4(1, 0, 0, 1); // red }然后重新运行页面根据结果走下面两条分支之一能看到对象轮廓红色块几何、顶点数据和矩阵基本没问题问题在片元着色器一侧。可能是坏掉的纹理、未初始化的 uniform、uniform 传入了错误的值——手册原文列出的是这几类可能方向确定了再逐个验证。依然什么都看不到问题大概率在顶点着色器一侧比如某些矩阵是错的、attribute 数据坏了或设置不正确。片元侧把着色器的输入直接画出来确认问题在片元着色器后手册的建议是把用到的输入值直接作为颜色画出来和正常的样子做对比。检查法线如果片元着色器里用到了法线把手头已有的法线 varying 直接输出为颜色gl_FragColor vec4(vNormal * 0.5 0.5, 1);法线的取值范围是 -1 到 1所以先乘 0.5 再加 0.5把值映射到 0.0 到 1.0这样才能作为颜色使用。手册用标准几何体渲染过一张正常法线长什么样的参考图文档示例用于对照你的场景是否符合预期如果画面里法线的分布和这种规律不一致就有线索知道该看哪了。如果你自己在片元着色器里对法线做过变换也可以用同样的手法把变换结果画出来。检查纹理坐标同理纹理坐标也可以用类似的方式画出来gl_FragColor vec4(fract(vUv), 0, 1);这里加fract是应对 UV 超出 0 到 1 范围的情况——当texture.repeat被设置成大于 1 时这是常见的。手册同样给了一张标准几何体 UV 的参考图手册强调这个手法可以推广到片元着色器里的所有值先估计它的取值范围再加几行代码把gl_FragColor设成把该范围缩放到 0.0 到 1.0 的结果。用已知可用的纹理替换验证如果怀疑是纹理本身的问题手册建议换用一个你确定能工作的 CanvasTexture 或 DataTexture 来试。这样可以把纹理源有问题和采样代码有问题区分开。顶点侧先检查矩阵再看顶点数据纯色输出后仍然什么都看不到的话按手册的顺序往下查。用断点检查矩阵里有没有 NaN手册的做法是在renderer.render(scene, camera)调用之后立刻打断点然后在 DevTools 的检查器里逐项展开先看相机的 world matrix 和 projection matrix 是否至少不是满屏NaN再展开场景查看它的children确认各个对象的 world matrix 看起来合理没有NaN并且每个矩阵的最后 4 个值对你的场景来说是合理的。手册给的判断示例如果你预期场景是 50x50x50 个单位而某个矩阵里出现了 552352623.123 这样的值那这里显然有问题。下图是文档示例展示在 DevTools 中展开矩阵的检查过程把顶点的值传到片元着色器画出来和片元侧一样顶点着色器里的值也可以通过 varying 传到片元着色器来可视化在顶点着色器和片元着色器里各自声明同一个 varying把你不确定是否正确的那个值传过去。手册举例如果着色器里用了法线可以把手头已有输出法线的片元着色器拿来把vNormal改成你想查看的那个值并缩放到 0.0 到 1.0 的范围然后看结果是否符合预期。用最简着色器确认几何体能被画出来另一条手册明确给出的路径是先换一个更简单的着色器确认数据本身能画出来试试能否直接用 MeshBasicMaterial 画出你的数据。能画出来的话确认它显示的位置和范围是否符合预期。如果不能找到能可视化你的几何体的最简单顶点着色器通常简单到gl_Position projection * modelView * vec4(position.xyz, 1);如果这个最简形式能画出来就把你原来的改动一次加回一点点直到找出引入问题的那一步。可选用 Shader Editor 扩展做实时调试手册还提到可以在 Chrome 里安装 Shader Editor 扩展其他浏览器也有类似工具用它查看其他着色器是怎么工作的也可以在你提出的一些修改比如上面的纯色输出、值可视化在代码运行中直接实时改动。这适合不想反复改文件、刷新页面的场景。小结整条排查路径收敛为一次二分加两组逐项检查纯色输出切分片元/顶点两侧片元侧逐项画出法线、UV 等输入并与参考图对比、用已知可用的纹理替换验证顶点侧查矩阵 NaN 与合理性、用 varying 可视化顶点值、用最简着色器逐步加回改动。完整原文见 manual/pages/debugging-glsl.html着色器 API 细节可查 ShaderMaterial。需要注意这一节手册只覆盖画面不显示的定位方法GLSL 语法本身的学习不在其中。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考