Three.js: 선택적 조명

내가 말하고있는 것은 기본적으로 가지고있다 channel 필드 THREE.Light 및 lightChannel 필드 THREE.Mesh 그런이나 뭐. 후자가 null이면 모든 광원의 영향을 받습니다. 후자가 null이 아니면 동일한 값을 가진 라이트 채널에만 영향을 줍니다.

또는 메시 자체가 아니라 메시 지오메트리의 면을 분리하기 위해 추가할 수 있습니다.

그림자를 사용하려는 것 같습니까?

글쎄, 나는 그림자로 그런 ​​것을 얻을 수 있었지만 (그리고 나는 이미 시도했습니다) 다른 부작용을 일으키고 해킹이라고 생각합니다. 왜냐하면 일부 물체에 불을 붙이고 그림자를 던질 필요가 없기 때문입니다 . 처음부터 불을 붙이면 안 됩니다.

내가 필요한 것은 특정 광원이 한 세트의 메쉬에 영향을 미치지 않고 다른 세트에는 영향을 미친다는 것입니다.

일반적으로 다음과 같은 기술을 사용하여 이 작업을 수행합니다. 토론 스레드 예 :

glEnable(GL_LIGHT0);
//...
glEnable(GL_LIGHTn);

// Draw the walls to room 1
DrawWalls(room[0]);

// Draw the contents of room 1
DrawContents(room[0]);

glDisable(GL_LIGHT0);
//...
glDisable(GL_LIGHTn);

// Draw the walls to room 2
DrawWalls(room[1]);

// Draw the contents of room 2
DrawContents(room[1]);

따라서 그림자와는 다른 기능처럼 보입니다. 아니면 내가 뭔가를 놓치고 있습니까?

네... 정말 편리할 것 같아요. API가 어떻게 생겼는지 확실하지 않습니다.

아마도 가장 간단한 솔루션이 여기에서 가장 효과적일 수 있습니다.

1. channel (또는 group )를 THREE.Light
2. affectedByLightChannel (또는 affectedByLightGroup )를 THREE.Mesh (또는 형상의 면에도 추가)

어떻게 생각해?

'affectedByLightChannel'이 너무 길고 'lightChannel'과 같은 것이 가능할 수도 있지만 편리할 것이라고 생각합니다. 광원과 수신기의 채널 번호만 있으면 됩니다.

그렇게:

    light = new THREE.PointLight(0xFFF7D6, 1.0, 15)
    light.channel = 123
    testScene.add(light)

    testScene = new THREE.Scene
    geometry = new THREE.BoxGeometry(2,2,2)
    material = new THREE.MeshLambertMaterial 
        color: 0xffffff

    cube = new THREE.Mesh(geometry, material)
    cube.lightChannel = 123
    testScene.add(cube)

lightChannel 가 0이면 모든 채널의 영향을 받습니다. channel 가 0이면 모든 메시에 영향을 줍니다.

따라서 현재 동작과 완전히 이전 버전과 호환됩니다.

이해하기가 너무 어려울 수 있습니다 ... 어쩌면 다음과 같은 것이 더 나을 수 있습니다.

cube.lightInfluences = [ light1, light2 ];

나에게 절대적으로 괜찮아 보인다.

어떤 경우에는 사용하기가 조금 더 어려울 수도 있지만 분명히 이해하기 쉽습니다.

메쉬와 조명에 대한 간단한 정수 마스크 속성은 어떻습니까?

light = new THREE.PointLight(0xFFF7D6, 1.0, 15)
light.mask = 0xffffffff; // default mask
testScene.add(light);

cube = new THREE.Mesh(geometry, material)
cube.mask = 0xffffffff; // default
testScene.add(cube);

그런 다음 마스크의 논리적 AND가 0이 아닌 경우에만 개체에 조명이 켜집니다.
이렇게 하면 오브젝트에 대한 추가 방법 없이 조명이 둘 이상의 채널에 영향을 받을 수 있습니다.

마스크 기본값 0xffffffff는 기존 코드에 영향을 미치지 않습니다.

@satori99가 말한 것.

그러나 mask 는 대신 Light 및 Mesh*Material 의 속성이어야 한다고 생각합니다. (라이트의 영향을 받는 재료만)

또한 속성 이름을 lightMask , lightChannel 또는 channel 지정할 수 있습니다.

채널/마스크 접근 방식의 문제는 사용자가 비트 연산을 이해해야 한다는 것입니다. API의 나머지 부분과 비교하면 약간 너무 강렬합니다.

어레이 접근 방식으로는 할 수 없는 마스크로 무엇을 할 수 있습니까?

위의 두 개의 방이 있는 작업의 예를 들 수 있습니다.

어레이 방식보다 채널 방식을 사용하는 주요 포인트는 어레이를 사용하면 'light1을 1번 방에서 2번 방으로 이동'과 같은 간단한 작업이 더 복잡해진다는 것입니다.

