标签: bump-mapping

编辑:你可能想从"编辑3"开始,因为我已经解决了很多这个问题

这是我应用于icosphere的普通立方体贴图的屏幕截图:

我的立方体贴图icosphere的切线是使用以下代码生成的.m_indices在一个std::vector索引中std::vector的顶点m_vertices.

std::vector<glm::vec3> storedTan(m_vertices.size(),glm::vec3(0,0,0));

// tangents
for(int i = 0; i < m_indices.size(); i+=3)
{
    int i1 = m_indices[i];
    int i2 = m_indices[i+1];
    int i3 = m_indices[i+2];

    VertexData v1 = m_vertices[i1];
    VertexData v2 = m_vertices[i2];
    VertexData v3 = m_vertices[i3];

    glm::vec3 p1 = glm::vec3(v1.position[0],v1.position[1],v1.position[2]);
    glm::vec3 p2 = glm::vec3(v2.position[0],v2.position[1],v2.position[2]);
    glm::vec3 p3 = glm::vec3(v3.position[0],v3.position[1],v3.position[2]);

    glm::vec3 t1 = glm::vec3(v1.tcoords[0],v1.tcoords[1],v1.tcoords[2]);
    glm::vec3 t2 = glm::vec3(v2.tcoords[0],v2.tcoords[1],v2.tcoords[2]);
    glm::vec3 t3 = glm::vec3(v3.tcoords[0],v3.tcoords[1],v3.tcoords[2]);

    std::function<glm::vec2(glm::vec3)> get_uv = [=](glm::vec3 STR)
    {
        float sc, …

我有一个正常的映射问题.我在通过ASSIMP库加载的每个模型上都有纹理和普通纹理.我在ASSIMP库的帮助下计算每个对象的切向量,所以这些应该没问题.这些对象与法线贴图完美配合,但是一旦我开始平移其中一个对象(从而影响带有平移的模型矩阵),灯光就会失败.正如您在图像上看到的那样,地板(沿y轴向下平移)似乎失去了大部分漫射光,而其镜面光照方向错误(应该在灯泡和播放器位置之间)

它可能与普通矩阵有关(尽管翻译应该丢失),也许在着色器中使用了错误的矩阵.我没有想法,希望你能对这个问题有所了解.

顶点着色器:

#version 330

layout(location = 0) in vec3 position;
layout(location = 1) in vec3 normal;
layout(location = 2) in vec3 tangent;
layout(location = 3) in vec3 color;
layout(location = 4) in vec2 texCoord;

// fragment pass through
out vec3 Position;
out vec3 Normal;
out vec3 Tangent;
out vec3 Color;
out vec2 TexCoord;

out vec3 TangentSurface2Light;
out vec3 TangentSurface2View;

uniform vec3 lightPos;
uniform vec3 playerPos;

// vertex transformation
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main() …

圆角边缘的常用方法是什么,如示例中的矩形对象？

理想的结果看起来非常像这些图像.

(当然,您可以使用具有仔细圆角边缘和角落的网格,但要实现这一点需要很多tris.)

注意,当然对于非 -shader方法...

添加两个小扁平盒子,简单地在两侧之间进行新的正常,即45度:

那将是完美的圆形......

下面的GDG提供了一篇文章,如果没有使用着色器方法,有人断言这确实是最好的方法.

我真的很想知道如何用着色器做到这一点.

注意 - 关于非着色器方法的非常详细的教程

http://catlikecoding.com/unity/tutorials/rounded-cube/

我遇到了SpriteKit的问题(在OS X 10.11 beta上尝试过Xcode 7 beta和Xcode 6.4),如果我从图像创建SKTextureAtlas并且单独使用时可以正常工作的普通文件,那么法线贴图会崩溃.看这个例子:

从左到右:

• 具有纹理+正常+光照的精灵(来自atlas的纹理)
• 纹理+正常的精灵(来自atlas的纹理)
• 带纹理的精灵(来自atlas的纹理)
• 具有正常纹理的精灵(来自atlas的纹理)
• 具有纹理+正常+光照的精灵(通过imageNamed从单个文件创建的纹理:)

该图集是在运行时使用SKTextureAtlas atlasWithDictionary创建的:它包含以下纹理:

creating atlas with files: {
    "shield-normal.png" = "shield-normal.png";
    "shield.png" = "shield.png";
    "swords-normal.png" = "swords-normal.png";
    "swords.png" = "swords.png";
}

注意:如果我在Xcode中创建Atlas并通过atlasNamed加载它,我会得到完全相同的问题: - 所以问题肯定不在于如何或何时创建地图集,而是因为纹理是从第一个地图集中获得的地点.

如果我使用单个文件创建精灵,则照明工作(最右边的图像):

tex = [SKTexture textureWithImageNamed:@"shield.png"];
normal = [SKTexture textureWithImageNamed:@"shield-normal.png"];
test2 = [SKSpriteNode spriteNodeWithTexture:tex normalMap:normal];
test2.position = CGPointMake(580, 400);
test2.lightingBitMask = 0xffffffff;
[self addChild:test2];

我对atlas文件执行完全相同的操作,上面的屏幕截图证明我确实为精灵纹理获取了正确的图像(左起第3和第4个),并且从图集中获得正常的纹理.然而结果是左边的第一个图像,一个没有法线贴图的点亮的精灵.

我想知道,普通纹理是否需要一种SKTextureAtlas不适用的后处理形式？或者其他人在地图集中是否有正常纹理问题？

或许这可能是一个错误？

更新:我已在一个新的SpriteKit应用程序(OS X,在此下载并自行尝试)中使用以下代码重现此行为:

-(void)didMoveToView:(SKView *)view {
    SKLightNode* light = [SKLightNode node];
    light.position = CGPointMake(0, …

我正在尝试将凹凸贴图应用于平面,以使用Three.js r55创建一个模糊的感觉表面.

这是我的代码:

var mapHeight = THREE.ImageUtils.loadTexture("images/felt.png");
mapHeight.repeat.set(2, 2);
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.format = THREE.RGBFormat;

var groundMaterial = new THREE.MeshPhongMaterial({
    ambient: 0x008800, color: 0x008800, specular: 0x888888,
    shininess: 25, bumpMap: mapHeight, bumpScale: 10, metal: false
} );

scene.add(new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.3), groundMaterial));

注意我如何设置纹理沿x/y轴重复两次.然而,我所看到的仅在一个象限中应用纹理:

我希望这可以用夹子/重复包装(或者不管它叫什么),但我在RepeatWrapping这里要求.

如何在平面上正确重复凹凸贴图重复任意次数.

编辑 - 完整代码

我着手制作一个简单的复制案例.这是非常小的并且再现下面的图像(从略微不同的摄像机角度.)输出具有相同的问题.

<!DOCTYPE html>
<html>
<head>
    <script src="scripts/libs/three.min.js" type="text/javascript"></script>
</head>
<body>
<div id="scene-container"></div>

<script>

    init();

    function init() {
        var camera, scene, renderer;

        scene = new THREE.Scene();
        scene.add( new THREE.AmbientLight( 0x555555 …

我正在研究法线贴图的实现,通过ASSIMP库计算切线向量.

法线贴图似乎在具有接近单位矩阵的模型矩阵的对象上完美地起作用.只要我开始翻译和缩放,我的照明就好了.正如您在图片中看到的那样,法线贴图在容器立方体上完美地工作,但是在大地板上的照明失败(镜面光的方向应朝向播放器,而不是朝向容器).

只要我开始更改模型矩阵(通过翻译),我感觉它与光的位置(目前从x = -10到x = 10,随着时间的推移)在某种程度上没有正确地包含在计算中/缩放).我发布了所有相关的代码,并希望你们能够以某种方式看到我失踪的东西,因为我已经盯着我的代码好几天了.

顶点着色器

#version 330

layout(location = 0) in vec3 position;
layout(location = 1) in vec3 normal;
layout(location = 2) in vec3 tangent;
layout(location = 3) in vec3 color;
layout(location = 4) in vec2 texCoord;

// fragment pass through
out vec3 Position;
out vec3 Normal;
out vec3 Tangent;
out vec3 Color;
out vec2 TexCoord;

out vec3 TangentSurface2Light;
out vec3 TangentSurface2View;

uniform vec3 lightPos;

// vertex transformation
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection; …

当 JavaFX8 代码加载颜色、凹凸和规格贴图时，颜色和规格按预期工作，但凹凸贴图会产生奇怪的效果。这三张都是墨卡托地球地图。一般来说，凹凸贴图没有添加3D效果。凹凸贴图只会导致喜马拉雅山和安第斯山脉在地球的明亮一侧显示为带有闪亮边框的黑色区域，而在彩色地图上显示在阴影一侧。我究竟做错了什么？

Image diffMap = null;
Image bumpMap = null;
Image specMap = null;
diffMap = new Image(MoleculeSampleApp.class.getResource("Color Map1.jpg").toExternalForm());
bumpMap = new Image(MoleculeSampleApp.class.getResource("Bump1.jpg").toExternalForm());
specMap = new Image(MoleculeSampleApp.class.getResource("Spec Mask1.png").toExternalForm());
final PhongMaterial earthMaterial = new PhongMaterial(Color.WHITE, diffMap, specMap, bumpMap, null);
earthMaterial.setDiffuseColor(Color.WHITE);
earthMaterial.setSpecularColor(Color.WHITE);

作为 3d 新手，我的第一个想法是应该有某种将凹凸贴图的像素颜色值缩放到高程的方法，但我缺少这种方法。

我目前正在使用黑白图像作为模型的凹凸贴图。该模型是一个.obj带有 UV 映射关联.mtl文件的文件。这是我使用的代码：

            // Load material file
            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setPath('/models/');
            mtlLoader.load('model.mtl', function (materials) {
                materials.preload();

                // Load obj file
                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials(materials);
                objLoader.setPath('/models/');
                objLoader.load('model.obj', function (group) {

                    var geometry = group.children[0].geometry;  
                    model = new THREE.Mesh(geometry, otherModel.material.clone());
                    scene.add(model);

                    render();
                    callback();
                });
            });

后来我在需要时添加凹凸贴图：

            model.material.bumpMap = new THREE.Texture(canvas);
            model.material.bumpScale = 0.8;
            model.material.bumpMap.format = THREE.RGBFormat;
            model.material.bumpMap.wrapS = mapRingModel.material.bumpMap.wrapT = THREE.RepeatWrapping;
            model.material.bumpMap.minFilter = THREE.LinearFilter;

            model.material.bumpMap.needsUpdate = true;
            model.material.needsUpdate = true;

这按预期工作，但现在我想使用我的纹理作为置换贴图而不是凹凸贴图，所以我将代码更改为：

            model.material.displacementMap = new …

我正在尝试创建带有凹凸贴图的着色器。

我具有对象的真实法线，并且具有凹凸贴图采样法线。我想做的是旋转采样法线，以使采样法线在实际法线方向上“向上”旋转。

我一直在从事数学工作，但似乎做得不好……Y在这个世界上崭露头角。

// Vertex shader sends this matrix to the pixel shader
OUT.normal[0] = mul((float3x3)world, normal);
float3 temptan = cross(normal, float3(0, 0, 1));
temptan = normalize(temptan);
OUT.normal[2] = mul((float3x3)world, temptan);
OUT.normal[1] = cross(OUT.normal[0], OUT.normal[2]); calculating binormal (in world space)

// Pixel Shader:
// Get normal from bump texture
float3 normal = tex2D(normalmap, texCoord);
normal = normal * 2 - 1;
// Swap Z and Y, since Z is up on the texture, but Y is up in this world. …

我正在尝试使用图像的luminanceToAlpha 转换在SVG 中创建凹凸贴图效果，然后更改点光源在整个表面上的位置。

这是我创建的短小提琴， https://jsfiddle.net/5g2qncq8/6/

代码片段：

<defs>
<filter id="bump" x="0" y="0" height="100%" width="100%" >
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="bumpMap"/>
<feDiffuseLighting in="bumpMap" surfaceScale="1" diffuseConstant="10" result="shading"> 
<fePointLight in="SourceGraphic" id="light" x="300" y="300" z="10">
</fePointLight>
</feDiffuseLighting>
<feBlend in="SourceGraphic" mode="multiply" result="lit"/>
</filter>
</defs>

当您滚动图像时，点光源的位置会更新，并且随着指针远离图像，图像会变暗。我遇到的问题是，虽然房子实际上是多边形的，但当点光源消失时，我看到一些额外的灰色矩形区域（在房子上方）。为什么会出现这种情况？

当光线照射到房子顶部时，它显然会消失。有人可以提出消除这个灰色区域的方法吗？

我知道我可能会错过一些明显的东西。任何帮助或指示表示赞赏。干杯!