基本上我正在升级我的应用程序,从 r52 到 r55。这个应用程序使用动画(Tweens)来更新线条,但也是一个粒子系统。在 r52 中一切正常,缩放、移动和改变不透明度。
我使用了这些 WebGLRenderer 构造函数设置:
clearColor: 0x1f1f1f
clearAlpha: 1
antialias: true
sortObjects: false
我从示例中获取了一个简单的着色器:
<script type="x-shader/x-vertex" id="vertexshader">
attribute float size;
attribute vec3 customColor;
attribute float customOpacity;
varying vec3 vColor;
varying float vOpacity;
void main() {
vColor = customColor;
vOpacity = customOpacity;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vColor;
varying float vOpacity;
void main() {
gl_FragColor = vec4( color * vColor, vOpacity );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>
我使用以下方法初始化了粒子 ShaderMaterial:
blending : THREE.AdditiveBlending
depthTest : false
transparent : false
和粒子系统通过手动设置:
system.sortParticles = true
system.matrixAutoUpdate = true
system.visible = true
system.dynamic = true
所以这里是如何在 Three.js r52 中呈现的:
现在我已经阅读了 Migration wiki 页面,并得出结论我只需要更改几个名称,WebGLRenderer 构造函数、材质或着色器属性中没有任何内容。
我已经升级到 r55,现在视觉效果坏了:
线条和粒子现在都是明亮的(不考虑不透明度)。
此外,对于粒子,现在 alpha 蒙版已损坏(如果您仔细观察颜色不同,并且与其他粒子重叠时会出现“方形切割”,这是我在 r52 中使用的,只需调整 WebGLRender 设置即可修复)
有什么可以改变的?我试图更改 WebGL 构造函数中的设置、alphas、背景颜色.. 但它没有帮助。