그냥 설정하는 것보다

light1.channel = 2

(이전에는 1로 설정됨)

이전에 lightInfluences 배열에 light1이 있었던 방 1의 모든 개체를 찾은 다음 해당 배열에서 빛을 제거한 다음 방 2의 모든 개체에 추가해야 합니다.

'객체 1을 1번 방에서 2번 방으로 옮기기'와 같은 간단한 조작과 같은 이야기입니다. InfluenceChannel을 1에서 2로 설정하는 대신 해당 방의 모든 조명을 찾은 다음 영향 배열에서 제거한 다음 방 2의 모든 조명을 찾아 추가해야 합니다.

할 수 없다는 것이 아니라 lightInfluences 접근 방식이 나에게 절대적으로 좋다고 말한 이유입니다. 그러나 채널 항목은 1개의 할당만큼 간단한 공통 작업을 만들기 위해 나 자신을 위해 그 위에 구현하는 첫 번째 항목이 될 것입니다.

마스크로 구현해야 한다고 생각합니다. (CPU에서 구현되는지 GPU에서 구현되는지는 나중에 논의할 문제입니다.)

우리는 설정 방법을 예제를 통해 보여줄 수 있으며 사용자는 패턴을 따를 수 있습니다.

이것이 여전히 너무 복잡하다고 생각되면 THREE.Channels API를 생성할 수 있습니다.

light.channels = new THREE.Channels();
...
light.channels.clear();
light.channels.add( channel );
light.channels.remove( channel );
light.channels.all();

Mesh*Material 대한 동일한 방법입니다.

나는 그 API를 좋아한다 :)
나는 이것이 물체와 조명에 대해 작동하는 것을 볼 수 있지만, 머티리얼에 대해서는 어떻게 작동합니까?

재료만 조명에 반응합니다. 이것은 재료의 속성이어야 한다고 생각합니다.

@westlangley의 의견에 동의합니다. 조명은 재료에 따라 다릅니다.

'객체 1을 1번 방에서 2번 방으로 옮기기'와 같은 간단한 조작과 같은 이야기입니다.

그게 문제야. Channels 는 개체 기반이 아닙니다.

그게 문제야. 채널은 객체 기반이 아닙니다.

하지만 왜? 기술적 한계인가?

왜냐하면 그것은 그 모든 것의 전체 아이디어를 무효화하기 때문입니다. 같은 재료를 재사용하는 다른 개체가 있을 수 있지만 그 중 하나는 켜져 있어야 하고 다른 하나는 켜져 있으면 안 됩니다.

하지만 왜? 기술적 한계인가?

아니오. 물체가 빛에 반응하지 않기 때문입니다. 재료만 가능합니다.

같은 재료를 재사용하는 다른 개체가 있을 수 있지만 그 중 하나는 켜져 있어야 하고 다른 하나는 켜져 있으면 안 됩니다.

장면의 모든 개체에 대해 동일한 재질을 사용할 수 있습니다. 재질에 다른 균일 값이 필요한 개체의 재질은 clone 뿐입니다. 모두가 공유하는 단 하나의 셰이더 프로그램만 있어야 합니다.

마스크로 구현해야 한다고 생각합니다. (CPU에서 구현되는지 GPU에서 구현되는지는 나중에 논의할 문제입니다.)

GPU에서 직접 쉽게 처리할 수 있습니까?

GPU에서 직접 쉽게 처리할 수 있습니까?

예, 조명과 재료에 대한 추가 channels 유니폼을 전달해야 합니다.

계층 관리 시스템은 어떻습니까? 메쉬를 레이어로 그룹화하고 거기에서 마스크를 적용합니다(조명, 그림자, 가시성 등에 영향을 미칠 수 있음). 단일성이 좋은 예가 될까요?

그림자도 관련 주제입니다. 선택적 섀도우 캐스팅 같은 것도 있어야 한다고 생각해요. 'receiveShadow = true' 대신 'receiveShadowFrom = ...'(및 소스 목록)과 같습니다.

특정 방에만 영향을 미치는 조명을 설정할 때(제 예에서는) 해당 조명이 이 방 개체에만 그림자를 드리우도록 즉시 원하기 때문입니다.

그림자 속성은 이 스레드에서 위와 같은 이유로 객체가 아니라 실제로 재료에 있어야 합니다.

그림자 속성은 이 스레드에서 위와 같은 이유로 객체가 아니라 실제로 재료에 있어야 합니다.

네, 이해가 됩니다!

이 기능을 포함할 계획이 있습니까(예: 첫 번째 초안에 대한 계획된 대상 릴리스)?

해결 방법으로 각 방(및 해당 조명)에 대해 별도의 장면을 설정하여 대부분의 요구 사항을 달성할 수 있습니까?

