【愚公系列】《AIGC辅助软件开发》031-AI辅助解决各种疑难杂症：警惕小众场景下的误导性回答
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在信息爆炸的时代，人工智能技术正在以惊人的速度改变我们的生活与工作方式。然而，AI在处理特定问题时，尤其是小众场景下，可能会给出误导性的回答，这不仅会影响决策的准确性，还可能导致不必要的困惑和损失。如何识别和避免这些误导性回答，成为了我们需要关注的重要课题。
本文将探讨AI在小众场景下可能出现的误导性回答的原因与表现，并分享如何利用AI工具和技术提高回答的准确性和可靠性。我们将结合实例分析，帮助读者识别潜在的风险，提升对AI输出内容的判断力。无论你是AI领域的从业者，还是对人工智能感兴趣的普通用户，这篇文章都将为你提供实用的见解与建议。让我们共同警惕并应对小众场景中的误导性回答，充分发挥AI的优势，推动智能决策的准确与安全！
🚀一、警惕小众场景下的误导性回答
ChatGPT 作为一个问答式的大数据模型，本质上是通过大量数据集训练而成。然而，在某些偏门问题上，通常很少会有所谓的“准确答案”。由于这类问题较为稀少，相关数据集也有限，导致 ChatGPT 对这些偏门问题的回答往往具有误导性。尤其在软件开发领域，一个错误的方向可能会让软件工程师浪费一天的时间去定位和排查问题。
作为前端工程师，我在这里举两个前端兼容性问题，演示我如何在面对误导性问题时找到真正的解决思路。
🔎1.特定版本的渲染引擎下的纹理坐标范围
我在业务中使用 Pixi JS 4.x 版本的渲染引擎。由于业务效果的需求，我需要使用 shade 实现一个特殊效果，并对纹理坐标进行一定的转换计算。在这个过程中，我发现入参的纹理坐标值和计算出的效果总是对不上。结合经验，我开始怀疑 Pixi JS 4.x 中默认的纹理坐标范围。考虑到 WebGL 调试的成本较高，在再次确认 GLSL 代码逻辑没有问题后，我向 ChatGPT 提问。
为什么 Pixi JS 4.x 版本中，vTextureCoord.y 的取值范围不是 0~1?
在 Pixi.js 4.x 版本中，`vTextureCoord.y` 的取值范围不是严格的 0 到 1，通常是由于以下几个原因之一：
### 1. **纹理的垂直翻转（Texture Flipping）**
Pixi.js 可能在某些情况下会翻转纹理，特别是在处理 WebGL 渲染管线时。WebGL 和纹理的默认行为有时会导致纹理在 y 轴上被翻转。
在 WebGL 中，纹理坐标的原点（0, 0）通常在左下角，而在 Pixi.js 或其他 2D 渲染引擎中，原点可能在左上角。因此，Pixi.js 在处理纹理坐标时，可能会自动翻转 `vTextureCoord.y`，这会导致取值范围不再是 0 到 1。
解决此问题的办法是在使用着色器时手动翻转 `vTextureCoord.y`，例如在片段着色器中：
```glsl
vec2 flippedCoord = vec2(vTextureCoord.x, 1.0 - vTextureCoord.y);
```glsl
### 2. **多重纹理处理（Render Texture）**
如果你使用了 `RenderTexture` 或对纹理进行了其他操作，可能会改变 `vTextureCoord` 的范围。例如，使用 `RenderTexture` 绘制的帧缓冲区可能会影响纹理坐标的范围，使其不再是标准的 0 到 1 范围。
### 3. **视口和画布缩放**
Pixi.js 可能会基于视口或画布的比例调整纹理坐标。如果场景的实际渲染尺寸不同于纹理的尺寸，`vTextureCoord.y` 的取值范围可能会根据视口或缩放的比率变化。
### 4. **纹理包和子纹理（Texture Atlas/Subtexture）**
在使用纹理集（Texture Atlas）时，子纹理的坐标范围可能不是 0 到 1，而是基于纹理集中的某个子区域。这样，`vTextureCoord.y` 的范围也会变化。
### 5. **纹理裁剪（Texture Cropping）**
如果你对纹理进行了裁剪或使用了 `textureFrame` 等操作，纹理坐标会根据裁剪后的区域调整，这会影响 `vTextureCoord.y` 的取值范围。
### 解决办法
1. **检查是否进行了纹理翻转或裁剪**，并根据需要在着色器中手动调整 `vTextureCoord`。
2. **确认是否使用了 `RenderTexture` 或子纹理**，确保这些纹理的坐标范围是你预期的。
3. **调试 WebGL 渲染管线**，验证在管线中是否存在不符合预期的纹理操作。
通过这些检查，你可以找到 `vTextureCoord.y` 取值范围不为 0 到 1 的具体原因。
Pixi JS 4.x 版本中，vTextureCoord.y取值范围在0~0.6 是出于什么考虑?
在 Pixi.js 4.x 版本中，`vTextureCoord.y` 的取值范围为 0~0.6，通常是由于以下几种原因之一：
### 1. **纹理集（Texture Atlas）或子纹理**
当使用纹理集（Texture Atlas）时，单个纹理只占整个纹理图集的一部分。纹理集将多个小纹理打包在一个大的图像文件中，而每个子纹理的纹理坐标都在 0~1 范围内相对于整个图集。
如果你的纹理只是整个图集中一小块区域，那么 `vTextureCoord.y` 的取值范围可能是 0~0.6，这意味着这个纹理在图集的垂直方向上占据 60% 的空间。因此，`vTextureCoord.y` 并没有填充完整的 0~1 范围，而是根据子纹理在图集中的位置确定。
### 2. **纹理裁剪（Texture Cropping）**
如果对纹理进行了裁剪或只显示其中的一部分，这会影响纹理坐标的范围。裁剪可能是由开发者手动指定的，或由 Pixi.js 内部的自动优化触发。在这种情况下，`vTextureCoord.y` 的范围可能会缩小到 0~0.6。
例如，如果你只想显示纹理的一部分（例如图像的上方部分），那么你会看到 `vTextureCoord.y` 范围缩小到某个比例，而不是 0~1。
### 3. **视口或画布比例（Viewport or Canvas Scaling）**
Pixi.js 渲染时可能会对纹理应用缩放，特别是在视口、画布大小与纹理尺寸不一致的情况下。缩放后的坐标范围可能导致 `vTextureCoord.y` 的范围变为 0~0.6。比如，渲染的目标区域比纹理小，那么坐标会压缩。
### 4. **渲染到 RenderTexture**
当使用 `RenderTexture` 时，渲染到的纹理大小可能与源纹理不完全匹配。结果是纹理坐标可能不会完全填满 0~1 范围。如果 `RenderTexture` 比源纹理小，那么 `vTextureCoord.y` 的范围也会相应缩小。
### 5. **WebGL 纹理设置或自动缩放**
Pixi.js 基于 WebGL 进行渲染，WebGL 内部可能会根据设备的不同对纹理进行处理，尤其是如果启用了某些抗锯齿或压缩纹理模式，坐标范围也可能会受到影响，导致 `vTextureCoord.y` 的范围缩小。
### 结论
`vTextureCoord.y` 的取值范围为 0~0.6 通常是由于纹理只是大纹理集或图像中的一部分，或者你正在使用裁剪或缩放模式。如果你希望它的取值范围恢复到 0~1，可以检查：
- 纹理集是否包含整个纹理。
- 裁剪、缩放或 `RenderTexture` 设置。
- 确保 WebGL 的纹理设置与预期一致。
通过这些检查，你可以了解为什么 `vTextureCoord.y` 的范围缩小到了 0~0.6。
🔎2.部分安卓浏览器中的禁止滚动失效
在前端的许多业务场景中，可能会遇到需要禁止滚动的情况。我通过设置 body.style.overflow = 'hidden' 来禁止页面的全屏滚动。然而，在测试阶段，我发现部分品牌（如 vivo 和一加）的安卓浏览器中禁止滚动的效果失效了。
为什么 body.style.overflow = ‘hidden’ 会在部分安卓浏览器中失效?
`body.style.overflow = 'hidden'` 在部分安卓浏览器中失效的原因可能有以下几个：
1. **浏览器差异性**：不同的安卓浏览器在处理 CSS 和 JavaScript 时会有不同的实现方式。有些老旧或非主流的安卓浏览器可能不完全支持 `overflow` 属性，或者对 `body` 元素的处理有差异。
2. **滚动容器问题**：在一些移动浏览器中，`<body>` 和 `<html>` 元素的滚动行为可能有所不同。有些浏览器实际上会把滚动行为应用在 `<html>` 标签上，而不是 `<body>` 标签上。因此，设置 `body.style.overflow = 'hidden'` 可能不会生效，但如果设置 `<html>` 的 `overflow` 属性可能会有效。
3. **外部 CSS 干扰**：一些外部 CSS 或框架（例如 Bootstrap 或某些 UI 库）可能会覆盖或改变 `overflow` 属性的行为。这些库可能会在某些情况下设置或重置 `overflow`，从而导致你在 JavaScript 中的设置失效。
4. **高度问题**：在某些情况下，如果 `body` 的高度没有被明确指定或不包含足够的内容以产生滚动条，设置 `overflow: hidden` 可能不会有明显效果。确保 `body` 的高度足够大以产生滚动条，然后再隐藏它们。
5. **浏览器 Bug**：一些特定版本的浏览器可能存在处理 `overflow` 属性的 bug。尽管现代浏览器通常较少出现这种情况，但在老旧或特定的安卓浏览器版本中仍然可能存在。
### 解决方案
1. **设置 `<html>` 的 `overflow`**：
```javascript
document.documentElement.style.overflow = 'hidden';
```css
2. **使用固定定位的容器**：可以尝试使用一个固定定位的容器包裹你的内容，然后隐藏滚动条。
```css
.no-scroll {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
```css
3. **高度调整**：确保 `body` 的高度和内容足够大以产生滚动条，然后应用 `overflow: hidden`。
```css
body {
height: 100%;
overflow: hidden;
}
```css
通过以上方法，可以增加在各种安卓浏览器中的兼容性，确保 `overflow: hidden` 的效果生效。
为什么在部分安卓浏览器中，body设置了overow=hidden 但页面还是可以滚动?
在部分安卓浏览器中，设置 `body.style.overflow = 'hidden'` 后页面仍然可以滚动，通常是由于浏览器在处理滚动和 `overflow` 属性时的差异化行为。以下是一些常见原因：
### 1. **`<html>` 元素参与滚动**：
在许多移动浏览器中，滚动行为不是直接绑定在 `<body>` 元素上，而是绑定在 `<html>` 元素上。这意味着即使你对 `<body>` 设置了 `overflow: hidden`，浏览器可能仍然允许滚动，因为滚动条实际上在 `<html>` 上。因此，你还需要对 `<html>` 进行相同的设置。
**解决方案**：
```javascript
document.documentElement.style.overflow = 'hidden';
```javascript
### 2. **页面高度与视口高度不匹配**：
在一些浏览器中，页面高度可能与视口高度不匹配。如果 `<body>` 的高度设置为小于视口高度，`overflow: hidden` 将无法阻止滚动，因为页面没有足够的内容生成滚动条。因此，页面在设置了 `overflow: hidden` 后仍然允许滚动。
**解决方案**：
确保 `body` 和 `html` 的高度为 100%：
```css
html, body {
height: 100%;
overflow: hidden;
}
```css
### 3. **触摸滚动（`touchmove` 事件）**：
在一些移动设备上，尽管设置了 `overflow: hidden`，触摸滚动事件（`touchmove`）仍然可能触发。这是因为浏览器并没有完全禁用滚动，尤其是在具有触摸屏幕的设备上。
**解决方案**：
通过 JavaScript 禁用 `touchmove` 事件来防止滚动：
```javascript
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
```javascript
此方法会阻止页面上的触摸滚动事件。
### 4. **滚动容器**：
如果页面的内容包含具有 `overflow: auto` 或 `overflow: scroll` 的内部滚动容器（例如 `div`），即使你对 `body` 设置了 `overflow: hidden`，这些容器仍然可以单独滚动。这在一些复杂布局中常见。
**解决方案**：
你需要同时检查和处理所有可能的滚动容器，确保它们的 `overflow` 属性也被隐藏或禁用。
### 5. **浏览器 Bug 或特殊实现**：
某些安卓浏览器或特定的 WebView 版本可能存在处理 `overflow: hidden` 时的 bug，导致滚动行为无法正常禁用。这个问题在某些老旧版本的安卓浏览器和 WebView 实现中较为常见。
**解决方案**：
可以尝试通过 `position: fixed` 或 `position: absolute` 的方式固定页面元素，强制禁用滚动行为：
```css
body {
position: fixed;
width: 100%;
overflow: hidden;
}
```css
### 总结：
要确保 `overflow: hidden` 在安卓浏览器中有效，除了设置 `body.style.overflow = 'hidden'`，还需检查并调整 `<html>` 元素的 `overflow`，确保页面高度设置正确，并在必要时通过 JavaScript 禁用触摸滚动事件。这样能够有效阻止页面滚动，并提升兼容性。
🚀二、结论
ChatGPT 成为了我的编程小秘书，在许多基础性问题和通用方案设计上，它的表现比浏览器检索更强、更高效。因此，我在不知不觉中对它的服务产生了依赖。在我熟悉的领域，即使它的回答并不完美，我也能很快识别出关键内容。然而，在我不熟悉的领域，例如我之前遇到的两个小众场景，我就无法根据它的回答做出准确的判断。由于这些场景不熟悉，一个错误的方向往往会大大增加我定位问题的难度。
针对这种情况，我的经验告诉我，可以尝试以下方法：
- 清除上下文，多问几次，ChatGPT 可能会给出几个不同的方向；
- 不要忽视传统的浏览器检索、技术社区以及 GitHub 的 issue；
- 如果实际表现与 ChatGPT 的回答不一致，可以写一个最小验证 demo，实践出真知。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）