铯元（三角形）阴影

我用这个代码绘制三角形铯：铯元（三角形）阴影

var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights(triangles); 

// unroll 'mypositions' into a flat array here 
var numPositions = mypositions.length; 

var pos = new Float64Array(numPositions * 3); 
var normals = new Float32Array(numPositions * 3); 
for (var i = 0; i < numPositions; ++i) { 
    pos[i * 3] = mypositions[i].x; 
    pos[i * 3 + 1] = mypositions[i].y; 
    pos[i * 3 + 2] = mypositions[i].z; 
    normals[i * 3] = 0.0; 
    normals[i * 3 + 1] = 0; 
    normals[i * 3 + 2] = 1.0; 
} 

console.log(normals) 
var geometry = new Cesium.Geometry({ 
vertexFormat : Cesium.VertexFormat.ALL, 
    attributes: { 
    position: new Cesium.GeometryAttribute({ 
     componentDatatype: Cesium.ComponentDatatype.DOUBLE, // not FLOAT 
     componentsPerAttribute: 3, 
     values: pos 
    }), 
    normal: new Cesium.GeometryAttribute({ 
     componentDatatype: Cesium.ComponentDatatype.FLOAT, 
     componentsPerAttribute: 3, 
     values: normals 
    }) 

    }, 

    // Don't need the following line if no vertices are shared. 
// indices: new Uint32Array([0, 1, 2, 3, 4, 5]), 
    primitiveType: Cesium.PrimitiveType.TRIANGLES, 
    boundingSphere: Cesium.BoundingSphere.fromVertices(pos) 
}); 

var myInstance = new Cesium.GeometryInstance({ 
    geometry: geometry, 
    attributes: { 
    color: new Cesium.ColorGeometryInstanceAttribute(0.0039215697906911, 
      0.7333329916000366, 
      0, 
      1) 
    }, 
    show: new Cesium.ShowGeometryInstanceAttribute(true) 
}); 

var TIN = viewer.scene.primitives.add(new Cesium.Primitive({ 
    geometryInstances: [myInstance], 
    asynchronous: false, 
    appearance: new Cesium.PerInstanceColorAppearance({ 
    closed: true, 
    translucent: false, 
    flat: false 
    //, 
    //vertexShaderSource: "", 
    //fragmentShaderSource: "" 

    }) 
    }));

这就是我得到：

我想使阴影，所以结果应该是类似下面图：

我试着写顶点和片段着色器GLSL，但没有成功。我对GLSL并不熟悉，并且遇到编译错误。有没有其他的方法来创建这种阴影？

谢谢！

来源

2017-02-08 VNenad

不管的事实，你有没有张贴您的GLSL着色器或得到的是工作，你的问题（一旦你最终找出GLSL的东西）是你设置你所有的法线在+ Z点方向而不是实际上对每个三角形正常，就像你的第二个屏幕截图所示。

var normals = new Float32Array(numPositions * 3); 
for (var i = 0; i < numPositions; ++i) { 
    pos[i * 3] = mypositions[i].x; 
    pos[i * 3 + 1] = mypositions[i].y; 
    pos[i * 3 + 2] = mypositions[i].z; 
    normals[i * 3] = 0.0; 
    normals[i * 3 + 1] = 0; 
    normals[i * 3 + 2] = 1.0; 
}

你需要做的，而不是被设置的位置，然后法线，上套的3个顶点（三角形），而不是单个顶点操作什么。通过这种方式，您可以实际计算曲面法线。这是如何做到这一点的多个解释之一：

https://math.stackexchange.com/questions/305642/how-to-find-surface-normal-of-a-triangle

我不熟悉的铯，但我想有会是一些“默认”的着色器做了基本的照明。如果不是，那么简单照明的基础就是Lambertian reflectance。你的顶点着色器会输出一个颜色，其计算公式为dot(N, L)，其中N是你的顶点的法线，L是从该顶点到你的光源的矢量（或者只是你的光的方向的负向，如果它是一个方向/环境/太阳/等光）。片段着色器会简单地将该颜色返回。

来源

2017-02-08 18:50:27

谢谢！这是一个很好的观察。首先会修正法线。 – VNenad

你是对的这是正常的问题。现在，我通过基本阴影获得了良好的可视化效果。法线可使用以下公式计算： 'Cesium.GeometryPipeline.computeNormal（geometry）;'包含索引。 – VNenad

铯元（三角形）阴影

回答

相关问题