renderer.autoClear = false;
...
renderer.render( scene1, camera );
renderer.render( scene2, camera );

흠, 이 방법을 시도해 보겠습니다!

선택적 조명/그림자는 향후 버전 IMO에 필수입니다.

이것에 대해 BIG +9999, 재질이 광원 A에서 그림자를 드리울지 아니면 광원 B에서 그림자를 드리울지 선택할 수 있기를 원합니다. 현재 두 장면이 아닌 다른 솔루션을 가지고 있는 사람이 있습니까? 나에게 꽤 고통스러운 일이 될거야...

이런 젠장 어떻게 아직도 구현되지 않습니까? rohan에서 +9999 이후)

하하 제 추측으로는 @tsone 을 구현하는 것이 같습니다 . 해당 커밋에 대한 정보를 제공할 수 있습니까? 지금 전화 클라이언트에서 탐색 중

이것들이 단지 재료에 전달되는 유니폼이라면 구현하기가 얼마나 어렵습니까? 그들이 해야 할 일은 webgl 렌더러의 깊숙한 곳에 존재하는 경우 재질에 정의된 조명의 전역 목록을 대체하는 것입니다.

다음은 Dev 분기의 Layers 구현을 테스트하는 간단한 JSFiddle입니다.
https://jsfiddle.net/Angrypickle/t8f7q3vo/4/
불행히도 현재로서는 제대로 작동하는 것처럼 보이지 않습니다. 아니면 내가 뭔가 잘못하고 있습니까?

예. 레이어는 아직 조명과 함께 작동하지 않습니다. 그들은 카메라/객체와 함께 작동합니다! 😊

로저 그 선생님! 다음은 중첩 카메라를 사용하여 레이어로 선택적 조명을 구현하는 업데이트된 JSFiddle입니다.
https://jsfiddle.net/Angrypickle/t4a1eusL/
데스크톱과 모바일에서 제대로 작동하는 것 같습니다. 누구든지 이 접근 방식에서 심각하게 나쁜 점을 본 적이 있습니까? 최소한 조명이 레이어 기능에 연결될 때까지?

누구든지 이 접근 방식에서 심각하게 나쁜 점을 본 적이 있습니까?

물론 나쁘다. 한 대의 카메라로 현장을 탐색하는 대신 사람들은 이제 일을 해야 합니다. camera1.add( camera2 ); 제가 볼 때 이것은 WTF라는 것을 의미합니다. 무엇처럼? 내 카메라에 카메라? 개별적으로 조명을 켜야 하는 수십 개의 방이 있는 경우 어떻게 해야 합니까? 얼마나 많은 카메라가 필요합니까? 그리고 레이어... 어제는 레이어가 없었습니다. 맞죠. 이제 레이어에 대해 l̲e̲a̲r̲n̲ 해야 합니다.

내가 이것에 대한 완벽한 솔루션을 가지고 있다고 말할 수 없습니다. 예를 들어, alternativa3d 사람들은 빛의 경계 상자에 있는 물건에 빛을 비추곤 했습니다. 이것은 최종 사용자를 위한 0에 가까운 설정의 이점이 있었지만 조명 사이의 경계가 비스듬해야 할 때 무너지고 있었습니다. 하지만 그래도 지금 당장 실제 프로젝트에서 이 문제를 해결해야 한다면 사용된 표준 재료를 ShaderMaterial-에 긁어 모아 거기에 내가 원하는 조명을 직접 전달하는 것으로 해결할 것입니다.

@makc 레이어는 실제로 매우 간단하고 강력합니다!
@Zob1 의 접근 방식은 확실히 올바른 접근 방식이 아닙니다. 레이어가 조명과 함께 작동할 때까지 오래 걸리지 않기를 바랍니다.

내가 올바르게 따르고 있는지 확인하십시오. 단일 장면과 "주" 광원이 있다고 가정해 보겠습니다. 이 기술을 사용하면 특정 재료가 이 주 광원을 무시하고 다른 광원에서 그림자를 드리울 수 있습니까?

글쎄, 그것을 위해 우리는 또한 재료에 레이어 지원을 추가해야 할 것입니다.

현재 우리가 할 수 있는 일은 카메라에서 객체를 표시/숨기기입니다.

게임을 하고 있고 편집기에서 구체를 사용하여 충돌체를 표시한다고 가정해 보겠습니다. 그 구체는 레이어 1로 설정할 수 있고 카메라의 편집기는 레이어 0과 1을 활성화할 수 있지만 게임 카메라는 레이어 0으로 설정할 수 있습니다. 그렇게 하면 편집기에서 모든 더미를 볼 수 있지만 게임에서는 ' 다시 갔다.

편집기 자체에 기능을 추가할 때마다 이것이 더 이해가 될 것이라고 생각합니다. 우리도 몇 가지 예를 들어야 할 것입니다.

