如何在jME3中定位球体上的纹理?

时间:2014-05-18 13:45:42

标签: java 3d jmonkeyengine uv-mapping

我想将JPEG纹理贴图放在球体上。它适用于我,但我想将纹理旋转180度。我希望图像不是从零紫外坐标开始,而是更早。

enter image description here

更新

我试图重新分配球体的纹理坐标。纹理坐标是浮点数,我希望它们不被约束到[0..1]的范围。否则它应该将我的图像放入[0..1 x 0..1]区域。

它做了类似后者的事情,但并不精确:

enter image description here

即。整个图像被放入一个球体的小区域。但是,它所在的确切区域与U的负值相对应,即在相同的经度处,图像边距在之前的实验中(顶部球体)。

为什么?

图片在这里:https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

代码如下:

package tests.com.jme3;

import java.nio.FloatBuffer;

import com.jme3.app.SimpleApplication;
import com.jme3.font.BitmapText;
import com.jme3.light.DirectionalLight;
import com.jme3.material.Material;
import com.jme3.math.ColorRGBA;
import com.jme3.math.Quaternion;
import com.jme3.math.Vector2f;
import com.jme3.math.Vector3f;
import com.jme3.scene.Geometry;
import com.jme3.scene.VertexBuffer;
import com.jme3.scene.VertexBuffer.Type;
import com.jme3.scene.VertexBuffer.Usage;
import com.jme3.scene.shape.Sphere;
import com.jme3.util.BufferUtils;

public class Try_TextureTransform  extends SimpleApplication {

    public static void main(String[] args) {
        Try_TextureTransform app = new Try_TextureTransform();
        app.setShowSettings(false);
        app.start(); // start the game
    }

    final float speed = 0.01f;

    BitmapText hudText;
    Sphere sphere1Mesh, sphere2Mesh;
    Material sphere1Mat, sphere2Mat;
    Geometry sphere1Geo, sphere2Geo;
    Quaternion orientation;
    DirectionalLight sun;

    @Override
    public void simpleInitApp() {

        flyCam.setEnabled(false);
        setDisplayStatView(false); 
        setDisplayFps(false);


        hudText = new BitmapText(guiFont, false);          
        hudText.setSize(guiFont.getCharSet().getRenderedSize());      // font size
        hudText.setColor(ColorRGBA.Blue);                             // font color
        hudText.setText("");             // the text
        hudText.setLocalTranslation(300, hudText.getLineHeight()*2, 0); // position
        guiNode.attachChild(hudText);

        sphere1Mesh = new Sphere(50, 50, 2);
        sphere1Mesh.setTextureMode(Sphere.TextureMode.Projected); // matrc

        sphere1Mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
        sphere1Mat.setTexture("ColorMap", assetManager.loadTexture("textures/Equirectangular_projection_SW.jpg"));

        sphere1Geo = new Geometry("Sphere2", sphere1Mesh);
        sphere1Geo.setMaterial(sphere1Mat); 
        sphere1Geo.setLocalTranslation(0, 0, 2);

        sphere2Mesh = new Sphere(50, 50, 2);

        VertexBuffer vb = sphere2Mesh.getBuffer(Type.Position);
        FloatBuffer fb = (FloatBuffer) vb.getData();
        float[] vertexCoordinates = BufferUtils.getFloatArray(fb);

        VertexBuffer vb2 = sphere2Mesh.getBuffer(Type.TexCoord);
        FloatBuffer fb2 = (FloatBuffer) vb2.getData();
        float[] uvCoordinates = BufferUtils.getFloatArray(fb2);

        double rho;
        for (int i = 0; i < vertexCoordinates.length/3; ++i) {

            uvCoordinates[i*2] = (float) Math.atan2(vertexCoordinates[i*3+1], vertexCoordinates[i*3]);
            rho = Math.sqrt(Math.pow( vertexCoordinates[i*3], 2) + Math.pow( vertexCoordinates[i*3+1], 2));
            uvCoordinates[i*2+1] = (float) Math.atan2(vertexCoordinates[i*3+2], rho);
        }
      //apply new texture coordinates
        VertexBuffer uvCoordsBuffer = new VertexBuffer(Type.TexCoord);
        uvCoordsBuffer.setupData(Usage.Static, 2, com.jme3.scene.VertexBuffer.Format.Float, BufferUtils.createFloatBuffer(uvCoordinates));
        sphere2Mesh.clearBuffer(Type.TexCoord);
        sphere2Mesh.setBuffer(uvCoordsBuffer);


        //sphere2Mesh.setTextureMode(Sphere.TextureMode.Projected); // better quality on spheres

        sphere2Mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
        sphere2Mat.setTexture("ColorMap", assetManager.loadTexture("textures/Equirectangular_projection_SW.jpg"));

        sphere2Geo = new Geometry("Sphere2", sphere2Mesh);
        sphere2Geo.setMaterial(sphere2Mat); 
        sphere2Geo.setLocalTranslation(0, 0, -2);

        cam.setLocation(new Vector3f(-10, 0, 0));
        cam.lookAt(Vector3f.ZERO, Vector3f.UNIT_Z);

        rootNode.attachChild(sphere1Geo);
        rootNode.attachChild(sphere2Geo); 

    }

