我正在使用THREE.js點,有時我需要它們具有不同的每點顏色。有時候,我也在修改他們的alpha值,所以我不得不編寫自己的着色器程序。頂點顏色正在變成白色
在JavaScript我有以下代碼:
let materials;
if (pointCloudData.colors !== undefined) {
geometry.colors = pointCloudData.colors.map(hexColor => new THREE.Color(hexColor));
// If the point cloud has color for each point...
materials = new THREE.ShaderMaterial({
vertexColors: THREE.VertexColors,
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent,
transparent: true,
});
} else {
// Set color for the whole cloud
materials = new THREE.ShaderMaterial({
uniforms: {
unicolor: { value: pointCloudData.color },
},
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent,
transparent: true,
});
}
const pointCloud = new THREE.Points(geometry, materials);
我基本上設置除非我已每點的顏色所限定的網格的顏色均勻的值 - 然後我設置vertexColors到的幾何形狀。我還檢查了存儲在geometry.colors中的值,它們是範圍[0,1]中的正確RGB值。
我的Vertex Shader代碼:
attribute float size;
attribute float alpha;
varying float vAlpha;
varying vec3 vColor;
void main() {
vAlpha = alpha;
#ifdef USE_COLOR
vColor = color;
#endif
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_PointSize = size * (300.0/-mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}
我的片段着色器代碼:
uniform vec3 unicolor;
varying vec3 vColor;
varying float vAlpha;
void main() {
#ifdef USE_COLOR
gl_FragColor = vec4(vColor, vAlpha);
#else
gl_FragColor = vec4(unicolor, vAlpha);
#endif
}
再次,如果頂點顏色設置我檢查,然後將它傳遞給片段着色器,然後套每點。
由於某些原因,每個點設置顏色時,頂點都是白色的(截圖:The white pixels should be green/red)。我遠離WebGL的高級用戶,任何幫助,將不勝感激。我做錯了什麼,我不知道?
我做了修改,但我得到了相同的結果。 即使在之前,#ifdef代碼部分也能正常工作。只是顏色總是白色的。出於某種原因,它被錯誤地傳遞給碎片着色器。 – bmakan
歡迎使用stackoverflow。你設置'geometry.colors'意味着你正在使用'Geometry'而不是'BufferGeometry',在這種情況下這個答案是正確的。如果您使用'BufferGeometry',則需要設置屬性。無論如何,您可以自由提供自己的答案以作進一步澄清,但最好接受幫助您的人的答案。 – WestLangley