오른쪽! 그래서 기본적으로 제가 하고 싶은 것은 제 Three JS 세계에 2D 캐릭터가 있다는 것입니다. 이러한 캐릭터는 환경의 일부인 것처럼 보이도록 "점" 그림자가 필요합니다. 저는 현재 발에 투명한 검은색 원 지오메트리를 배치하고 비스듬히 작동하도록 하는 상당히 해킹된 것들을 사용하여 이 작업을 수행하고 있습니다. 그럼에도 불구하고 복잡한 표면에서는 전혀 잘 작동하지 않습니다.

내 원래 아이디어는 보이지 않는 원형 기하학 위치를 각 캐릭터 위에 "후광"으로 배치하고 전체 장면을 덮는 직접 아래를 가리키는 조명을 만드는 것이었습니다. 이 후광은 이 광원의 그림자만 투사하는 반면 장면의 다른 모든 것은 "주" 광원의 그림자를 투사합니다.

이 아이디어가 작동하려면 레이어가 필요하지 않나요?

이 후광은 이 광원의 그림자만 투사하는 반면 장면의 다른 모든 것은 "주" 광원의 그림자를 투사합니다.

shadowOnly 옵션이 있었지만 제거되었습니다.

FWIW, 그림자를 만드는 방법이 있습니다 ...

아, 하지만 shadowOnly는 실제로 작동하지 않을 것입니다. 왜냐하면 후광이 두 광원 모두에서 그림자를 투사할 것이기 때문입니다. 저는 그들이 하나의 광원에서만 그림자를 투사하기를 원합니다.

지금 전화로 그 예를 확인하겠지만 유망해 보입니다.

흠 편집 하지만 그 구체가 장면에서 위치를 변경하고 그라운드 메시의 높이가 다양하다면 그 그림자가 지면의 표면 법선과 올바르게 일치할까요?

아니요...

그래 그렇게 생각했다. 레이어가 필요합니다! 헤헤

안녕하세요 @rohan-deshpande ,

예, 사용 사례의 경우 일종의 레이어가 필요합니다. 저는 얼마전에 섀도우메쉬 기능을 구현한 사람이었습니다. 그것들은 단일 평면 그림자이기 때문에 평평한 바닥이나 지면을 포함하는 장면에 사용하기 위한 것이었습니다. 그러나 빠르고 저렴하지만 정확한 단일 평면 그림자가 필요한 경우 성능 면에서 이를 능가하기 어렵습니다. 이것을 추가한 이유는 간단한 데모 장면의 경우에도 섀도우맵이 내 프레임 속도를 상당히 떨어뜨렸기 때문입니다. 반면에 Shadowmeshes는 내 전화에서도 빠르게 실행됩니다.

여기에서 사용하는 게임을 확인할 수 있습니다.
https://github.com/erichlof/3dLightCycles

2개의 다른 뷰포트를 통해 장면을 두 번 렌더링하고 있으며 모든 게임 개체(주기 및 트레일 벽)에 올바른 그림자가 있습니다. 내 스마트폰에서 매끄럽게 실행되는데, 이는 프레임당 2개의 장면 렌더링을 위한 섀도우맵으로는 불가능합니다.

미래의 레이어에 대해 여기에서 +1 :)

@erichlof 게임은

알겠습니다. 레이어를 기다리겠습니다. 그때까지는 내 해킹 솔루션으로 충분해야 합니다.

얘들 아
이게 구현된건가요?
http://stackoverflow.com/questions/33689781/casting-shadows-based-on-a-specific-light?noredirect=1#comment55153706_33689781

아니요 아직 구현되지 않았습니다. 레이어를 기다리거나 ITT에 나열된 솔루션 중 하나를 시도해야 합니다(예: 별도의 장면).

다시 +99999

이것은 확실히 매우 도움이 될 것입니다. 그리고 이제 레이어가 작동하고 있습니다. 이것이 이것을 유지하고 있는 것처럼 들립니다. 자, 여기 다정한 충돌이 있습니다. ;-)

@manthrax 이것을 확인하십시오!

다시 +99999

나는 이것을 좋아할 것입니다. 각 아바타가 가장 가까운 조명에 의해서만 조명되는 상황이 있고 장면에 수천 개의 조명을 가질 수 있습니다. 각 아바타에 대해 단일 조명을 지정하는 것이 좋습니다.

안녕!
이 기능이 필요하고 구현하려고 생각했습니다. 이 작업을 수행할 수 있는 위치( initMaterial in WebGLRenderer )를 사용하여 매우 간단해야 합니다. 기존 레이어.

특정 조명 객체(조명 자체 객체 레이어와 무관)의 영향을 받는 레이어를 선택하기 위해 조명별 비트 마스크( Layers 객체로)를 만든 다음 조명/섀도우맵을 필터링하여 위에서 언급한 함수에서 각 객체에 대해 유니폼으로 설정됩니다.