    @Override
    public void simpleUpdate(float tpf) {


        Vector2f cursorPosition = inputManager.getCursorPosition();
        Vector3f cursorPositionWorld = cam.getWorldCoordinates(cursorPosition, 1);

        orientation = new Quaternion().fromAngleAxis(cursorPositionWorld.z*speed, Vector3f.UNIT_Y);
        orientation.multLocal(new Quaternion().fromAngleAxis(-cursorPositionWorld.y*speed, Vector3f.UNIT_Z));

        rootNode.setLocalRotation(orientation);



    }

}

1 个答案:

答案 0 :(得分:4)

执行此操作的正确方法是根据您的需要旋转几何体或编辑纹理(技术1和2)但是因为您谈到修改纹理坐标本身,我将包括技术3和4以防您使用这个例子是为 适当的时候学习更大的技术。

技术1 - 旋转几何

旋转几何体,使其朝向您想要的方向。这是迄今为止最简单,最合适,最易理解的技术和我推荐的技术

    //Add this
    Quaternion quat=new Quaternion();
    quat.fromAngles(0 ,0 , FastMath.PI);
    sphere1Geo.setLocalRotation(quat);

enter image description here

完成程序

public class Main extends SimpleApplication {

    public static void main(String[] args) {
        Main app = new Main();
        app.setShowSettings(false);
        app.start(); // start the game
    }

    final float speed = 0.01f;

    BitmapText hudText;
    Quaternion orientation;
    DirectionalLight sun;

    @Override
    public void simpleInitApp() {

        flyCam.setEnabled(false);
        setDisplayStatView(false); 
        setDisplayFps(false);


        hudText = new BitmapText(guiFont, false);          
        hudText.setSize(guiFont.getCharSet().getRenderedSize());      // font size
        hudText.setColor(ColorRGBA.Blue);                             // font color
        hudText.setText("");             // the text
        hudText.setLocalTranslation(300, hudText.getLineHeight()*2, 0); // position
        guiNode.attachChild(hudText);

        cam.setLocation(new Vector3f(10, 0, 0));
        cam.lookAt(Vector3f.ZERO, Vector3f.UNIT_Z);

        addOriginalSphere();
        addRotatedSphere();

    }

    public void addOriginalSphere(){
        Sphere sphere1Mesh = new Sphere(50, 50, 2);
        sphere1Mesh.setTextureMode(Sphere.TextureMode.Projected); // matrc

        Material sphere1Mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
        sphere1Mat.setTexture("ColorMap", assetManager.loadTexture("Textures/world.png"));

        Geometry sphere1Geo = new Geometry("Original Sphere", sphere1Mesh);
        sphere1Geo.setMaterial(sphere1Mat); 
        sphere1Geo.setLocalTranslation(0, -2, 0);

        rootNode.attachChild(sphere1Geo);
    }
    public void addRotatedSphere(){
        Sphere sphere1Mesh = new Sphere(50, 50, 2);
        sphere1Mesh.setTextureMode(Sphere.TextureMode.Projected); // matrc

        Material sphere1Mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
        sphere1Mat.setTexture("ColorMap", assetManager.loadTexture("Textures/world.png"));

        Geometry sphere1Geo = new Geometry("Rotated Sphere", sphere1Mesh);
        sphere1Geo.setMaterial(sphere1Mat); 
        sphere1Geo.setLocalTranslation(0, 2, 0);

        //Add this
        Quaternion quat=new Quaternion();
        quat.fromAngles(0 ,0 , FastMath.PI);
        sphere1Geo.setLocalRotation(quat);

        rootNode.attachChild(sphere1Geo);
    }

    @Override
    public void simpleUpdate(float tpf) {



    }

}

技术2 - 编辑纹理以符合您希望的方式

存在许多图像编辑程序,我使用的是Paint.Net和(像大多数编辑软件一样)提供精确的像素鼠标坐标。只需剪切并粘贴图像,使格林威治位于最左侧。在你的情况下,你需要编辑图像,因为它上面有可怕的白色边框。

技术3 - 与顶点纹理坐标

混乱

这对此来说太过分了,并不是我所建议的。但是,如果这是学习创建自己的custom mesh的练习,那么请继续阅读

