Как получить тот же результат, что и с использованием PointMaterial, но с использованием ShaderMaterial для системы баллов

Я хочу использовать THREE.ShaderMaterial вместо THREE.PointMaterial.
И проблема с калибровкой или нанесением частиц.Как получить тот же результат, что и с использованием PointMaterial, но с использованием ShaderMaterial для системы баллов

Если я использую THREE.PointMaterial, размеры частиц зависят от координаты положения частиц (другими словами: глубина частиц).
Но, если я использую THREE.ShaderMaterial, то я теряю необходимый эффект.

Try it here

левый shpere является THREE.ShaderMaterial
право shpere является THREE.PointMaterial

Как вы можете видеть, есть большая разница.

Возможно, кто-то знает, как получить тот же результат рендеринга с использованием THREE.ShaderMaterial?

Код для mareials:

THREE.ShaderMaterial

const shaderPoint = THREE.ShaderLib.points 
const uniforms = THREE.UniformsUtils.clone(shaderPoint.uniforms) 
uniforms.map.value = /*set some texture*/ 
uniforms.size.value = 60 
material = new THREE.ShaderMaterial({ 
    uniforms: uniforms, 
    defines: { 
     "USE_MAP": "" 
    }, 
    transparent: true, 
    // alphaTest: .4, 
    depthWrite: false, 
    // depthTest: false, 
    // blending: THREE.AdditiveBlending, 
    vertexShader: shaderPoint.vertexShader, 
    fragmentShader: shaderPoint.fragmentShader 
}))

THREE.PointMaterial

let material = new THREE.PointsMaterial({ 
    size: 60, 
    // color: "#f0f", 
    map: uniforms.map.value, 
    depthWrite: false, 
    transparent: true 
})

источник

2016-12-20 artzub

Посмотрите [этот SO ответ] (http://stackoverflow.com/questions/12337660/three-js- корректировка-непрозрачность отдельных частиц/12344288 # 12344288) и [этот комментарий] (https://github.com/mrdoob/three.js/issues/10385#issuecomment-267789138). Это даст вам идеи. – WestLangley

@WestLangley благодарит за ваш комментарий. На самом деле я нашел решение !!! Если используется 'uniforms.scale.value = 350' и' USE_SIZEATTENUATION: "" 'У меня такой же результат :) Большое спасибо! – artzub

нужно использовать uniforms.scale.value = 350 и USE_SIZEATTENUATION: "" для того, чтобы сказать, threejs сделать правильный шейдер вершин прог ОЗУ.

THREE.ShaderMaterial

const shaderPoint = THREE.ShaderLib.points 
const uniforms = THREE.UniformsUtils.clone(shaderPoint.uniforms) 
uniforms.map.value = /*set some texture*/ 
uniforms.size.value = 60 
/*+++*/ 
uniforms.scale.value = 350 // in my case value is 350 
/*+++*/ 

material = new THREE.ShaderMaterial({ 
    uniforms: uniforms, 
    defines: { 
     USE_MAP: "", 
     /*+++*/ 
     USE_SIZEATTENUATION: "" 
     /*+++*/ 
    }, 
    transparent: true, 
    // alphaTest: .4, 
    depthWrite: false, 
    // depthTest: false, 
    // blending: THREE.AdditiveBlending, 
    vertexShader: shaderPoint.vertexShader, 
    fragmentShader: shaderPoint.fragmentShader 
}))

UPD # 1
Чтобы быть честным, если вам не нужно писать сами шейдер для THREE.Points, то вы должны использовать THREE.PointMaterial, потому что это также шейдеры.

Я просмотрел three.js source code и нашел, как правильно рассчитать масштаб для параметров униформы.
файл: SRC/рендеры/WebGLRenderer.js
линия: 2072
функция: refreshUniformsPoints

источник

2016-12-20 19:52:35 artzub

Как получить тот же результат, что и с использованием PointMaterial, но с использованием ShaderMaterial для системы баллов

ответ

Смежные вопросы