관련이 있을까요?

당신이 그 전에 다른 방법으로 나를 리디렉션하지 않는 한 이것을 시도하고 내가 이것을 달성하는 즉시 풀 요청을 제출할 것입니다.

업데이트:

https://github.com/tiesselune/three.js/tree/selective-lighting

나는 어딘가에 도착하고있다. 이것이 성능에 어떤 영향을 미칠지 또는 성능을 위해 내 코드를 최적화하는 방법은 확실하지 않지만 내가 만든 몇 가지 테스트에서 작동하고 있습니다. 레이어별 조명! 야!

그래도 아직 더 테스트해야 하고 pull 요청을 제출하기 전에 관련 예제를 만들어야 합니다.

업데이트:

몇 가지 추가 테스트를 수행했으며 서로 다른 레이어에 있는(그리고 다른 조명 설정을 가진) 두 객체에 동일한 재질을 사용하면 조명 설정 이후 렌더러가 지속적으로 재질을 업데이트합니다( needsUpdate ). 이전에는 불가능했던 두 물체 사이의 물질적 변화에 대해. 이것은 엄청난 성능 저하와 시각적 이상을 의미합니다(마지막 재료 업로드가 렌더링 시간에 승리하기 때문에).

물론, 조명 설정이 다른 두 오브젝트에 대해 똑같은 것을 사용하는 대신 새 머티리얼 인스턴스를 만들어 이를 방지할 수 있습니다. 그러나 사용자를 위해 복제하는 것이 좋은 생각인지 의심스럽습니다. 원본 자료에서 변경 사항을 확인하여 복제에 미러링하는 것을 의미하기 때문입니다.

다음은 내가 사용할 수 있는 두 가지 솔루션입니다.

1. 조명 설정이 다른 레이어의 두 개체가 동일한 재질을 공유할 때 경고를 표시할 수 있으므로 사용자가 직접 새 복제 재질을 만들고 관리할 수 있습니다.

2. 오브젝트 레벨 대신 재료 레벨에서 레이어를 추가할 수 있습니다(그리고 조명에 대한 병렬 레이어 시스템 생성). 따라서 다른 재료를 사용하여 다른 조명 설정을 달성하는 것이 필수입니다. 이는 가시성을 위한 현재 레이어 시스템(오브젝트 및 카메라)과 조명(재료 및 조명)에 대한 다른 시스템이 있음을 의미합니다.

여러분은 어떻게 생각하세요?

나는 당신의 의견이 들어오는 것을보고 이것에 대해 생각했습니다. 많은 사람들이 아마 그것을 보지 못할 것이기 때문에 경고를 표시하는 것은 도움이되지 않는다고 생각합니다. 둘 중 저는 확실히 물체보다는 재질에 라이트 레이어를 설정하는 것을 선호합니다. 다소 직관적이지 않지만 여전히 의미가 있습니다.

명확히 하자면 needsUpdate 가 설정되었을 때 이 경우에는 균일한 값만 다시 계산하는 것 아닌가요? 다른 셰이더가 모두 캐시되어야 하므로 셰이더를 다시 컴파일할 필요가 없습니다. 어떤 성과를 보고 있습니까? 추가 계산이 발생하는 정확한 위치를 확인하기 위해 프로파일러를 사용했습니까?

그건 그렇고, filterAmbiantLights 는 filterAmbientLights 이어야 합니다.

철자 오류에 대해 당신이 옳습니다. 나는 그것이 틀렸다는 것을 알아차리기 전에 실제로 "ambiant"로 모든 것을 작성했고 나는 그 발생을 잊었습니다. 😇

그런 다음 재료의 레이어 정보를 이동할 것입니다. 작동 방식과 더 관련성이 있고 일관성이 있는 것 같습니다.

initMaterial (그리고 acquireProgram 및 getShaderParameter 는 어떤 이유로 엄청나게 느림)가 매 프레임마다 여러 번 호출되어 성능 저하가 발생했습니다 lightHash 는 매번 다르며 material.needsUpdate 를 true 합니다.

BTW Chrome의 프로파일링 도구를 사용하고 있습니다. (타임라인 및 프로파일러).

제 생각에는 괜찮지만 acquireProgram 가 항상 실행되어야 하는 이유가 확실하지 않습니다. 프로그램 매개변수에 각 조명 유형의 수를 추가하면 매번 셰이더를 다시 컴파일할 필요가 없겠죠?

나도 이해가 안 간다;

다음은 호출 스택(모든 프레임에서)과 그에 따른 끔찍한 메모리 누수입니다. 이에 대해 잘 알고 있다면 무엇이 잘못되었는지 이해하는 데 도움이 될 것입니다. 매 프레임마다 새로운 WebGLProgram 생성하는 것 같습니다...

