Created
January 8, 2024 15:35
-
-
Save wewindy/b14ebb30855b1e315e4ebe45ed0d3756 to your computer and use it in GitHub Desktop.
Double side shading by real-view-direction
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const viewer = new Cesium.Viewer("cesiumContainer"); | |
const primitives = viewer.scene.primitives; | |
const fs = `czm_material czm_getMaterial(czm_materialInput materialInput) { | |
czm_material m = czm_getDefaultMaterial(materialInput); | |
float side = dot(materialInput.positionToEyeEC, materialInput.normalEC); | |
m.alpha = side > 0.0 ? 0.9 : 0.4; | |
m.diffuse = side > 0.0 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0); | |
return m; | |
}`; | |
const g = new Cesium.PolygonGeometry({ | |
closeBottom: false, | |
closeTop: false, | |
height: 400000, | |
extrudedHeight: 800000, | |
polygonHierarchy: new Cesium.PolygonHierarchy( | |
Cesium.Cartesian3.fromDegreesArray([ | |
110.0, 20.0, | |
115.0, 20.0, | |
115.0, 25.0, | |
112.5, 22.5, | |
110.0, 25.0 | |
]) | |
), | |
}); | |
const material = new Cesium.Material({ | |
fabric: { | |
type : 'DoubleSideColor', | |
source: fs, | |
}, | |
}); | |
const a = new Cesium.MaterialAppearance({ | |
faceForward: false, | |
material, | |
}); | |
console.log(a.fragmentShaderSource); | |
const primitive = new Cesium.Primitive({ | |
geometryInstances: [new Cesium.GeometryInstance({ | |
geometry: g, | |
})], | |
appearance: a, | |
}); | |
primitives.add(primitive); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
着色器不能用 -Z 轴当视线的原因很简单.
-Z 轴与三角面平行的时候,透视视角下“里面”是可以看得到的,但是因为平行的关系会在边界处轻易判断成“外面”,参考点积的意义。
所以视线应为视空间下到片元的向量,也即
materialInput.positionToEyeEC