问题标签 [bump-mapping]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
5430 浏览

javascript - Displacement map in three.js

I'm currently using a black and white image as a bump map for my model. The model is an .obj file with the associated .mtl file for UV mapping. This is the code I use:

At a latter time I add the bump map when I need it:

This works as expected but now I would like to use my texture as a displacement map instead of a bump map so I changed my code to:

With the same texture applied the displacement is no applied at all. Is there anything I need to change on my UV mapping or texture to work as the bump map but with displacement?

0 投票
0 回答
165 浏览

opengl - 在片段着色器中添加通用凹凸贴图

我有一个带有法线的 obj,我想在其上使用表面凹凸贴图。谁能帮助我如何从 obj 法线和凹凸贴图计算最终的法线贴图

我的片段着色器是:

现在我如何使用 interpolated.normal 添加该规范。它不能是直截了当的加法。

0 投票
1 回答
1020 浏览

javascript - 提高threejs中的凹凸贴图质量

我有一个表面平坦的模型,我在其中应用凹凸贴图纹理来绘制并在其上放置一些文本。我正在使用的代码是这样的:

场景具有模型和 4 个启用了阴影的定向灯。凹凸贴图效果很好,但质量真的很差。凹凸贴图大小为 2048x2048,我期待更好的质量。这里有一些图像:

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

如您所见,它非常像素化,增加纹理大小并没有太大改善。如果从定向光到模型的入射角发生变化(例如,通过旋转模型),质量也会发生变化。

凹凸贴图只是一个纯黑白图像,在图像中添加一些抗锯齿可以提高质量吗?我知道凹凸贴图只会修改灯光​​的行为方式,它不会修改几何形状,但我在某些网站上读到增加模型的面数可以改善凹凸贴图(而不是置换贴图)细节,这可以吗工作?

0 投票
1 回答
1233 浏览

three.js - 三个js凹凸映射

我用三个 js (r85) 创建了一个简单的场景。它包含一个相机、一个灯光和一个平面几何网格。我还创建了一个渲染器目标,在其中使用 ShaderMaterial 渲染平面的凹凸贴图纹理。在片段着色器中,凹凸贴图使用连续函数(因此凹凸贴图应该是“平滑的”):

该代码呈现以下图像(奇怪的线条):

图像

当我将凹凸贴图与 MeshPhongMaterial 一起使用时,会出现某种奇怪的线条。

请参阅此处的jsfiddle

有人能告诉我那些奇怪的线条是什么以及如何避免这些吗?如果我对凹凸贴图使用简单的图像(不是渲染目标),则不会出现线条。

谢谢!

0 投票
0 回答
78 浏览

javascript - 通过对象加载器加载的场景,凹凸贴图未渲染

尝试将凹凸贴图应用到加载的对象,但在材质上看不到任何变化

我已经修复了这段代码的早期问题,包括对其应用细分修改器,但现在看来凹凸贴图拒绝应用。

0 投票
0 回答
1144 浏览

c++ - 我的法线贴图有什么问题?C++ 直接

大家好,我正在尝试在 Directx 中实现法线映射,并且我非常接近创建它,但是我在某些对象上得到了这些奇怪的黑色。这是没有法线贴图的样子:

在此处输入图像描述

当我应用法线贴图效果时,它看起来是这样的:

在此处输入图像描述

在此处输入图像描述

我在例如墙壁和立方体的某些部分上得到黑色的地方很奇怪。

我的像素着色器文件如下所示:

我的顶点着色器看起来像这样:

我从 CPU 端计算每个顶点的 Binormal 和 Tangent 的方法是使用这种方法(取自 Rasterek Tutorial http://www.rastertek.com/dx11tut20.html):

0 投票
1 回答
322 浏览

python - Maya Python 脚本的凹凸深度滑块

我之前询问过这个 Python 脚本,但现在我遇到了一个新问题:我想让脚本的纹理滑块影响模型的凹凸深度,但我不知道该怎么做。有没有人可以帮助我?我的模型中应用了凹凸贴图纹理,我只需要帮助将下图中的滑块转换为 Python 格式。 在此处输入图像描述

0 投票
1 回答
228 浏览

three.js - 在three.js中加载OBJ时粗糙的凹凸纹理

我们在三个.js 中加载模型时遇到困难

我们正在使用 OBJLoader2,因为它可以正确平滑网格,但不知何故,纹理看起来比它们应该的更粗糙。

一些法线贴图问题: three.js

这是渲染它应该是什么样子(具有不同的纹理) 渲染

0 投票
1 回答
1733 浏览

javascript - 使用 javascript 和 glsl 进行凹凸映射

嘿,我现在正在尝试添加第二个纹理

到我的立方体并做一些凹凸贴图。但是我是一个程序初学者,所以对我来说有点难。我对矩阵和向量的所有数学运算都在同一个命名的 js.files 中。我还需要各种着色器、纹理和 phong 着色器。现在每个人都说我必须计算我的法线,但我该怎么做呢?在哪里?期待您的帮助!

0 投票
0 回答
78 浏览

javafx - 你如何在 JavaFX 画布中对大区域进行凹凸映射

我想将一些使用 JavaFX 的灯光效果应用到画布上GraphicsContext。起初,我使用Lighting.bumpInput传递静态凹凸贴图进行照明。然而,这只照亮了我画布的某个区域。
所以现在我手动进行照明,首先将所有凹凸贴图绘制到画布上,然后应用我的照明效果,最后将所有原始图像与BlendMode.MULTIPLY光照凹凸贴图混合在一起。这看起来不像第一种方法那么好,但它确实完成了它的工作。现在仍然存在照明效果(Pointlight)应用在整个画布上的问题,无论面积有多大。

在此处输入图像描述

现在我的问题是,JavaFX 中将照明仅应用于画布上特定区域的正确方法是什么?喜欢定义我的点光源的半径吗?