WebGLProgram이 생성되는 동안 정점/조각 셰이더 코드를 업데이트하여 다시 컴파일하거나 다른 셰이더로 간주하는 replaceLightNums 수 있습니다. ?

편집 : 어쨌든, 재료 수준에서 레이어를 사용하면 예상대로 문제가 해결됩니다. 조사해야 할 어딘가에 메모리 누수가 있지만 그렇지 않으면 꽤 좋아 보입니다.

코드를 완전히 이해하고 새로운 버그를 도입하지 않았는지 확인하기 위해 왜 이런 일이 발생하는지 이해하는 것이 좋습니다. 셰이더 코드가 프레임마다 변경되는 이유를 단계별로 확인할 수 있습니까?

무슨 일이 일어나고 있는지 말할 만큼 WebGLPrograms 잘 모르지만, 여러분을 위해 해당 셰이더를 캐싱해야 하는 것 같습니다.

실제로 매우 간단합니다.

• acquireProgram 를 호출할지 여부를 알기 위해 initMaterial 는 캐시에서 셰이더 "코드"를 가져오고(실제로는 getProgramCode 에서 생성된 해시에 가깝습니다) 비교합니다. 현재 자료 프로그램의 "코드"로 이동합니다.
• 이 함수는 각 유형의 빛을 포함하는 매개변수에서 "코드"를 생성하기 때문에 필터링되고 객체 간에는 다르지만 코드는 객체에서 동일한 재료(즉, 동일한 프로그램)에 대해 다를 수 있습니다. 다른.
• 이 프로세스는 각 개체에 대해 반복되기 때문에 "코드"는 프레임당 여러 번 변경되어 단일 프레임에서 여러 번 재컴파일되도록 하여 성능 저하를 일으킵니다.
• 즉, 여러 객체가 동일한 재질을 가지고 있으므로 동일한 프로그램을 통해 반복되는 마지막 객체가 프로그램에 매개변수를 부과하여 두 객체 모두 동일한 조명 설정으로 조명되지만 반드시 동일한 shadowMaps(즉, 다른 순서의 개체에 대해 계산할 수 있지만 동일한 "마지막 개체가 이깁니다" 문제가 발생하여 시각적 이상함을 유발합니다.

이제 모든 것이 예상대로 작동합니다(다른 조명 설정을 가진 각 개체는 다른 재질과 다른 프로그램을 가지고 있기 때문에). 내 자신의 가벼운 해시로 할 수 있는 메모리 최적화를 제외하고는 곧 다루게 될 것입니다.

라이트 숫자가 가변적이라면 약간의 개선이 있을 수 있으므로 각 머티리얼은 동일한 프로그램의 인스턴스일 뿐이지만 해당 숫자는 셰이더 코드( replaceLightNums )에 삽입되기 때문에 현재 방식과 호환되지 않는 것 같습니다. (및 최적화)입니다.

설명이 충분히 이해가 되었기를 바랍니다

레이어 마스크를 셰이더에 전달할 수 있는지 궁금합니다(객체당 하나의 유니폼과 조명당 하나의 유니폼). 그런 다음 우리는 같은 것을 추가 할 수 있습니다 이 에 여기 .

뭔가...

for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {

    pointLight = pointLights[ i ];
    pointLight.distance *= float( object.mask & pointlight.mask > 0.0 );

    ...

}

음, glsl에서 비트 연산을 수행할 수 없다고 생각합니다...

예, 비트 연산이 GLSL 1.30에서 시작되고 표준 WebGL이 1.00을 사용하는 것처럼 보입니다. 😕

안녕하세요 @mrdoob 과 @tiesselune ,

Chrome 56 및 Firefox 51이 방금 출시되었습니다. 즉, WebGL 2.0이 기본적으로 활성화되어 있습니다(WebGL2는 OpenGL ES 3.0 사양을 따릅니다). 즉, 이제 비트 작업(및 3D 텍스처와 같은 기타 멋진 기능)을 사용할 수 있습니다. Three가 WebGL 2.0으로의 전환을 천천히 준비하고 있는지는 모르겠지만 저는 three84.js 사본에 몇 가지 필수 변경 사항을 적용하고 WebGL 2.0을 활성화했으며 셰이더에서 약간의 작업을 수행했습니다. 효과가 있었고 성공했습니다!
https://developers.google.com/web/updates/2017/01/nic56
https://developer.mozilla.org/en-US/Firefox/Releases/51

단지 당신에게 알리고 싶었습니다. 마스킹 아이디어에 +1 :-)

안녕하세요 @erichlof입니다 ! WebGL2에 대한 좋은 소식입니다. 이는 WebGL2 렌더러가 마스킹 문제에 보다 효율적인 방식으로 접근할 수 있음을 의미합니다.

