three.js로 포인트 스프라이트 렌더링 문제가 발생했습니다.

현재 저는 과도한 양의 애니메이션 선을 렌더링하여 브라우저에서 데이터를 시각화하는 프로젝트를 진행하고 있습니다. 3D 라이브러리를 평가하기 시작했고 three.js를 사용하여 개념 증명 애플리케이션을 만들려고했습니다. 내 1440p 모니터에서 60fps로 최대 150,000 포인트의 스프라이트를 애니메이션 및 렌더링 할 수 있습니다. 세부 사항을보기 시작할 때까지 모든 것이 멋지게 보입니다. 그것은 두 개의 렌더링 문제가 있습니다three.js로 포인트 스프라이트 렌더링 문제가 발생했습니다.

카메라는 표시됩니다 포인트 스프라이트 중복의 투명 영역을 켜면 당신이
https://imgur.com/a/3Ugd0

https://imgur.com/a/NcIwX

https://jsfiddle.net/tcpvfbsd/1/

가장 좋은 방법은 영역에 걸쳐 확산 포인트 스프라이트 (초) 부부를 기다리는 것입니다

var renderer, scene, camera, controls; 
var points; 
var stats; 
var controls; 

var worldWidth = 200; 
var worldRadius = worldWidth/2; 
var patchSize = 10; 
var pointsAmount = 100000; 

function init() { 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    scene = new THREE.Scene(); 
    scene.background = new THREE.Color(0x1d252d); 

    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
    camera.position.set(0, worldWidth * 1.5, 0); 

    controls = new THREE.OrbitControls(camera, renderer.domElement); 
    controls.minDistance = 100; 
    controls.maxDistance = 1100; 

    scene.add(new THREE.GridHelper(2 * worldRadius, 2 * worldWidth/patchSize, 0x444444, 0x444444)); 



    var geometry = new THREE.BufferGeometry(); 
    var positions = new Float32Array(pointsAmount * 3); 
    var rotations = new Float32Array(pointsAmount * 1); 

    for (var i = 0; i < pointsAmount; i++) { 

    positions[i] = 0; 
    positions[i + 1] = 0; 
    positions[i + 2] = 0; 
    rotations[i] = 2 * Math.PI * Math.random(); 

    } 

    controls = new function() { 
    this.speed = 10; 
    this.amount = 10; 
    }; 

    var gui = new dat.GUI(); 
    gui.add(controls, 'speed', 0, 100); 
    //gui.add(controls, 'amount', 0, 10000).step(1);; 

    geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3)); 
    geometry.addAttribute('rotation', new THREE.BufferAttribute(rotations, 1)); 

    var loader = new THREE.TextureLoader(); 
    loader.load('//i.imgur.com/AmQQnZc.png', function(texture) { 
    var material = new THREE.PointsMaterial({ 
     size: 5, 
     transparent: true, 
     map: texture 

    }); 

    points = new THREE.Points(geometry, material); 
    scene.add(points); 

    stats = new Stats(); 
    document.body.appendChild(stats.dom); 
    animate(); 
    }); 

} 

function animate() { 

    requestAnimationFrame(animate); 

    var position = points.geometry.attributes.position; 
    var count = position.count; 
    var rotation = points.geometry.attributes.rotation; 
    var speed = patchSize * controls.speed/100; 
    if (speed > 0) { 
    for (var i = 0; i < count; i++) { 

     var wiggle = Math.random() > 0.9 ? THREE.Math.randFloat(-0.1, 0.1) : 0; 
     var theta = rotation.getX(i) + wiggle; 
     let dx = speed * Math.cos(theta); 
     let dz = speed * Math.sin(theta); 
     var x0 = position.getX(i); 
     var z0 = position.getZ(i); 
     var x = THREE.Math.clamp(x0 + dx, -worldRadius, worldRadius); 
     var z = THREE.Math.clamp(z0 + dz, -worldRadius, worldRadius); 
     if (Math.abs(x) === worldRadius) dx = -dx; 
     if (Math.abs(z) === worldRadius) dz = -dz; 
     position.setX(i, x); 
     position.setZ(i, z); 
     position.setY(i, 1); 
     rotation.setX(i, Math.atan2(dz, dx)); 

    } 
    } 

    position.needsUpdate = true; 

    stats.update(); 

    renderer.render(scene, camera); 

} 
init();

개념 응용 프로그램의 증거입니다 오른쪽 상단 모서리는 애니메이션을 일시 중지하고 마우스의 왼쪽 버튼은 카메라를 돌리고 회전시킵니다. 값 0.5로 alphaTest를 사용

는

출처

2017-09-16 user1937459

완전히 투명한 배경과 소재 세트'transparent : false, alphaTest : 0.5'에서 스프라이트를 시험해보십시오. – WestLangley

WestLangley에 감사드립니다! 그 고정 된 문제 # 2. 그러나 문제 # 1은 여전히 존재합니다. – user1937459

페이딩 추가 0.5
에 alphaTest을 설정 한 후 온 거짓 제거 버그 페이드 효과에 투명 값을 설정 다른 원
의 렌더링에 영향을주지 않고 원 오프 모서리를 클리핑 텍스처 자체가 원 경계선도 부드러운 페이드 효과를 일으킨 투명한 설정 이상한 가로줄

을 0.01 유닛이 Y 축상의 위치를 무작위 화

제거 중지라고 생각했다

출처

2017-09-18 17:17:05 user1937459

three.js로 포인트 스프라이트 렌더링 문제가 발생했습니다.

답변

관련 문제