public void addRotatedSphere_ByMessingWithMesh(){
    Sphere sphere1Mesh = new Sphere(50, 50, 2);
    sphere1Mesh.setTextureMode(Sphere.TextureMode.Projected); // matrc


    FloatBuffer textureBuffer=sphere1Mesh.getFloatBuffer(Type.TexCoord);

    float[] newTextureCoordinates=new float[textureBuffer.capacity()];


    for(int i=0;i<newTextureCoordinates.length;i++){
        //texture buffer goes x co-ordinate, y coordinate, x coordinate, y coordinate
        if (i%2!=1){
            newTextureCoordinates[i]=(float)((textureBuffer.get(i)+0.5)%1);
        }else{
            newTextureCoordinates[i]=textureBuffer.get(i);
        }
    }

    sphere1Mesh.setBuffer(Type.TexCoord, 2,newTextureCoordinates);

    Material sphere1Mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
    sphere1Mat.setTexture("ColorMap", assetManager.loadTexture("Textures/world.png"));



    Geometry sphere1Geo = new Geometry("Rotated Sphere", sphere1Mesh);
    sphere1Geo.setMaterial(sphere1Mat); 
    sphere1Geo.setLocalTranslation(0, 2, 0);



    rootNode.attachChild(sphere1Geo);
}

enter image description here

这有一个问题,因为后面的接缝没有正确完成;因为真正的纹理坐标是0,0.2,0.4,0.8,1。而新的那些在远处做一个环绕。在这个具体示例中,您可以手动处理接缝,但您已经可以看到这很痛苦。

技巧4 - 编写自己的着色器

这接近rediculus,但你可以编写一个custom shader,它将采用真正的纹理坐标并应用类似于技术3中执行的转换,但这将在显卡上完成,并且是一个噩梦要调试。