어쨌든, 지금까지 WebGL2를 지원하는 브라우저의 사용이 매우 제한적 이라는 점을 감안할 때 WebGL 1에서 작동하도록 하려는 노력을 버릴 수는 없다고 생각합니다. 거의 모든 브라우저에서 WebGL 앱을 실행할 수 있을 때까지 오랜 시간이 걸리므로 아마도 WebGL 2가 실제로 대규모로 사용될 때까지 조금 더... 😕 하지만 힌트 주셔서 감사합니다!

다시 안녕!

새 업데이트: 메모리 관리에 필요하다고 생각되는 작업을 수행했지만 프로필을 실행할 때 JS 힙 가비지 수집이 소프트웨어 구성(실행 중인 프로그램, 열린 탭, 확장 프로그램)과 많은 관련이 있는 것 같습니다. 좀 더 경험이 있는 사람이 현재 버전의 threejs에 비해 내 코드가 메모리가 부족하다는 것을 확인할 수 있습니까?

어쨌든 나는 examples/webgl_lights_selective_lighting.html 에서

다음은 스크린샷입니다.

여기에서 예제를 실시간으로 볼 수 있어야 합니다.

https://rawgit.com/tiesselune/three.js/selective-lighting/examples/webgl_lights_selective_lights.html

그래도 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'set' of undefined
    at init (webgl_lights_selective_lights.html:117)
    at webgl_lights_selective_lights.html:67

@looeee : 로컬 호스트에서 npm run build-uglify 를 실행해야 합니다. 병합 가능성을 위해 자발적으로 커밋에 빌드를 포함하지 않았습니다...

아니면 해야 할까요?

편집 : 다음은 테스트 목적으로 다른 지점에서 작동하는 링크입니다. https://rawgit.com/tiesselune/three.js/selective-lights-test/examples/webgl_lights_selective_lights.html

이봐, 나에게서 +999999. 이것은 구현되어야 합니다(적어도 THREE.Layers )

$$('.comment-body').reduce((acc, el) => {
  let mat = el.textContent.match(/\+(\d+)/)
  let num = +(mat && mat[1] || 0)
  return acc + num
}, 0)
>> 1219997

🤔

@mrdoob 그는 이 스레드에서 +N을 계산했습니다.

btw, 선택적 조명의 경우 +14570

이것은 더 높은 추상화에서 조명이 작동하는 방식을 미세 조정하는 데 매우 유용합니다.

예를 들어 다음 펜에서 조명이 좀 더 사실적으로 보이도록 DOM 요소에 대해 조명이 한 방향으로 작동하도록 하고 Sphere에 대해 다른 방식으로 작동하도록 하고 싶습니다.

https://codepen.io/trusktr/pen/RjzKJx

단일 포인트 조명처럼 보이는 특정 효과는 특정 요소에만 선택적으로 영향을 미치는 두 개 이상의 조명을 결합하여 얻을 수 있습니다.

예를 들어, 이전 예에서 "DOM 요소"에 좋은 그림자를 얻기 위해 빛의 강도를 높일 수 있지만 그러면 Sphere가 너무 빛나고 밝게 보일 것입니다. 내가 Sphere에 대해 더 어두운 조명을 가질 수 있고 "DOM 요소"에 대해 더 밝은 조명을 가질 수 있다면 시청자에게 여전히 하나의 조명만 있는 것처럼 보이는 이 방법으로 더 현실적인 것을 얻을 수 있습니다. 그런 다음 이러한 종류는 상위 레벨 API에서 추상화되어 씬 뒤에서 두 개의 Three.js 조명이 실제로 작동할 때 하나의 조명만 조작되는 것처럼 보이게 할 수 있습니다.

@WestLangley

해결 방법으로 각 방(및 해당 조명)에 대해 별도의 장면을 설정하여 대부분의 요구 사항을 달성할 수 있습니까?

이와 같은 예에 대한 링크가 있습니까? 결과에 다른 예기치 않은 렌더링 효과가 있을 수 있습니까?

결과에 다른 예기치 않은 렌더링 효과가 있습니까?

예를 들어 투명 개체의 렌더링 순서 - 장면 1의 투명 개체는 장면 2의 불투명 개체보다 먼저 렌더링됩니다.

이와 같은 예에 대한 링크가 있습니까?

여기, 나는 당신을 위해 하나를 만들었습니다 : https://jsfiddle.net/f2Lommf5/524/

예를 들어 투명 개체의 렌더링 순서 - 장면 1의 투명 개체는 장면 2의 불투명 개체보다 먼저 렌더링됩니다.

그것이 내가 생각했던 것입니다. 매우 제한된 경우에만 해결 방법을 만듭니다. 진정한 해결책을 기대합니다!

글쎄, 당신은 scene1 trough에서 scene2의 불투명한 물체를 볼 수 있는 경우에만 문제가 발생할 것이라고 주장할 수 있습니다. 하지만 그렇다면 조명도 통과해야 하고 처음부터 장면을 분리할 이유가 없습니다. 그러나 나는 이런 종류의 주장이 실제로 설득력이 없다는 데 동의합니다.

@makc 해결하려는 문제의 예는 다음과 같습니다.

https://discourse.threejs.org/t/how-to-make-shadows-darker-on-transparent-objects/1389

선택적 조명이 이에 정말 도움이 될 것이라고 생각합니다.

@trusktr mrdoob의 그림자 재질을 변경하여 해결할 수 있다고 생각합니다. 흑백 그림자 텍스처만 표시되며 필요에 따라 투명하게 수정할 수 있습니다.

PlayCanvas의 마스크는 선택적 조명에 사용하기 정말 쉬운 것 같습니다( https://forum.playcanvas.com/t/set-certain-object-to-not-receive-light/785).

이것을 병합할 수 있습니까? 그림자 문제는 코드 변경과 관련이 없는 Lambert 셰이더 때문이라고 생각합니다. @tiesselune

@ErikBehar 실제로 오늘 오후에 할 일을 찾고 있었습니다. 코드를 최신 threejs로 업데이트하고 풀 리퀘스트를 제출하려고 합니까? 저는 제가 이렇게 큰 프로젝트에 실질적인 기여를 했다는 사실을 알게 되어 정말 기쁩니다. (그리고 이 버그가 내 변경 사항과 관련이 없다는 것을 확인하는 것이 좋습니다)

편집: 코드의 이 부분이 많이 변경되었음을 발견했습니다. 이전에 사용하던 상태가 WebGLRenderer에서 WebGLLights로 이동했기 때문에 시간이 조금 필요할 것 같습니다.

@tiesselune 나는 이것을 프로젝트에 가져와야 했으므로 계속 진행하고 코드를 v93으로 이식했습니다. https://github.com/ErikBehar/three.js/tree/selectiveLights 참조

당신이 원한다면 내가 PR을 할 수 있습니까? @mrdoob

@ErikBehar 글쎄, 내가 목표로 한 것처럼 보이지만 완전히 할 시간이 없었습니다. 필터링/해시 기능을 WebGLRenderer에서 옮기고 WebGLLights 상태 개체에 추가했을 것이라고 생각합니다. 레이어 시스템은 렌더러의 일부가 아니라 상태의 일부인 것처럼 이제 거기에 속하는 것 같습니다.

@ErikBehar 홍보 효과가 좋습니다!

@tiesselune 당신이 제안한대로 이동을 조사하거나 내 포크에 PR을 자유롭게 푸시 lol = ] 곧 PR을 게시 하겠습니다 @mrdoob

이에 대한 상태는 어떻습니까? @ErikBehar의 r94dev 코드를 r94 로 병합한 다음 r97을 여기에 병합했습니다. 몇 가지 매우 간단한 충돌(버전 변경, 선택적 조명을 위한 몇 가지 변수, renderers/WebGLRenderer.js에서 해시 생성)만 있었습니다. @tiesselune PR을 넣어 가려고 했는지 알려주실 수 있다면 기꺼이 옮기고 테스트하고 PR을 드리겠습니다.

편집하다:
조금 후에: 이제 새 라이트해시로 작동하려면 약간의 작업이 필요하다는 것을 알았습니다.

@VaelynPhi 나는 그들이 @ErikBehar 의 코드를 기꺼이 수락할지 여부에 관계없이 PR을 제출하는 것이 좋다고 생각합니다. 했다

이 녀석들에게 공을 떨어뜨려서 죄송합니다 = / ... @VaelynPhi 포크/브랜치를 게시할 수 있습니까?

걱정 마; 바쁜건 이해합니다. 아아, 나는 당신이 일하고 있던 지점조차 얻을 수 없었습니다. @ErikBehar; 나는 상태를 적절한 위치로 이동하고 버그를 수정할 수 있도록 코드를 읽고 분석하기로 결정했습니다. v94에서도 작동하는 포트 상태에 도달하지 못했습니다. 아마도 @makc가 제안한 대로 업데이트하기 위해 그것을 정리하고 PR을

다음을 기반으로 PR을 추가했습니다.
https://github.com/ErikBehar/three.js/commit/ac0499b70b82bc7bb780100a8372fcdf318d1424#diff -5e43a0b5002eb2c419def3baf67d4e67
작성자 @ErikBehar
누구든지 검토와 예를 들어 줄 수 있습니까?

https://github.com/mrdoob/three.js/pull/15223

얘들아, 이거 상태가 어때? @tiesselune @ErikBehar 뭔가 도와드릴까요? 4년만에 드디어 구현하면 좋을텐데 😄💯

@flyrell 아마도 #15223에서 끝날 것 같기 때문에 이 문제를 닫을 수 있을 것 같습니다.