毋庸置疑,那将是使用小型核武器杀死一只苍蝇,我不会解释所有步骤的明确性(但它严重依赖于unshaded.j3md和unshaded.vert

  • 创建以下文件以定义新材料

enter image description here

材料定义

只有改变就是提到我们的自定义顶点着色器而不是使用自定义顶点着色器

MaterialDef Unshaded {

    MaterialParameters {
        Texture2D ColorMap
        Texture2D LightMap
        Color Color (Color)
        Boolean VertexColor (UseVertexColor)
        Boolean SeparateTexCoord

        // Texture of the glowing parts of the material
        Texture2D GlowMap
        // The glow color of the object
        Color GlowColor

        // For hardware skinning
        Int NumberOfBones
        Matrix4Array BoneMatrices

        // Alpha threshold for fragment discarding
        Float AlphaDiscardThreshold (AlphaTestFallOff)

        //Shadows
        Int FilterMode
        Boolean HardwareShadows

        Texture2D ShadowMap0
        Texture2D ShadowMap1
        Texture2D ShadowMap2
        Texture2D ShadowMap3
        //pointLights
        Texture2D ShadowMap4
        Texture2D ShadowMap5

        Float ShadowIntensity
        Vector4 Splits
        Vector2 FadeInfo

        Matrix4 LightViewProjectionMatrix0
        Matrix4 LightViewProjectionMatrix1
        Matrix4 LightViewProjectionMatrix2
        Matrix4 LightViewProjectionMatrix3
        //pointLight
        Matrix4 LightViewProjectionMatrix4
        Matrix4 LightViewProjectionMatrix5
        Vector3 LightPos
        Vector3 LightDir

        Float PCFEdge

        Float ShadowMapSize
    }

    Technique {
        VertexShader GLSL100:   MatDefs/TextureSplitting.vert
        FragmentShader GLSL100: Common/MatDefs/Misc/Unshaded.frag

        WorldParameters {
            WorldViewProjectionMatrix
        }

        Defines {
            SEPARATE_TEXCOORD : SeparateTexCoord
            HAS_COLORMAP : ColorMap
            HAS_LIGHTMAP : LightMap
            HAS_VERTEXCOLOR : VertexColor
            HAS_COLOR : Color
            NUM_BONES : NumberOfBones
            DISCARD_ALPHA : AlphaDiscardThreshold
        }
    }

    Technique {
    }

    Technique PreNormalPass {

          VertexShader GLSL100 :   Common/MatDefs/SSAO/normal.vert
          FragmentShader GLSL100 : Common/MatDefs/SSAO/normal.frag

          WorldParameters {
              WorldViewProjectionMatrix
              WorldViewMatrix
              NormalMatrix
          }

          Defines {
              NUM_BONES : NumberOfBones
          }
   }

    Technique PreShadow {

        VertexShader GLSL100 :   Common/MatDefs/Shadow/PreShadow.vert
        FragmentShader GLSL100 : Common/MatDefs/Shadow/PreShadow.frag

        WorldParameters {
            WorldViewProjectionMatrix
            WorldViewMatrix
        }

        Defines {
            COLOR_MAP : ColorMap
            DISCARD_ALPHA : AlphaDiscardThreshold
            NUM_BONES : NumberOfBones
        }

        ForcedRenderState {
            FaceCull Off
            DepthTest On
            DepthWrite On
            PolyOffset 5 3
            ColorWrite Off
        }

    }


    Technique PostShadow15{
        VertexShader GLSL150:   Common/MatDefs/Shadow/PostShadow15.vert
        FragmentShader GLSL150: Common/MatDefs/Shadow/PostShadow15.frag

        WorldParameters {
            WorldViewProjectionMatrix
            WorldMatrix
        }

        Defines {
            HARDWARE_SHADOWS : HardwareShadows
            FILTER_MODE : FilterMode
            PCFEDGE : PCFEdge
            DISCARD_ALPHA : AlphaDiscardThreshold           
            COLOR_MAP : ColorMap
            SHADOWMAP_SIZE : ShadowMapSize
            FADE : FadeInfo
            PSSM : Splits
            POINTLIGHT : LightViewProjectionMatrix5
            NUM_BONES : NumberOfBones
        }

        ForcedRenderState {
            Blend Modulate
            DepthWrite Off                 
            PolyOffset -0.1 0
        }
    }

    Technique PostShadow{
        VertexShader GLSL100:   Common/MatDefs/Shadow/PostShadow.vert
        FragmentShader GLSL100: Common/MatDefs/Shadow/PostShadow.frag

        WorldParameters {
            WorldViewProjectionMatrix
            WorldMatrix
        }

        Defines {
            HARDWARE_SHADOWS : HardwareShadows
            FILTER_MODE : FilterMode
            PCFEDGE : PCFEdge
            DISCARD_ALPHA : AlphaDiscardThreshold           
            COLOR_MAP : ColorMap
            SHADOWMAP_SIZE : ShadowMapSize
            FADE : FadeInfo
            PSSM : Splits
            POINTLIGHT : LightViewProjectionMatrix5
            NUM_BONES : NumberOfBones
        }

        ForcedRenderState {
            Blend Modulate
            DepthWrite Off   
            PolyOffset -0.1 0  
        }
    }

    Technique Glow {

        VertexShader GLSL100:   Common/MatDefs/Misc/TextureSplitting.vert
        FragmentShader GLSL100: Common/MatDefs/Light/Glow.frag

        WorldParameters {
            WorldViewProjectionMatrix
        }

        Defines {
            NEED_TEXCOORD1
            HAS_GLOWMAP : GlowMap
            HAS_GLOWCOLOR : GlowColor
            NUM_BONES : NumberOfBones
        }
    }
}

顶点着色器

使用平移将真实纹理坐标映射到移位坐标。如果你认为这不是java,你会很自负;事实并非如此。它的OpenGL Shader Langauge。

#import "Common/ShaderLib/Skinning.glsllib"

uniform mat4 g_WorldViewProjectionMatrix;
attribute vec3 inPosition;

#if defined(HAS_COLORMAP) || (defined(HAS_LIGHTMAP) && !defined(SEPARATE_TEXCOORD))
    #define NEED_TEXCOORD1
#endif

attribute vec2 inTexCoord;
attribute vec2 inTexCoord2;
attribute vec4 inColor;

varying vec2 texCoord1;
varying vec2 texCoord2;

varying vec4 vertColor;

void main(){
    #ifdef NEED_TEXCOORD1
        texCoord1 = inTexCoord;
        texCoord1.x=texCoord1.x+0.5;
        if (texCoord1.x>1){
            texCoord1.x=texCoord1.x-1;
        }
    #endif

    #ifdef SEPARATE_TEXCOORD
        texCoord2 = inTexCoord2;
    #endif

    #ifdef HAS_VERTEXCOLOR
        vertColor = inColor;
    #endif

    vec4 modelSpacePos = vec4(inPosition, 1.0);
    #ifdef NUM_BONES
        Skinning_Compute(modelSpacePos);
    #endif
    gl_Position = g_WorldViewProjectionMatrix * modelSpacePos;
}

然后将其用作材料而不是unshaded.j3md

Material sphere1Mat = new Material(assetManager, "Materials/TextureSplitting.j3md");

enter image description here

再次在背后有一个令人讨厌的突破,真正的纹理角色介于0和1之间,如果我们想要但是我们必须确保有两个顶点,我们可以明确处理分割点1,纹理坐标为0,1,纹理坐标为1。

结论

您应该使用技巧1或2。我将技术3和4简单地用来表示你可以使用实际的纹理坐标来做到这一点,但你不应该这样做。