흥미로운!

@sunag 우리는 이런 것에 관심이 많습니다. 내가 어떻게 도움이 될 수 있습니다? 최소한 Standard에 대한 지원을 추가할 수 있습니다.

중간 노드도 입력을 받도록 상당히 임의적인 그래프를 만드는 데 관심이 있습니다. 따라서 다음과 같은 그래프를 가질 수 있습니다.

텍스처(tex1, uv1)
B 텍스처(tex2, uv2)
C 혼합(A,B, 모드)
D 노이즈(param1, param2)
E 블렌드(C,D, 모드)

그런 다음 최종 노드 E를 머티리얼에 대한 입력으로 사용합니다.

따라서 텍스처에만 국한되지 않고 매우 임의적입니다.

내 목표는 다음 몇 주 안에 이것을 만드는 데 도움이 되는 것입니다. 가능하면 다음 주에 귀하와 협력할 수 있기를 바랍니다. https://github.com/mrdoob/three.js/issues/7339 의 셰이더그래프 라이브러리를 통해 이 작업을 수행하려고 했지만 ThreeJS 내에서 직접 생성하고 있습니다. 유연하고 작동하는 솔루션이라면 어떤 솔루션이든 좋습니다.

나는 당신의 코드를 읽고 있는데, 그것은 아주 멋지게 디자인되었습니다. 초기 피드백이 있습니다. 귀하의 코드를 기반으로 공동 작업을 시작하여 PR을 시작할 수 있습니까?

(1) 자료가 참조를 해결하도록 하고 싶습니다. 기본적으로 참조는 자료에 해결을 요청하는 이름을 가지며 자료는 해당 데이터에 액세스하는 방법에 대한 코드의 일부를 반환합니다. 이것은 또한 머티리얼이 어떤 변수(균일/가변)가 노드에 사용되는지 알 수 있도록 하여 적절하게 최적화할 수 있습니다. 이것은 또한 다른 머티리얼이 참조를 다르게 해석하도록 하여 특히 프래그먼트와 버텍스 구현 사이에 차이가 있을 때 머티리얼이 사물을 구현하는 방법을 알 필요 없이 노드를 더 이식성 있게 만듭니다.

(2) 조명 리팩터링에서 만든 GeometryContext 개체를 사용하려고 하면 필요한 많은 로컬 변수에 일관되게 액세스할 수 있습니다. 그러나 물론 그것은 재료 자체로 해결할 수 있습니다.

(3) UV는 재료에 의해 해결되는 또 다른 참조가 되었습니다. 그리고 NodeTexture가 실제로 노드 입력을 받아 절차적으로 생성된 UV를 허용해야 합니다.

(4) 나머지 Three.JS와 일관성을 유지하기 위해 NodeCube, NodeTextureCube를 호출합니다. 그리고 실제로 광선 투사 방법에 대한 논리를 제거합니다. 하지만 저는 표준 큐브 맵의 아이디어를 좋아합니다. 그래서 실제로 노드에 스페큘러 또는 디퓨즈에 대한 환경 쿼리를 넣지 않고 기본 퐁 머티리얼에 포함하고 쿼리에 사용되는 법선만 제어할 수 있습니다. cubemap 결과 자체(따라서 절차에 따라 결정된 색상이 될 수 있음). 그게 말이 되나요? 그래서 나는 머티리얼에 노멀 플러그 가능하고 큐브 텍스처 플러그 가능(방향 및 바이어스/로드로 쿼리 가능하고 색상을 반환함)을 가질 것입니다. 따라서 하나는 irradiance 맵에 큐브 텍스처를 제공하고 다른 하나는 specular 맵에 제공할 수 있습니다. 진정한 sampleCube를 @tschw 의 cubeToUV2 함수로 노드 교환으로 교환할 수 있습니다.

(5) NodeOp에 추가로 매개변수를 사용하여 임의의 함수를 호출할 수 있는 NodeFunction을 추가하려고 합니다(또는 어떤 방식으로 병합될 수도 있음).

(6) 장황한 NodeNormal, NodeTransform, NormalMap 등의 개별 클래스를 모두 없애고 재료에 의해 적절하게 해석되는 이름을 가진 NodeReference를 생성하는 간단한 생성자만 있으면 됩니다. NodeReference는 셰이더에서 계산된 값뿐만 아니라 유니폼, 가변성을 해결할 수 있습니다.

(7) NodeEnvironment와 NodeCube의 차이점을 이해하지 못합니다. NodeEnvironment가 불완전할 수 있다고 생각합니까?

(8) NodePhong이 NodeMaterial에서 파생되지 않은 것은 혼란스럽습니다. NodeMaterial이 ShaderMaterial에서 파생된 것을 볼 수 있지만. ShaderMaterial, GraphMaterial(또는 NodeGraphMaterial)에서 직접 파생물을 호출한 것이 더 이해가 되는지 궁금합니다. 모든 노드가 함께 그래프를 형성하고 개별 노드가 아니라 재료가 되는 그래프이기 때문입니다.

(9) 좀 더 다양한 용어를 제안하겠습니다. 루트 노드를 MaterialNode라고 하고 이 노드에서 PhongMaterialNode를 파생시킬 수 있습니다. ValueNode에서 파생된 Vector3Node, FloatNode 등이 있습니다. 반드시 일정할 필요는 없지만 값만 있습니다. 따라서 3개의 FloatNode를 Vector3Node로 파이프할 수 있습니다. 현재 10개 정도가 아닌 이 한 줄 정도 각각을 선언하는 도우미가 있을 수 있다고 생각합니다.

(10) 나는 "Node"라는 이름을 클래스 이름의 시작 부분에서 뒤로 이동할 것입니다. 왜냐하면 그것이 나머지 ThreeJS 프로젝트의 방식이기 때문입니다.

(11) 새로운 MaterialNode 클래스를 생성하고 유니폼 및 가변 목록으로 초기화됩니다. 기본적으로 이 문제를 해결하고 해결된 항목을 추적하여 필요한 기능을 추적할 수 있습니다. 따라서 파생된 PhongMaterialNode에서 특수한 경우를 해결하고 기본 클래스에 의존하여 간단한 경우(가변, 유니폼)를 수행하는 제한된 해결을 가질 수 있습니다.

(12) NodePhong과 NodePhongMaterial의 차이점이 헷갈립니다. 이때까지만 해도 둘 다 있는 줄 몰랐어요.

(13) 다음과 같은 코드가 있습니다.

THREE.NodeGLPosition.prototype = Object.create( THREE.Node.prototype );
THREE.NodeGLPosition.prototype.constructor = THREE.NodeGLPosition;

THREE.NodeGL.prototype.generate = function( material, shader ) {

그러나 이 스니펫 위에서 이미 generate 대해 NodeGL 정의했고 NodeGLPosition 대해 정의하지 않았으므로 복사-붙여넣기-편집 오류라고 생각합니다.

(14) NodeReflectUVW 및 NodeRefractVector를 제거하고 대신 참조 확인을 통해 머티리얼에서 요청할 수 있는 것으로 만듭니다. 반사 벡터를 계산하는 것은 간단합니다. 병합되지 않은 실험적인 ThreeJS 분기의 GeometryContext 에 추가했습니다.

(15) 반사와 굴절을 구현하는 방법은 재질의 색상 입력으로 사용하는 것입니다. 하나는 변수를 해결하는 간단한 방법으로 Refect, ReflectLOD 및 Refract, RefractLOD를 해결한 다음 해당 텍스처 큐브(절차 또는 samplerCube 기반)에 전달한 다음 결과 색상을 Material에 전달합니다. 그렇게 하던가요?

(16) 조명 입력에 대해 혼란스럽습니다. 일반적으로 조명을 연결할 수 있는 것이 아니라 조명 매개변수가 조명 클래스에 완전히 정의되어 있습니다. 이 추가 유연성이 필요한 것 같습니까? 당신은 그것을 어떻게 상상합니까?

@bhouston woow, 피드백 정말 감사합니다.
답변을 위해 여러 게시물이 필요합니다 :)

중간 노드도 입력을 받도록 상당히 임의적인 그래프를 만드는 데 관심이 있습니다. 따라서 다음과 같은 그래프를 가질 수 있습니다.
텍스처(tex1, uv1)
B 텍스처(tex2, uv2)
C 혼합(A,B, 모드)
D 노이즈(param1, param2)
E 블렌드(C,D, 모드)

현재 이와 같은 구문입니다. Uv1 오프셋 애니메이션 예:
NodeMaterial을 MaterialNode와 THREE.PhongMaterialNode로 바꾸는 것도 좋을 것 같습니다.

var uv2 = false;
var uv_offset = new THREE.NodeFloat(0);     
var uv = new THREE.NodeOperator( '+', new THREE.NodeUV( uv2 ), uv_offset);
var texture = new THREE.NodeTexture( imgTexture, uv );

nodematerial.color = t;

// onUpdate
uv_offset.number += .01;

귀하의 제안과 함께 순서를 반대로 하면 (모드,A,B)가 (A,B,모드)로 좋아질 것 같습니다. 리플렉스 맵, 큐브맵 등을 만드는 중입니다...

환경과 Cubemap이 불완전합니다.

현재 버그는 형식 변환기가 아직 완료되지 않았기 때문에 더 많이 발생할 수 있습니다. 이것은 벡터 변환을 담당합니다. 예를 들어 vec3에서 vec4 또는 vec4로.

https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/index.html#L365

예를 들어 혼합 "텍스처": (이 코드를 테스트하지 않았습니다)
THREE.NodeOperator와 동일하게 구현할 수 있습니다.

https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/index.html#L1105

THREE.NodeBlend = function( a, b, mode ) {

    THREE.NodeInput.call( this, 'blend' );

    this.mode = mode;
    this.a = a;
    this.b = b;

};

THREE.NodeBlend.prototype = Object.create( THREE.NodeInput.prototype );
THREE.NodeBlend.prototype.constructor = THREE.NodeBlend;

THREE.NodeBlend.prototype.generate = function( material, shader, output ) {

    var a = this.a.build( material, shader, output );
    var b = this.b.build( material, shader, output );

    switch(this.mode)
    {
        case 'multiply':

            return this.format( '(' + a + '*' + b + ')', this.a.type, output);

            break;
    }

    return a;

};

.generate()는 코드 생성기를 담당합니다. 성능 손실 없이 둘 이상의 입력에서 사용하려는 경우 계산 코드는 캐시에 저장됩니다.

그래도 최적화를 위해 포인터나 상수를 설정하지 않습니다...

컴파일은 꼭짓점 및 조각 코드에 대해 build()에서 전파하여 수행됩니다.

내가 당신을 협력자로 넣어도 될까요? 어떤 식으로든 코드를 편집하고 싶다면 저도 같이 작업하겠습니다.

내가 당신을 협력자로 넣어도 될까요? 어떤 식으로든 코드를 편집하고 싶다면 저도 같이 작업하겠습니다.

감사 해요! 변경 사항을 승인할 수 있도록 PR을 작성하겠습니다.

다양한 렌더 간에 전송할 수 있는 재사용 가능한 노드 및 재료 정의 세트를 정의하려는 내 부 프로젝트에 귀하( @mrdoob , @WestLangley 및 @tschw 포함)를 추가했습니다. 생성한 이 셰이더 그래프 시스템에 매핑할 수 있습니다.

원하지 않는 경우 액세스 권한을 부여한 저장소에주의를 기울일 필요가 없다고 생각합니다. 내가 이것 위에 구현하는 데 관심이 있는 것입니다.

(2) 조명 리팩터링에서 만든 GeometryContext 개체를 사용하려고 하면 필요한 많은 로컬 변수에 일관되게 액세스할 수 있습니다. 그러나 물론 그것은 재료 자체로 해결할 수 있습니다.

조명이 하나의 LightNode가 되었으면 합니다. 제 관심사는 이미 Three.JS용으로 개발된 코드를 활용하는 것입니다.

(3) UV는 재료에 의해 해결되는 또 다른 참조가 되었습니다. 그리고 NodeTexture가 실제로 노드 입력을 받아 절차적으로 생성된 UV를 허용해야 합니다.

UV를 vec2로 바꿀 수 있습니까?

(5) NodeOp에 추가로 매개변수를 사용하여 임의의 함수를 호출할 수 있는 NodeFunction을 추가하려고 합니다(또는 어떤 방식으로 병합될 수도 있음).

이것은 좋을 것입니다. 주로 BlendNode용.

(6) 장황한 NodeNormal, NodeTransform, NormalMap 등의 개별 클래스를 모두 없애고 재료에 의해 적절하게 해석되는 이름을 가진 NodeReference를 생성하는 간단한 생성자만 있으면 됩니다. NodeReference는 셰이더에서 계산된 값뿐만 아니라 유니폼, 가변성을 해결할 수 있습니다.

이러한 생각에서 MaterialNode는 Phong 및 Physical 재질의 기반이 될 수 있다고 생각합니다.

(7) NodeEnvironment와 NodeCube의 차이점을 이해하지 못합니다. NodeEnvironment가 불완전할 수 있다고 생각합니까?

나는 아직도 이 노드를 완성할 수 없다.

(8) NodePhong이 NodeMaterial에서 파생되지 않은 것은 혼란스럽습니다. NodeMaterial이 ShaderMaterial에서 파생된 것을 볼 수 있지만. ShaderMaterial, GraphMaterial(또는 NodeGraphMaterial)에서 직접 파생물을 호출한 것이 더 이해가 되는지 궁금합니다. 모든 노드가 함께 그래프를 형성하고 개별 노드가 아니라 재료가 되는 그래프이기 때문입니다.

NodeMaterial은 루트 노드 머티리얼이 될 것이며, 꼭짓점과 프래그먼트를 위한 노드를 사용해야 합니다. NodePhong은 hibrid이고 NodePhongMaterial은 프록시 클래스일 뿐입니다. 그런 다음 병합할 수 있습니다.

(9) 좀 더 다양한 용어를 제안하겠습니다. 루트 노드를 MaterialNode라고 하고 이 노드에서 PhongMaterialNode를 파생시킬 수 있습니다. ValueNode에서 파생된 Vector3Node, FloatNode 등이 있습니다. 반드시 일정할 필요는 없지만 값만 있습니다. 따라서 3개의 FloatNode를 Vector3Node로 파이프할 수 있습니다. 현재 10개 정도가 아닌 이 한 줄 정도 각각을 선언하는 도우미가 있을 수 있다고 생각합니다.

잘 들린다.

(16) 조명 입력에 대해 혼란스럽습니다. 일반적으로 조명을 연결할 수 있는 것이 아니라 조명 매개변수가 조명 클래스에 완전히 정의되어 있습니다. 이 추가 유연성이 필요한 것 같습니까? 당신은 그것을 어떻게 상상합니까?

이것은 라이트맵 또는 가능한 LightNode에 대한 것입니다.

이것은 라이트맵 또는 가능한 LightNode에 대한 것입니다.

나는 플러그인 가능한 라이트맵의 아이디어를 좋아합니다. 왜냐하면 그것에 대한 UV를 명시적으로 정의할 수 있기 때문입니다. :)

@bhouston 오늘 이 파일에서 몇 가지 수정 사항을 수정했습니다. 하지만 여전히 할 일이 많습니다.
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/three.node.js

이것은 내가 만들고 있는 놀이터입니다. 예술: 텍스처와 버튼은 드래그 앤 드롭이며 크롬에서만 작동합니다.

http://sea3d.poonya.com/flow/

놀라운, 물건! 이런 세상에! 그것은 아름다운.

나도 기여할 수 있는 방식으로 코드를 공유할 수 있습니까? 공공 PR이나 뭔가요?

여기서 Sea3D 프로젝트를 진행하고 계시죠?

https://github.com/sunag/sea3d/tree/gh-pages/Labs/Three.JS-NodeMaterial

그래서 그냥 포크하고 기여를 시작할 수 있습니까? PR을 수락하시겠습니까? 어떻게 하면 효과적으로 협업할 수 있습니까?

나는 묻지 않았지만 @mrdoob은 아마도 (?) ThreeJS 프로젝트 자체에서 이것을 갖고 싶어할 것입니다.

분명히!

그래서 그냥 포크하고 기여를 시작할 수 있습니까? PR을 수락하시겠습니까? 어떻게 하면 효과적으로 협업할 수 있습니까?

물론 당신의 도움이 굉장할 것이라고 생각합니다. 나는 또한 당신이 제안한 대로 포화, 노이즈와 같은 다른 노드 유형을 가져와야 합니다.

여기서 Sea3D 프로젝트를 진행하고 계시죠?

예를 들어 Three.JS에 대한 PR을 만들 때 이 모든 것이 정의된다고 생각합니다.

@mrdoob 재료 이름, THREE.MaterialNode 또는 THREE.NodeMaterial에 대해 어떻게 생각하십니까?

일종의 머티리얼이므로 THREE.NodeMaterial 이어야 합니다.

위로. 나는 PR에 가깝다고 생각합니까?
https://github.com/sunag/sea3d/commit/55cf70aea38b2b72110abf96f7b96924dad81c54

테스트를 위해 이 큐브맵을 플레이그라운드 및 기타 텍스처로 드래그하십시오.
https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/skyboxsun25degtest.png

http://sea3d.poonya.com/flow/

림 셰이더 예제

영역 반사 예

너무 멋져요 @sunag!

@buston 감사합니다! R74로 변환하는 것이 어려울 것이라고 생각하십니까?

매우 인상적인 작품입니다! 셰이더포지가 생각

지금까지 아주 잘했습니다!

@sunag 약간의 작업이 될 것입니다. 하지만 도움이 되고 싶습니다. R74 셰이더 코드의 큰 구조적 변경 사항은 대부분 제 잘못입니다. :)

@GGAlanSmithee 또한 UE4가 가지고 있는 것과 매우 유사합니다: https://docs.unrealengine.com/latest/INT/Engine/Rendering/Materials/ExpressionReference/index.html

아름다운 남자와 함께 노는 재미: Blender3D 노드 편집기에 영감을 줄 수 있습니다. 블렌더의 노드 시스템을 통해 PBR에 대한 훌륭한 비디오가 있으며 처음부터 PBR을 만드는 데 가장 유용한 노드는 무엇입니까?

https://www.youtube.com/playlist?list=PLlH00768JwqG4__RRtKACofTztc0Owys8

약간의 작업이 필요하지만 R74 셰이더 코드의 큰 구조적 변경 사항은 대부분 제 잘못입니다. :)

@buston 와우. 새로운 r74 변경으로 훨씬 더 깨끗해졌습니다. StandardMaterial이 아직 누락된 첫 번째 부분을 완료했습니다. 내가 여기에 게시하는 모든 문제 :) 감사합니다
https://github.com/sunag/sea3d/commit/d544ad7993272348f8bbea2337cdceb52159a6a8

우리가 아직 놓치고 있는 또 다른 것은 굴절입니다. 저는 기본적으로 Cubemap RTT 대신 렌더링 버퍼를 사용하는 것을 정말 좋아합니다. 훨씬 더 효율적일 것입니다.

@GGAlanSmithee 저는 ShaderFX에 대해 제가 열렬한 팬이라고 언급한 부분이 있습니다. Shader Forge와 UE4도 훌륭한 참고 자료입니다.감사합니다!

@richardanaya 놀라운 동영상. 감사합니다!

@mrdoob 이 파일을 어떤 폴더에 넣는 것이 좋습니까? three.js 루트( src/materials/node ) 또는 예제에서 ?
https://github.com/sunag/sea3d/tree/gh-pages/Labs/Three.JS-NodeMaterial/node

나는 이것을 "Material Graph"라고 부르거나 역된 ThreeJS 스타일인 "GraphMaterial"이라고 부를 것을 권장합니다. 또는 "노드"라는 용어를 고집한다면 "NodeBasedMaterial"이라고 부를 것입니다. 이 두 이름은 머티리얼 이 노드 자체가 아니라 노드를

나는 이것을 "Material Graph"라고 부르거나 역된 ThreeJS 스타일인 "GraphMaterial"이라고 부를 것을 권장합니다. 또는 "노드"라는 용어를 고집한다면 "NodeBasedMaterial"이라고 부를 것입니다. 이 두 이름은 머티리얼이 노드 자체가 아니라 노드를 포함한다는 것을 분명히 합니다.

저에게는 둘 다 좋아 보입니다. 나는 @mrdoob 에게 결정을

BTW @sunag 가능하면 굴절을 위해 큐브맵을 사용하는 것이 더 쉽고 정확합니다. 거의 모든 사람들이 그렇게 하고 있으며 정확한 반사를 위해서는 RTT 자료도 필요하다고 생각합니다. 128^2 또는 256^2에서 빠른 렌더링이 필요하다고 생각합니다.

BTW @sunag 가능하면 굴절을 위해 큐브맵을 사용하는 것이 더 쉽고 정확합니다. 거의 모든 사람들이 그렇게 하고 있으며 정확한 반사를 위해서는 RTT 자료도 필요하다고 생각합니다. 128^2 또는 256^2에서 빠른 렌더링이 필요하다고 생각합니다.

예, 둘 다 허용할 수 있습니다. 성능 x 정확도 간의 토론이 될 것입니다. 여전히 평면 굴절(유리, 물)의 경우 CubeMap 대신 버퍼를 권장합니다(대부분의 경우).

NodeStandard를 분석하려면 CubeMap을 드래그해야 합니다.
https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/skyboxsun25degtest.png
http://sea3d.poonya.com/flow/

원천:
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/node/NodeStandard.js

@mrdoob 이 파일을 어떤 폴더에 넣는 것이 좋습니까? three.js 루트( src/materials/node ) 또는 예제에서 ?

나는 그것을 시작하기 위해 예제에 넣을 것입니다. 잘 정의되면 나중에 src로 이동할 수 있습니다 😊

나는 이것을 "Material Graph"라고 부르거나 역된 ThreeJS 스타일인 "GraphMaterial"이라고 부를 것을 권장합니다. 또는 "노드"라는 용어를 고집한다면 "NodeBasedMaterial"이라고 부를 것입니다.

저에게는 둘 다 좋아 보입니다. 나는 @mrdoob 에게 결정을

나는 이미 NodeMaterial 를 좋아합니다... 아마도 NodesMaterial ? NodeGraphMaterial ? @WestLangley 제안 사항이 있습니까?

나는 현재 노드의 이름을 바꾸겠지만... NodeColor , NodeFloat , NodeTexture , ... to ColorNode , FloatNode , TextureNode

http://sea3d.poonya.dev/flow/

😐 로딩이 안되네요.

나는 그것을 시작하기 위해 예제에 넣을 것입니다. 잘 정의되면 나중에 src :blush로 이동할 수 있습니다.

@mrdoob 잘 될 것입니다.

나는 현재 노드의 이름을 바꿀 것입니다 ... NodeColor, NodeFloat, NodeTexture, ... ColorNode, FloatNode, TextureNode

그때 전달하겠습니다.

이것은 로컬 url :blush: 입니다. 다음을 시도하십시오.
http://sea3d.poonya.com/flow/

@WestLangley 제안 사항이 있습니까?

THREE.FlowMaterial 제안합니다.

두 번째 선택은 THREE.CustomMaterial 입니다.

완전히 무작위 방관자로서. NodeMaterial은 Blender3D에서 그렇게 부르기 때문에 매우 직관적으로 들립니다.

@mrdoob 이 계속 사용할 수 있습니다. :)

NodeMaterial 그럼 😁

이 프로젝트는 굉장합니다! 방금 Twitter에서 데모를 보았는데 매우 인상적입니다.

노드가 쓰리 코어에 들어가는 것이어야 하는지 궁금합니다. 그들은 매우 구체적인 구현입니다. 저도 ShaderFrog.com용 Three.js 셰이더 그래프 편집기(아직 출시되지 않음)를 구축 중이며 GLSL 코드와 균일한 이름과 같은 필요한 모든 메타데이터를 작은 JSON 파일로 내보내고 로드하는 것이 해결책입니다. 외부 런타임 라이브러리 사용

이 그래프 편집기는 소스 코드를 분석하여 전체 셰이더와 함께 작동할 수 있습니다. 즉, 특정 셰이더 노드 유형이 필요하지 않습니다. 이 NodeMaterial 유형이 Three의 코어 외부에서도 완전히 처리될 수 있습니까? 실제로 출력해야 하는 것은 누군가가 자신의 프로젝트에서 사용할 수 있도록 RawShaderMaterial 입니다.

이 NodeMaterial 유형이 Three의 코어 외부에서도 완전히 처리될 수 있습니까? 누군가가 자신의 프로젝트에서 사용할 수 있도록 RawShaderMaterial만 출력하면 됩니다.

@DelvarWorld 안녕하세요. 이론상으로는 그렇습니다. 그러나 원시에서 좋은 셰이더를 만드는 것은 매우 이릅니다. 당시에는 초기 인터페이스가 더 좋습니다. 또한 Three.JS의 Skin/Morph 및 기타 기본 구성 요소와의 호환성을 유지하는 데 도움이 됩니다.

나는 사소한 문제를 언급하려고 생각했습니다.
"Flow"에서 노드를 서로 위로 끌 때 커넥터가 최상위 수준으로 팝업되지 않습니다.
아마도 이 문제는 레이어나 무언가를 기다리고 있을 것입니다.

두 접근 방식을 통합할 수 있는 방법이 있는지 궁금합니다. 저는 다중 레이어 셰이더에 관심이 있으며 이를 위해서는 최종 결과에 기여하는 여러 BSDF가 필요합니다. 이것은 셰이딩 모델을 더 분리해야 함을 의미합니다. 지금은 @sunag 의 현재 디자인에서 매우 밀접하게 결합되어 있습니다. Standard 또는 Phong 재질을 지정할 필요가 없는 방향으로 나아가야 한다고 생각 합니다. 시일 수 있습니다. 그래도 점진적으로 이동할 수 있다고 생각하므로 @sunag 가 가진 것은 좋은 시작입니다.

이것은 구체화된 답변이 아니지만 얼마 전에 나는 균일한 이름, 유형, Three.js의 유형 등과 같은 메타데이터를 포함하는 이식 가능한 셰이더 형식에 대한 대략적인 제안을 만들었습니다. https://github.com /DelvarWorld/ShaderFrog-Runtime/blob/master/THREE_SHADER_FORMAT.md

실제 환경에서 실행해야 하는 모든 셰이더는 원시 셰이더 소스 코드(GPU가 컴파일하기 때문에)와 편의를 위해 사용자가 어떤 값으로 설정할 수 있는 유니폼입니다. 이 대략적인 제안에는 프로그래밍 방식으로 셰이더를 구축한다는 개념이 포함되어 있지 않으며 GLSL 및 메타데이터에 대한 간단한 전달일 뿐입니다. 결국 RawShaderMaterial 에 넣어야 하기 때문에 Three.js와 호환됩니다.

현재 Three.js에서 셰이더를 이식 가능하게 만들거나 모든 응용 프로그램에서 내보낼 수 있는 방법이 없습니다. 이것이 저에게 표준을 제안하는 아이디어를 주었습니다. 외부 응용 프로그램을 구축하고 있기 때문에 두 가지 문제를 모두 해결할 수 있다고 생각합니다. 결국 미리 정해진 재료를 뱉어내는 것. 또한 그래프의 특정 조합을 컴파일하는 구현 세부 사항은 Three.js가 아닌 응용 프로그램에 달려 있음을 의미합니다.

이 제안된 셰이더 표준이 Three에 자리를 잡았습니까? 나는 아무 생각이 없다. Three는 자체 셰이더를 자체 방식으로 구축하기 때문에 지금 당장은 Three의 코어보다 나에게 더 유용할 것입니다.

@DelvarWorld 저는 표준화된 쉐이더 그래프 노드 세트를 만드는 방법으로 이 프로젝트를 시작했습니다.

https://github.com/OpenMaterialGraph/OpenMaterialGraph

노드 사양은 다음과 같습니다.

https://github.com/OpenMaterialGraph/OpenMaterialGraph/tree/master/spec/nodes

미니멀리스트 BSDF 사양은 다음과 같습니다.

https://github.com/OpenMaterialGraph/OpenMaterialGraph/tree/master/spec/bsdfs

이것은 물리적 기반 렌더링을 지향합니다.

제 느낌은 Raw 셰이더보다 높은 수준이지만 Phong 셰이더보다 낮은 수준인 ThreeJS용 셰이더의 셸이 필요하다는 것입니다. 기본적으로 기본 셰이더는 모프 타겟, 뼈대 등을 수행할 수 있습니다. 그런 다음 이러한 모든 특정 조명 구성표 셰이더(Basic, Lambert, Phong, Standard)가 해당 템플릿을 사용합니다. 지금은 묵시적 ​​템플릿 셰이더가 있습니다(각 셰이더에 동일한 내용을 포함합니다) -- 하지만 우리가 어디에 연결해야 하는지 더 명확하게 만들 수 있다고 생각합니다. 조명 구성표(퐁, 램버트, 기본 또는 다중 레이어)를 연결할 수 있고 일반 노드인 조명 구성표에 속성을 연결할 수 있습니다.

@bhouston 오 멋지네요. 중복되는 요구 사항이 많은 것 같습니다. 기본 값, 표시 이름, 사람이 읽을 수 있는 설명 등 당신이 제안한 것과 같은 형식을 더하십시오.

형식 셰이더 형식은 많은 의미가 있습니다. 하지만 lib와 함께 살아야 하므로 더 쉽게 발전할 수 있습니다. three.js를 처음 접하는 사람에게 그런 것이 이미 존재하지 않는 특별한 이유가 있습니까? 다른 것이 아니라면 편집자에게 흥미로울 것입니다.

*편집 아마 three.js에 사양이 있으면 다른 렌더링 파이프에서 사용하려는 경우 목적을 달성하지 못할 것입니다.

Three는 자체 셰이더를 자체 방식으로 구축하기 때문에 지금 당장은 Three의 코어보다 나에게 더 유용할 것입니다.

NodeMaterial(*Flow)이 시각적 언어인 경우 THREE.NodeGL.prototype.generate 내에서 수정하면 다른 언어로 동일한 재질을 생성할 수 있습니다. NodeBuilder는 이에 대한 문이 될 수 있습니다. 현재 노드 간의 데이터 중개자입니다.

NodeMaterial "raw"의 예를 정리했습니다. 여전히 여러 버그를 생성할 수 있습니다.
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/index.html#L179
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/node/NodeMaterial.js#L9

입자가 루트 노드를 생성하여 이것을 발전시키는 것이라고 생각합니다. NodePass for Multi-Pass 및 NodeMaterialD PR 후 며칠 안에 어떻게 해야 하나요?

런타임 셰이더 대신 THREE.ShaderFrogLoader를 제안했습니다.

"Flow"에서 노드를 서로 위로 끌 때 커넥터가 최상위 수준으로 팝업되지 않습니다.

@MasterJames 감사합니다! 나는 그것을보고 거 야.

:+1:

예제를 만들기 시작했습니다. 이번주 마무리 하시길 바랍니다. :땀_미소:
http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

생각?

@수낙 +1 :- )

+1!

정말 대단합니다. 나는 흐린 변위보다는 식물 + 벽 텍스처를 기본값으로 사용합니다. :) 그것은 단지 아름답습니다.

나는 흐린 변위보다는 식물 + 벽 텍스처를 기본값으로 사용합니다.

'레이어' 예를 참조하십니까? 그러나 나는 우리를 위해 더 많은 예를 게시 할 것입니다

GPU 소프트 바디

다른 접근 방식과의 비교를 위해 Shader Frog 그래프 편집기가 이제 작동 중이며 "타이어 걷어차기" 단계에 있습니다. Three.js 코어를 변경할 필요가 없다는 점을 강조하고 싶습니다.

ShaderFrog는 현재 기존 노드 편집기보다 더 강력합니다. 모든 셰이더를 구문 분석하고 이해할 수 있기 때문에 작업할 무한 노드 유형이 있습니다. 예를 들어 오브젝트의 가장자리에만 반사를 적용하려면 조각 및 정점 셰이더가 있는 완전히 독립형 셰이더인 글로우 셰이더를 사용하면 됩니다.

... 반사 셰이더로 곱합니다 ...

...셰이더 그래프 사용...

그리고 타다! 반사 림 셰이더 .

예를 들어 다른 셰이더 등을

이 프로세스에 필요한 유일한 "노드 유형"은 GLSL과 거의 완전히 독립적인 다중 노드(ShaderFrog에 다른 노드가 있음)입니다. ShaderFrog는 모든 셰이더와 함께 작동할 수 있으므로 노드 유형이 무한합니다. 이 고급 기술 접근 ​​방식을 사용하면 Three.js 변경 사항과 관계없이 이러한 조작이 가능합니다.

ShaderFrog는 무료로 Three.js에 대한 최고 수준의 내보내기 지원을 제공합니다. Three.js 소스 코드를 수정하지 않고 모두 가능합니다. Sea3D는 ShaderFrog와 같은 타사 제품입니다. 타사 제품 메커니즘을 Three의 핵심에 넣는 것은 불공정한 이점처럼 보이며 정치적으로 이해할 수 없습니다.

@DelvarWorld 저는 노드 기반 셰이더 구성 추상화를 타사 특정 기술로 보지 않습니다. 어쨌든 더 많은 경쟁자가 노드 기반 셰이더 기술에 참여하고 서로의 작업에서 더 많은 이점(더 많은 노드, 최적화된 구성 등)의 이점을 모두 누릴 수 있습니다.

낮은 수준은 아니지만 높은 수준(Blender 3D와 같은 도구)에서 셰이더를 이해하는 저와 같은 그래픽 프로그래머로서 노드 기반 추상화는 3D 모델링 지식을 사용하여 셰이더와 프로그래밍 방식으로 상호 작용할 수 있는 좋은 방법인 것 같습니다. 예를 들어 PBR에 대한 노드 설정을 이해하지만 GLSL로 작성하려는 경우 신의 도움이 필요합니다.

@DelvarWorld 어메이징. 나는 새로운 편집자를 사랑한다.

@DelvarWorld +1 아주 좋아요! : - )

감사 해요! :)

노드 기반 셰이더 구성 추상화를 타사 특정 기술로 보지 않습니다.

예를 들어 PBR에 대한 노드 설정을 이해합니다.

여기 내 반대 예의 일부는 Three.js와 상관없이 이 두 가지를 모두 무료로 얻을 수 있다는 것입니다. 모든 ShaderFrog 셰이더는 오픈 소스이므로 PBR 구현의 일부가 되는 모든 노드는 시간이 지남에 따라 학습, 편집 및 개선될 수 있습니다(또한 Three.js 코어의 일부 하위 집합이 아닌 다른 셰이더로 구성됨). 나에게 이 모든 것이 세 가지 변경 없이 수행될 수 있다는 사실은 그것이 불필요하다는 것을 의미하며, Three.js가 webgl 래퍼 API인 것과 이제 구현 특정 기능을 구동하는 것 사이의 경계를 흐리게 합니다. 셰이더 노드 데이터를 저장하는 것은 앱에 따라 매우 다르며 내가 아는 한 현재 어떤 소프트웨어에 대한 공통 노드 편집기 표준 형식이 없습니까? 하나를 적용하면 다른 구현에 해로울 수 있습니다.

@DelvarWorld 이 변경 사항을 이해하는 한 ShaderFrog는 여전히 작동할 수 있으며 원하는 경우 계속 GraphMaterial을 능가할 수 있습니다. GraphMaterial의 예제 소스 코드를 보고 타사 솔루션/에디터에 대해 생각할 필요 없이 작동 방식의 단순성을 이해할 수 있었습니다. 그래픽 개발자로서 저는 빠르게 감동을 주는 재료를 프로그래밍 방식으로 만드는 방법에 대해 고민하고 있으며 이것이 ThreeJS의 적절한 관심사라고 생각합니다.

NodeMaterial과 Flow는 두 가지 다른 초점을 가지고 있다고 생각합니다. Flow와 ShaderFrog는 둘 다 현재 비공개 소스에 있는 타사 솔루션입니다. (주로 아티스트는 이에 대해 생각합니다.) otherside NodeMaterial은 Three.JS를 사용하는 프로그래머를 위한 오픈 소스 셰이더 편집기입니다. ShaderFrog가 원하는 경우 NodeMaterial을 넘어설 수 있다는 점에서 @richardanaya 에 동의합니다. Flow가 단순히 머티리얼 에디터일 필요는 없다고 생각합니다. 앞으로도 평소처럼 ShaderFrog가 크게 개선되기를 진심으로 바랍니다.

wip: 가성 보로노이
http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

@sunag 오늘 밤 소스 코드를

• 하루빨리 PR을 보고 싶습니다. 내가 도움이 될 수 있습니다. :)
• 표준 속성(uv, uv2, normal, position 등)이 아닌 임의의 속성을 허용하는 것이 멋질 수 있습니다. 많은 셰이더가 접선 vec4, 2개 이상의 uv 및 여러 색상의 이점을 얻을 수 있다는 것을 알고 있습니다. 속성. 따라서 나는 needsPosition을 요청된 속성 배열 등으로 일반화할 것입니다.
• 기본 NodeMaterial, BRDF(Phong, Standard 등), 텍스처 노드(NodeCubeTexture, NodeTexture), 접근자(?) 노드(NodePosition, NodeNormal), 수학 노드(NodeOperator 등)로 노드를 구성하는 것이 좋습니다. ), 유틸리티 노드(NodeSwitch, ...), 추가(?)(NodeVelocity, ...) 많은 도움이 될 것 같습니다.
• Projection, View 및 World 행렬에 대한 행렬 접근자가 있으면 좋을 것입니다.
• 다음 연산자 중 일부가 누락되었습니다. % ^ & << >> ~ |
• 클래스가 너무 작을 때 NodePhongMaterial에서 값을 볼 수 있는지 확실하지 않습니다. 사용자가 NodeMaterial과 결합된 NodePhong 노드를 사용하여 생성해야 할 것입니다(나는 여전히 그 이름이 마음에 들지 않지만 GraphMaterial은 많이 느낍니다. 나에게 더 많은 자연, 그러나 나는 그것과 함께 살 수 있습니다.)
• 나는 NodeTimer -> NodeTime...이라고 부르고 싶지만 다시 개인 취향입니다.
• NodeMath#, NodeOperator에서 했던 것처럼 많은 변수 노드를 하나로 결합하는 방법이 있는지 궁금합니다. NodeViewPosition, NodeWorldPosition, NodeViewNormal, NodeTransformedNormal, NodeTransformedPosition, NodeProjectPosition...
• NodeMath#, NodeOperator에 대한 선택적 인수 집합이 목록이 될 수 있는 형식으로 되어 드롭다운 상자를 쉽게 채울 수 있기를 바랍니다. 지금은 클래스에 대문자로 표시된 멤버이기 때문에 식별하기가 조금 더 어렵습니다. 코딩에 여전히 편리한 좋은 솔루션이 있는지 확신할 수 없습니다. 클래스의 구성원으로 정의한 후 목록으로 수집할 수 있으므로 해당 목록을 추가하시겠습니까?
• NodeTransformedNormal, NodeTransformedPosition은 코드를 보지 않고는 무엇인지 파악하기 어렵습니다. 그들은 세계 공간, 보기 공간, 객체 공간에 있습니까? "변환된"은 행렬을 곱한 것을 의미하는 매우 일반적인 용어입니다. 이제 코드를 살펴보겠습니다....
• NodeUV 및 NodeColor가 각각 2 및 1 채널로 제한되지 않고 인덱스를 사용하도록 허용합니다. 다시 한번 저는 이것들이 일반화되는 것을 보고 싶습니다. 실제로 특정 채널 세트에 하드 코딩되는 대신 문자열이나 여러 사전 설정 중 하나를 전달합니다. 일부 변수에는 여전히 전용 코드 경로가 있을 수 있지만 특수한 경우 처리를 위해 인식하지 못하는 이름에 대해서는 일반 경로로 대체됩니다.

추가 피드백:

• 하나 이상의 BRDF, 기본적으로 두 개의 Standard BRDF가 있는 그래프를 만들고 그 사이에서 에너지 보존을 수행하고 싶습니다. PR을 받으면 이 기능을 추가하고 싶습니다. 그것은 시스템을 더 일반적이고 더 강력하게 만들 것입니다.

@buston 와우! 감사합니다!

요청 속성, 폴더 구성, NodeTime, NodePosition, NodeNormal, NodeView가 수정되었습니다. +3 예제도 추가했습니다.

연산자와 행렬에서 integer 및 matrix 변환과의 호환성을 추가해야 합니다. 이를 위해 float / vectors#에서와 같이 자동으로 수행됩니다. 다음 업데이트를 위한 작업이 충분합니다.. :sweat_smile:

내일은 홍보를 하겠습니다. 나는 아직 몇 가지를 검토해야합니다.

@수낙 :

나는 이것이 버그라고 생각합니다.

addGui( 'metalnessA', roughnessA.number, function( val ) {

                        roughnessA.number = val;

                    }, false, 0, 1 );

나는 이것이 버그라고 생각합니다.

감사 해요!

방금 예제 페이지로 이동하여 PBR 노드 그래프 <3

<3
마지막 개정판의 변경 사항
https://github.com/sunag/sea3d/commit/a2e3813b53902331e91dbc0f6bae0136a384ad0c

NodeMaterial 버전 4 + NodePass

http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_postprocessing_nodes.html

멋지다!

후처리를 위해 노드를 사용하는 것을 제안하려고 했지만 첫 번째 부분이 완료되기를 기다리고 있었습니다. 젠장, 아름다워!

NodeMaterial 버전 5 + LightNode

http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

피부

툰 쉐이딩

++ color-adjustment 및 plush 예.

니이스!

subsurface scattering :땀_미소:

이것은 향후 업데이트에서 작동할 수 있는 일종의 셰이더입니다.

http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

😮!

멋진 NodeMaterial에 감사드립니다!

몇 가지 의견/버그가 있습니다.

• 후행 공백은 함수 노드를 끊습니다.

var n1 = new THREE.FunctionNode(" float mul_2_float(float x) { return x*2.0; }"); // problem
var n2 = new THREE.FunctionNode("float mul_2_float(float x) { return x*2.0; }"); // ok

• 함수 노드의 int 매개변수 문제

float 매개변수가 있는 작업 예:

var floatFuncNode= new THREE.FunctionNode("float mul_2_float(float x) { return x*2.0; }");

var funcCallNode = new THREE.FunctionCallNode(floatFuncNode);
funcCallNode.inputs.x = new THREE.FloatNode(0.2);

var colorResNode = new THREE.OperatorNode(new THREE.ColorNode(0x00ff00),
    funcCallNode, THREE.OperatorNode.MUL);

var mat = new THREE.PhongNodeMaterial();
mat.color = colorResNode;

int 매개변수가 있는 깨진 예:

var intFuncNode= new THREE.FunctionNode("float mul_2_int(int x) { return float(x)*2.0; }");

var funcCallNode = new THREE.FunctionCallNode(intFuncNode);
funcCallNode.inputs.x = new THREE.IntNode(1);

var colorResNode = new THREE.OperatorNode(new THREE.ColorNode(0x00ff00),
    funcCallNode, THREE.OperatorNode.MUL);

var mat = new THREE.PhongNodeMaterial();
mat.color = colorResNode;

• 제안: FunctionCallNode 생성자에서 함수 매개변수 전달

//current:
var funcCallNode = new THREE.FunctionCallNode(floatFuncNode);
funcCallNode.inputs.param1 = new THREE.FloatNode(1);
funcCallNode.inputs.param2 = new THREE.ColorNode(0x0f0f0f);

// proposed:
var funcCallNode = new THREE.FunctionCallNode(floatFuncNode, 
    { param1: new THREE.FloatNode(1), param2: new THREE.ColorNode(0x0f0f0f) } );

// and, i think suitable in some cases: 
var funcCallNode = new THREE.FunctionCallNode(floatFuncNode, 
    [ new THREE.FloatNode(1), new THREE.ColorNode(0x0f0f0f) ] );

• PhongNodeMaterial은 범프 맵과 호환됩니까?

몇 가지 추가 사항:

• "원시" NodeMaterial의 조각 셰이더에서 PositionNode.LOCAL 문제:

var material = new THREE.NodeMaterial(
        new THREE.RawNode( new THREE.PositionNode( THREE.PositionNode.PROJECTION ) ),
        new THREE.RawNode( new THREE.PositionNode( THREE.PositionNode.LOCAL ) )
    );

결과 셰이더:

varying vec3 vPosition;
void main(){
gl_Position = (projectionMatrix * modelViewMatrix * vec4( position, 1.0 ));
vPosition = transformed;
}

varying vec3 vPosition;
void main(){
gl_FragColor = vec4(vPosition,0.0);
}

아마도 "변환된" 기능은 Phong/Standart 노드 재료에서 NodeMaterial로 옮겨져야 합니다.

• ConstNode 사용

    var material = new THREE.NodeMaterial(
        new THREE.RawNode( 
            new THREE.OperatorNode(
                new THREE.PositionNode( THREE.PositionNode.PROJECTION ),
                new THREE.ConstNode("float TWO = 2.0;"),
                THREE.OperatorNode.MUL)
            ),
        new THREE.RawNode( new THREE.ColorNode( 0xff0000 ) )
    );

이 경우 결과 셰이더에는
gl_Position = ((projectionMatrix * modelViewMatrix * vec4( 위치, 1.0 ))*TWO);
그러나 TWO 상수는 선언되지 않았습니다. 내 실수인가 버그인가?
또한 ConstNode는 세미콜론을 구분하므로 "float TWO = 2.0"은 구문 분석되지 않습니다.

@dimarudol 감사

그러나 TWO 상수는 선언되지 않았습니다. 내 실수인가 버그인가?

나는 이 사용 방법과 예를 들어 material.include( node ) 대해 고려할 것입니다.

당시 전역 상수를 시도하십시오.

var TWO = new THREE.ConstNode("float TWO = 2.0;");
THREE.NodeLib.add( TWO ); // global

 var material = new THREE.NodeMaterial(
        new THREE.RawNode( 
            new THREE.OperatorNode(
                new THREE.PositionNode( THREE.PositionNode.PROJECTION ),
                TWO,
                THREE.OperatorNode.MUL)
            ),
        new THREE.RawNode( new THREE.ColorNode( 0xff0000 ) )
    );

@sunag 안녕하세요, 저는 Sea3d Flow를 가지고 놀았는데 꽤 멋져 보입니다. 어딘가에 공식 저장소가 있는지 묻고 싶었습니다.
문안 인사.

안녕하세요 @rraallvv , 아직 아닙니다. 이미 준비가 완료되었습니다. 최대한 빨리 소식을 올립니다.

@sunag 감사

안녕하세요 @sunag입니다 ! 정말 잘했어!
질문이 있습니다. 내 프로젝트의 경우 노드 구조를 사용하는 것이 좋지만 정점 색상당(및 정점 부동 소수점 값당 사용자 정의)가 필요하지만 노드 시스템에서는 전체 메시에 colorNode 및 floatNode만 적용했습니다. .. THREE.BufferAttribute를 사용하여 bufferColorNode와 같은 것을 쉽게 구현할 수 있는 방법이 있다고 생각하십니까?

예를 들어 이 장면이 있습니다.

각 정점에는 고유한 색상이 있습니다. THREE.BufferAttribute 및 THREE.ShaderMaterial을 사용하면 가능하지만 코드에는 이에 상응하는 것이 없습니다.

나는 다음과 같은 것이 필요합니다.
`소재 = new THREE.StandardNodeMaterial();
let texColorMap = new THREE.TextureNode( new THREE.TextureLoader().load("colorMap.jpg"));
let customData = new THREE.BufferFloatNode(new Float32Array(...), "data"); // 두 번째 매개변수는 속성의 이름입니다.

let colorMap = new THREE.FunctionNode([
"vec3 colorMap(sampler2D texColorMap, float 데이터){",
" return vec3(texture2D(texColorMap, customFunc(data)));", // customFunc는 데이터에 따라 vec2를 반환합니다.
"}"
].조인("n"));

let colorMapCall = 새로운 THREE.FunctionCallNode(colorMap);
colorMapCall.inputs.texColorMap = texColorMap;

material.color = colorMapCall;
material.build();`

그런데 FunctionNode에 sampler2D 매개변수를 사용할 수 없는 것 같습니다...

내가 뭔가를 놓치고 있습니까?
필요한 경우 도움이 될 수 있을 것 같아요 :)

@martinRenou 감사합니다! 흠, 아마도 지금처럼:

bufferGeometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );
...
colorMapCall.inputs.data = new THREE.ColorsNode(); // send color.x to float slot

노드에 동적 지오메트리 속성을 할당하는 것은 아직 생각하지 않았습니다. 하지만 이것은 좋은 생각이라고 생각합니다... 아마도 THREE.BufferAttributeNode ...

@sunag 답변 감사합니다 :)
나는 그것을 시도합니다. 괜찮으시다면 THREE.BufferAttributeNode에서 작업을 시작하겠습니다. 지금은 여전히 ​​코드를 읽고 구조를 이해하려고 합니다.

1. THREE.FunctionNode에 관해서는 내가 말했듯이 colorMap으로 사용되는 매개변수에 sampler2D를 설정해야 합니다. 픽셀 색상은 texture2D()로 계산되고 texture2D()의 두 번째 매개변수는 내 사용자 지정 데이터를 사용하여 계산됩니다. (예를 들어 온도).
   vec3 매개변수를 사용하는 아이디어는 사용자에게 친숙하기 위한 것이지만 FunctionNode는 sampler2D 매개변수도 지원할 수 있다고 생각하지 않습니까?
2. 게다가 THREE.FunctionNode는 프래그먼트 셰이더에만 쓰지만 버텍스 셰이더에도 쓸 수 있다면 좋지 않을까요?

이것은 색상이 데이터 (온도, 압력 ...) 빨간색 -> 고온, 파란색 -> 저온에 해당하기 때문에 IsoColor라고하는 사용 사례입니다.

1. THREE.IsoColorNode(내 다이어그램의 FunctionNode를 대체함) 및 과학적 시각화에 매우 흥미로운 기타 노드를 작성할 생각입니다. 당신은 그것에 관심이 있습니까? @mrdoob 여러분도 관심이 있으신가요?

THREE.FunctionNode에 관해서는 내가 말했듯이 colorMap으로 사용되는 매개변수에 sampler2D를 설정해야 합니다. 픽셀 색상은 texture2D()로 계산되고 texture2D()의 두 번째 매개변수는 내 사용자 지정 데이터를 사용하여 계산됩니다. (예를 들어 온도). vec3 매개변수를 사용하는 아이디어는 사용자에게 친숙하기 위한 것이지만 FunctionNode는 sampler2D 매개변수도 지원할 수 있다고 생각하지 않습니까?

나는 지금 당신의 필요를 이해합니다! @dimarudol 의 이것과 다른 사람들의 메모에 대한 PR을 만들 것입니다 ...

게다가 THREE.FunctionNode는 프래그먼트 셰이더에만 쓰지만 버텍스 셰이더에도 쓸 수 있다면 좋지 않을까요?

나는 이것을 테스트하지 않았지만 그렇게 생각합니다.

두 가지 예를 더 추가했습니다.

• sampler2D 는 triangle-blur 예시에 있습니다.
• 사용자 정의 BufferAttribute 는 custom-attribute 예시에 있습니다.

그것은 작동하지만 나는 여전히 세련된 코드를 줄 것입니다 ...

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

우와 ! 정말 잘 하셨습니다. 저에게도 효과가 있습니다 :스마일:

다시 한 번 감사드립니다!

안녕하세요 @sunag ,

지금은 매개변수(색상, 알파...)로 재질에 보내야 하므로 "void" 유형의 FunctionNode를 가질 수 없습니다. 예를 들어 클립 평면 FunctionNode를 구현하려면 다음과 같이 셰이더 부분을 작성하기만 하면 됩니다.

void clipPlane(vec4 plane){
 if(dot(position, plane.xyz) > plane.w) discard;
}

그러나 그것은 재료에 그것을 줄 수 없습니다 ... 해결책은 알파 운하 인 부유물을 반환하는 것이지만 깨끗하고 최적화되지 않았습니다. 다음과 같은 재질에 일부 void 기능을 추가하는 것이 멋지다고 생각하지 않습니까?

var clipPlane = new FunctionNode([
"void clipPlane(vec 4 plane){",
" if (dot(position, plane.xyz) > plane.w) discard;",
"}"].join("\n"));
var clipPlaneCall = new FunctionCallNode(clipPlane);
clipPlaneCall.inputs.plane = myVec4Node;

var threshold = new FunctionNode([
"void threshold(float upperBound, float lowerBound, float data){",
" if(data < lowerBound) discard;",
" if(data > upperBound) discard;",
"}"].join("\n"));
var thresholdCall = new FunctionCallNode(threshold);
thresholdCall.inputs.upperBound = myFloatNode1;
thresholdCall.inputs.lowerBound = myFloatNode2;
thresholdCall.inputs.data = myAttributeNode;

var myMaterial = new StandardNodeMaterial();
myMaterial.color = ...
myMaterial.alpha = ...

// voidFunctions is not a good name I'm not inspired...
myMaterial.voidFunctions = [clipPlaneCall, thresholdCall];

좀 더 "디자인"적인 예를 들어, 이 텍스처로 찻주전자에 구멍을 만들고 싶다면:

다음과 같이 하고 싶습니다.

var holes = new FunctionNode([
"void holes(vec3 texColor){",
" if (/*texColor too much dark*/) discard;",
"}"].join("\n"));
var holesCall = new FunctionCallNode(holes);
holesCall.inputs.texColor = new TextureNode(LoadTexture("holes-text.jpg"));

var myMaterial = new StandardNodeMaterial();
myMaterial.voidFunctions = [holesCall];
myMaterial.side = THREE.DoubleSide;

또 다른 점은 셰이더에서 함수의 순서를 제어할 수 없다는 것입니다. 가환성이 아닌 함수가 있으면 결과를 제어할 수 없습니다...

이 예를 보자:

var transparencyPlane = new FunctionNode([
"float transparencyPlane(vec 4 plane){",
" if (dot(position, plane.xyz) > plane.w) return 0.5.;",
" return 1.;",
"}"].join("\n"));
var transparencyPlaneCall = new FunctionCallNode(transparencyPlane);
transparencyPlaneCall.inputs.plane = myVec4Node;

var displacement = new FunctionNode([
"vec3 displacement(vec3 vector){",
" return position + vector;",
"}"].join("\n"));
var displacementCall = new FunctionCallNode(displacement);
displacementCall.inputs.vector = myVec3Node;

var myMaterial = new StandardNodeMaterial();
myMaterial.transform = displacementCall;
myMaterial.alpha = transparencyPlaneCall;

한 점이 투명 평면 뒤에 있고 변위로 인해 벗어나면 "transparencyPlaneCall"이 "displacementCall" 전에 호출된 경우 alpha = 1., 호출된 경우 alpha = 0.5 이후에 호출됩니다.
그래서 함수 호출의 순서를 설정하고 싶습니다... 무슨 말인지 아십니까?

안녕하세요 @martinRenou

흠, 대략 void 함수는 슬롯에서 사용할 ProxyNode 수 있습니다. 이는 순서를 따르거나 코드의 시작 또는 끝에서 초기화해야 하기 때문에 functionsStart 또는 functionsEnd 슬롯...

alpha 가 0인 경우 alpha 슬롯을 사용하면 자동으로 폐기됩니다.
https://github.com/mrdoob/three.js/blob/dev/examples/js/nodes/materials/PhongNode.js#L180

그래서 함수 호출의 순서를 설정하고 싶습니다 ...

여기를 참조하십시오.
https://github.com/mrdoob/three.js/blob/dev/examples/js/nodes/materials/PhongNode.js#L122

함수 순서는 간단한 dependencies 알고리즘을 사용하여 자동으로 수행되며 FunctionCall 를 이전 슬롯에 넣어야 합니다. 예를 들어 color 는 첫 번째 specular 입니다.

이 예제는 fragment ~ transparencyPlaneCall 및 vertex ~ displacementCall 두 가지 셰이더 코드입니다.

변수( varying 및 로컬)를 사용하여 입력이 아니라 const만 확장하는 것은 매우 흥미로울 것이라고 생각하게 만듭니다. 아마도 VarNode ...

완료 r6 - https://github.com/mrdoob/three.js/pull/9636

알파가 0인 경우 알파 슬롯을 사용하면 자동으로 폐기됩니다.

죄송합니다, 그것을 보지 못했습니다.

함수 순서는 간단한 종속성 알고리즘을 사용하여 자동으로 수행되며, FunctionCall을 이전 슬롯에 넣어야 합니다. 예를 들어 색상은 첫 번째 반사광이고 두 번째입니다.

사실 저는 픽셀을 버리는 함수가 먼저 호출되었는지 확인하고 싶었습니다. 내 기능 직후에 알파를 버리면 알파를 사용하는 것이 좋을 것 같습니다.

이 예제는 두 개의 다른 셰이더 코드입니다. fragment에서 transparentPlaneCall로, 정점에서 displacementCall로.

오른쪽 ! 그래서 그것은 좋은 예가 아니었습니다. 내 실수.

완료 r6 - #9636

멋있는 ! 답변해주셔서 감사합니다.

입력이 아닌 확장을 위해 변수(가변 및 지역)를 사용하고 const만 매우 흥미로울 것이라고 생각하게 만듭니다. 아마도 VarNode...

소리도 좋습니다. 꼭짓점 셰이더에서 함수를 명시적으로 작성하고, varNode를 사용하고, 프래그먼트 셰이더의 함수와 함께 사용할 수 있다는 것도 흥미로울 수 있습니다. 당신은 생각하지 않습니다?

@수낙
정점 셰이더에서 FunctionNode와 함께 AttributeNode를 사용하는 데 문제가 있다고 생각합니다.

다음과 같은 코드가 있는 경우

var customData = new THREE.AttributeNode("data", "float");

var myFunc = new THREE.FunctionNode([
 "vec3 myFunc(float data){",
 " return vec3(data, 0., 0.);"
 "}"].join("\n"));
var myFuncCall = new THREE.FunctionCallNode(myFunc);
myFuncCall.inputs.data = customData;

material.transform = myFuncCall;

셰이더는 다음과 같은 순서로 작성됩니다.

...
varying float nVdata;
attribute float data;
...
float myFunc(float data){
 return return vec3(data, 0., 0.);
}

void main(){
...
transformed = myFunc(nVdata); // We use nVdata but it is not initialized
...
nVdata = data;
...
}

간단한 수정은 nVdata를 데이터로 초기화하는 것입니까?

소리도 좋습니다. 꼭짓점 셰이더에서 함수를 명시적으로 작성하고, varNode를 사용하고, 프래그먼트 셰이더의 함수와 함께 사용할 수 있다는 것도 흥미로울 수 있습니다. 당신은 생각하지 않습니다?

응! varying 를 VarNode 로 사용하는 버텍스/프래그먼트 셰이더와의 더 나은 커뮤니케이션이 아이디어입니다. 이것은 이제 keywords 기능과 잘 맞습니다.

최소한의 varying 예제를 작성했지만 void function 솔루션은 아직 없습니다.

정점 셰이더에서 FunctionNode와 함께 AttributeNode를 사용하는 데 문제가 있다고 생각합니다.

수정됨 - https://github.com/mrdoob/three.js/pull/9681

@sunag 님 안녕하세요, 다양한 예시를 mtl.transform 다양한 변수 를 넣는 것이 이상하게 들립니다... void 함수를 생성할 수 있게 되면 이것을 변경할 수 있을까요?
그러나 키워드가 :smiley:

사실, mtl.varyings (mtl.varyings는 배열입니다)에 이러한 변수를 넣는 것이 좋은 생각이라고 생각합니다. mtl.varyings.push(myVar) . 같은 아이디어를 사용하여 mtl.vertexFunctions.push(myVertexFunctionCall) 와 같은 방식으로 mtl.fragmentFunctions mtl.vertexFunctions.push(myVertexFunctionCall) 와 같이 정점 및 조각 셰이더에 함수를 넣을 수 있습니다.

이런 식으로 우리는 이러한 변화에 대해 많은 계산을 수행한 다음 효과에 사용할 수 있습니다. 이러한 함수는 void 함수가 됩니다.

NodeMaterialLoader https://github.com/mrdoob/three.js/pull/13070

노드가 시각적으로 연결된 위의 스크린샷에서와 같이 이 API를 사용하여 이를 정신적으로 어떻게 다시 생성합니까? 생성자가 다른 노드를 수락한다는 것을 알았습니다. 한 노드의 출력(생성자로 전달됨)이 다른 노드의 입력(생성자에서 노드 수신)이 되는 방식입니까? 노드에 최대 하나의 출력이 있습니까? 생성자를 통해 얼마나 많은 노드가 다른 노드에 대한 입력이 될 수 있습니까, 아니면 제한되어 있습니까?

@trusktr 물론 얼마나 더 많은 노드가 빌드 시간에 더 많은 CPU를 소비하고 런타임에 GPU를 소비하는지 제한되어 있습니다. 노드는 입력 및 출력 값에 따라 조정되며, 예를 들어 float 에서 vec2 또는 vec3 로의 변환은 자동이며 최적화를 위해 두 번 이상 사용하는 경우 캐시에 저장합니다. ( TempNode ).

스크린샷에서 각 노드는 클래스입니다. 예: PositionNode 표시:
https://github.com/mrdoob/three.js/blob/789efa65bafe022e178c7e93e0985a7607a54403/examples/js/nodes/accessors/PositionNode.js#L5

@mrdoob @sunag NodeMaterial 코드의 현재 상태와 이 코드가 three.js 로드맵에 어떻게 부합하는지에 대해 의견을 제시하시겠습니까?

이론적으로 다음과 같은 여러 가지에 노드를 사용할 수 있습니다.

• glTF 사양/광택 PBR 재료를 NodeStandardSGMaterial로 구현합니다.
• 맵별 UV 세트 및 변환 지원
• 인스턴싱으로 빌트인 머티리얼 사용 간소화

그러나 모든 노드 파일에 대해 GLTFLoader에 종속성을 추가하는 것을 정당화하기는 어렵습니다. 그리고 아마도 더 적극적으로 사용하지 않고 노드를 src/* 넣는 것을 정당화하기 어려울 것입니다. 닭고기/계란. 😂

NodeMaterial에 대한 장기 계획을 알고 어떤 기능이 관련이 있는지(또는 관련이 없는지) 추측하는 것이 도움이 될 것입니다... 더 많은 개발이 필요한가요? 다른 기여자가 도울 수 있는 일이 있습니까?

@sunag 네, 이 시점에서 추가 계획이 있는지 저도 알고 싶습니다.

이론적으로 다음과 같은 여러 가지에 노드를 사용할 수 있습니다.

• glTF 사양/광택 PBR 재료를 NodeStandardSGMaterial로 구현합니다.
• 맵별 UV 세트 및 변환 지원
• 인스턴싱으로 빌트인 머티리얼 사용 간소화

이러한 특정 문제에는 이제 핵심을 수정할 필요 없이 기존 API로 해결하는 방법에 대한 예가 있습니다.

인스턴스화:
https://github.com/mrdoob/three.js/pull/10750 (완전히 발전하고 코어를 건드리지만 원숭이 패치가 있을 수 있음)
https://github.com/mrdoob/three.js/pull/14166 (onBeforeCompile을 통한 간단한 재료 확장)
https://github.com/mrdoob/three.js/pull/14012 (mokey-patching을 통한 간단한 라이브러리 확장)

맵별 UV 세트
https://github.com/mrdoob/three.js/pull/14174

spec-gloss 자체 클래스
https://github.com/mrdoob/three.js/pull/14099

아마도 NodeMaterial 를 핵심으로 가져와야 하는 긴박감을 덜어주는 역할을 할 수 있습니다. :).

이 주제를 따르는 사람들을 위해 https://github.com/mrdoob/three.js/pull/14149 에서 진행 중인 토론이

#14149에서 스레드 결합:

tl;dr — NodeMaterial은 머티리얼 시스템을 위한 매우 유망한 다음 단계로 보입니다. NodeMaterial 채택이 현재 몇 가지 이유로 제한되어 있다고 생각합니다.

• 많은 개별 파일을 포함하는 마찰
• 비주얼 에디터가 부족하다
• 비교적 적은 예, 문서

NodeMaterial이 src/ 에 있어야 하는 시기/여부에 대한 질문은 @mrdoob 및 @sunag 에 남겨두 겠지만 (적어도) 위의 세 가지 문제를 해결하는 방향으로 나아가야 한다고 생각합니다. 다른 사람들이 NodeMaterial을 현재 재료 시스템의 대안으로 보고 있는지 아니면 완전한 대체품으로 보는지 아는 것도 도움이 될 것입니다.

임계량은 GLTFLoader 이해 관계자에 의해 형성되는 것으로 보이며, 내 (주관적) 관찰은 부적절하게 문서화된 onBeforeRender(몇 가지 예)와 훨씬 덜 문서화된 onBeforeCompile(한 가지 예) 때문에 필요가 발생했다는 것입니다.

@pailhead 저는 개발자이기도 한 A-Frame의 워크플로 문제를 해결하기 위해 GLTFLoader를 유지 관리하기 시작했습니다. 특정 형식을 로드하는 것이 아니라 더 유용한 재료 시스템이 목표라는 데 동의합니다. 노드 자료를 통합(또는 통합하지 않음)하는 방법을 결정하는 것은 three.js 라이브러리의 최종 사용자를 위한 장점(기능, 유연성, 이해하기 쉬운 API)을 기반으로 해야 합니다.

onBeforeCompile 및 onBeforeRender 후크가 무한히 유연하다는 것이 맞습니다. 기본 셰이더를 조작하거나 대체할 수 있는 범위에는 실질적인 제한이 없습니다. 그러나 둘 다 기본 재료 API로 유사하게 결함이 있습니다.

1. 비교적 단순한 기능에 대해서도 WebGL 구문을 Material API에 강제 적용
2. 코어 머티리얼 셰이더의 문자열 조작에 따라 달라지며, 코어 머티리얼 변경은 시간이 지남에 따라 더 어렵고 깨지기 쉽습니다.
3. 예술가들에게 덜 다가가기
4. 실질적으로 직렬화 불가능

데코레이터(예: #14206)는 확실히 사용자의 관점에서 이것을 개선합니다. 하지만 머티리얼의 향후 기능 개발이 기존 머티리얼 셰이더 위에 점점 더 복잡해지는 데코레이터를 기반으로 한다면, 제 생각에는 유지보수 가능성의 위험입니다.

노드 재료는 완벽하지 않지만 다른 그래픽 도구에서 널리 채택되며 다음과 같은 주요 이점이 있습니다.

1. 유연하고 구성 가능
2. 필요한 경우 일반 셰이더에 대한 액세스를 제거하지 않고 라이브러리의 내부 WebGL 셰이더에서 추상화 계층을 유지합니다.
3. 아티스트와 게임 개발자에게 널리 사용되는 재료 표현
4. 적어도 어느 정도 직렬화 가능(다른 형식으로의 변환은 여전히 ​​어렵지만)

이것은 아마도 onBeforeCompile 가 더 이상 사용되지 않아야 한다는 말처럼 들릴 것입니다. 그런 의도가 아닙니다. 계속 유지되는 것을 보고 기쁘게 생각하며 예제를 환영합니다. 그러나 A-Frame 또는 three.js 사용자에게 필요한 것보다 더 많은 경우에 지시하고 싶은 API는 아닙니다. 다른 3D 도구의 재료 시스템과 잘 비교되지 않는다고 생각합니다.

• 많은 개별 파일을 포함하는 마찰

이것은 마찰이 있어서는 안됩니다. 얼마나 많은 사람들이 번들러를 사용하고 도구를 빌드하는지 알아보기 위해 일종의 설문조사를 하는 것이 유용할 것이라고 생각합니다. html 파일에서 js 파일을 수동으로 가져오는 것은 2018년에 실제로 접근 방식이 아니어야 합니다. 이것은 내가 찾을 수 있는 유일한 숫자 이며

스크립트 파일을 수동으로 포함할 때 이것이 어떻게 작동할지 걱정하는 것보다 트리 쉐이킹과 제대로 import/export 할 수 있는 데 더 많은 노력을 기울였습니다.

• 비주얼 에디터가 부족하다
• 비교적 적은 예, 문서

나는 이것이 핵심이 되기 전에 이런 일이 일어나야 한다고 생각합니다. 스페큘러 글로스 머티리얼은 GLTFLoader 와 결합되지 않은 예시여야 합니다. /src 또는 /examples 있다는 사실이 관련이 없어야 합니까?

@donmccurdy

onBeforeCompile 및 onBeforeRender 후크가 무한히 유연하다는 것은 맞습니다. 기본 셰이더를 조작하거나 대체할 수 있는 범위에는 실질적인 제한이 없습니다.

나는 실제로 이것을 주장하는 것이 아니라 onBeforeRender 와 같은 후크가 코드를 구조화하는 다른 접근 방식을 허용하지만 현재 GLTFLoader 에서 사용되는 것처럼 사용해서는 안 된다고 주장하고 있습니다.

onBeforeCompile 에는 확실히 제한 사항이 있으며 이름이 잘못 지정되었을 수 있습니다. 이 맥락에서 지적할 좋은 점은 최근 PR #14214입니다. 사라진 것을 보자마자( build() 찬성 needsUpdate ) 거기에서 onBeforeCompile 를 보게 될 것이라는 것을 알았습니다. onBeforeParse 했는데 #include <foo> 문을 바꾸지 않으면 이 함수 이후와 실제 컴파일 전에 여전히 구문 분석되기 때문입니다. 이 PR에서는 onWillRefreshMaterial 됩니다.

내가 이해하려고 하는 철학은 이러한 종류의 콜백이 더 세분화되어야 한다는 것입니다. 그것들이 더 많아야 하며 이름을 지정할 때 세심한 주의를 기울여야 합니다.

#14214는 NodeMaterial 가 핵심에 있을 필요가 없는 이유를 보여주는 좋은 예입니다. 적어도 /renderer 어떤 것과도 결합되지 않았으며 번들로 제공되지 않았습니다.

1. 비교적 단순한 기능에 대해서도 WebGL 구문을 Material API에 강제 적용

이 문제에 대해 들어본 적이 있지만 자세히 설명하지 않았습니다. 이것이 왜 문제입니까? 어쨌든 "재료 API"는 무엇입니까? 나는 항상 "여기에 몇 가지 일반적인 표면 음영 재료가 있습니다"라고 생각했습니다.

동적 지도를 원하면 material.map 또는 'material.color' 가 NodeTexture , GLSLTexture , TextureTexture 사용할 수 없는 이유가 없습니다.

myMaterial.color = new SomeNodeGraph() //outputs vec4 in the end

myMaterial.color = new GLSLInput() // inputs various documented variables, outputs some vec4

myMaterial.color = new THREE.Color()

myMaterial.color = new CustomColorGradientTopBottom() // dunno if its Node, GLSL, regular color whatever, i just know it's compatible with the slot

1. 코어 머티리얼 셰이더의 문자열 조작에 따라 달라지며, 코어 머티리얼 변경은 시간이 지남에 따라 더 어렵고 깨지기 쉽습니다.

내 요점은 이것이 onBeforeCompile 로 이미 어느 정도 가능하지만 이러한 변경을 설명하는 것보다 훨씬 더 어렵고 취약하게 만든다는 것입니다. 나는 이미 내 직업 생활에서 이것에 대해 손을 뻗쳤고 그것에 의존하는 몇 가지 코드를 가지고 있습니다. 얼마나 연약한지, 많은 스트레스를 유발합니다 :(

지적하신 #14206 데코레이터는 3년 동안 자체적으로 중단된 이 PR 때문에 1년 이상 중단되었습니다. 내 주관적인 느낌은 #14206이 이러한 데코레이터를 작성하는 것을 가능하고 덜 지루하고 덜 취약하게 만든다는 것입니다. 이러한 팬텀 속성이 정의되지 않는 한 절대적으로 아무 영향도 미치지 않는 30줄의 코드입니다. 우리에게 이미 onBeforeCompile 의 형태로 매달릴 밧줄이 주어진다면 좀 더 인간적으로 만들지 않겠습니까? :웃다:

결국, 나는 허용 가능한 취약 수준과 그렇지 않은 수준을 스스로 결정하고 싶습니다.

1. 예술가들에게 덜 다가가기

이것이 아티스트가 시각적 도구와 그래프를 저장할 형식을 가져야 하는 이유입니다. "구운" GLSL이나 런타임에 NodeMaterial 를 빌드하는 것으로 사용하는 것은 사용자가 선택해야 합니다.

아티스트는 셰이더를 생성할 수 있고 엔지니어는 로딩 프로세스를 최적화하기 위해 셰이더를 "컴파일"하도록 요청할 수 있습니다. 혼자 작업하는 아티스트는 어떤 이유로 더 쉽다고 가정하고 그래프를 로드할 수 있습니다("컴파일"에는 더 많은 노력이 필요합니다).

또한 여기에서 예술가는 왜 그리고 어떻게 고려되는가? 평균적인 "아티스트" 사용자의 모습, 유니티가 아닌 three.js로 작업하는 이유 등의 통계가 있습니까? 어떤 종류의 파이프라인입니까? 관련 엔지니어가 있습니까? 일부 기술 디렉토리에서 채택하는 방식으로 three.js와 통신하는 독립 실행형 도구가 아닌 이유가 무엇입니까? 주당 40,000 npm 다운로드는 아티스트가 아니라고 가정합니다. 이러한 종류의 설치가 일부 빌드 도구에서 사용되고 있으며 수동으로 가져올 가능성이 거의 없다고 가정합니다.

이것과 포인트 2 모두에서 제 사용 사례에는 아티스트가 없고 일반적으로 다른 사용자가 포함되지 않습니다. 저는 내장된 재료 위에 구축된 재료 시스템을 성장시키고 있습니다. 나는 접선 속성, 깊이 필링, 다른 클리핑 등으로 내 자신의 일반적인 압축 풀기를 사용합니다. 내가 관심 있는 것은 해당 코드를 사내에서 구조화하고 위의 클래스에 작은 내부 요소를 노출하는 것입니다.

1. 실질적으로 직렬화 불가능

나는 이것에 대해 많이 알지 못하며 이전에 이 주장을 들어본 적이 있습니다. 누군가 나에게 문제가 있는 부분을 지적할 수 있다면 일부 코드를 살펴보고 싶습니다. 문제에 대한 나의 매우 제한된 이해(아무도 없음)로, 나는 단순히 쓰기에 충분하지 않은 이유를 이해하지 못합니다.

"materialFoo": {
  "color":"#ff0000",
  "specularMap": "some_path.jpg",
  "glossiness": "0.5"
}

NodeMaterial 빌드된 스펙 광택 재질이 있다고 가정해 보겠습니다. 전체 그래프를 직렬화하지 않고 입력만 직렬화하고 싶습니까? SpecGloss 머티리얼의 직렬화가 무엇이든 동일하게 보여야 합니까? 나는 아마도 여기에 많은 것을 놓치고있을 것입니다. 몇 가지 포인터를 주시면 감사하겠습니다.

재: 직렬화

다음을 추가하는 것으로 충분할까요?

https://github.com/mrdoob/three.js/blob/dev/src/materials/Material.js#L160

customSerializer( data )

그리고 다음과 같은 것

SpecularGlossMaterial.prototype.toJSON = ()=>{
  Material.prototype.call(this, undefined, data =>{
    if ( this.roughness !== undefined ) data.roughness = this.roughness;
  })
}

specularMap 는 하드코딩되어 있기 때문에 실제로 직렬화됩니다.
https://github.com/mrdoob/three.js/blob/dev/src/materials/Material.js#L213

하지만 이것은 좀 이상하게 느껴집니다. Material 클래스는 보이는 모든 내장 재료의 내부를 알고 있습니까?

@donmccurdy 이 토론을 하고 싶다면 데코레이터 PR #14206에서 하는 것이 좋습니다. 오프라인으로 베이 지역 어디에서나 맥주나 커피를 마시며 작업 세션을 할 수 있습니다.slightly_smiling_face:

여러 파일이 마찰이 _없어야_ 하고 NodeMaterial을 src/ 에 넣는 것 자체가 인수가 아니라는 데 동의했습니다. NodeMaterial이 아직 많이 사용되지 않는 몇 가지 이유 중 하나일 뿐이며 이를 해결할 수 있는 다른 방법이 있습니다. 그리고 src/ 에 NodeMaterial 을 넣거나 examples/js 또는 별도의 빌드 출력으로 채택을 추진하기 위해서는 더 많은 문서가 전제 조건이 될 것이라는 데 확실히 동의합니다.

src/ 에서 이해되기 전에 몇 가지 더 필요한 것이 있다고 생각하지만 일반적인 방향으로 NodeMaterial 에 대해 낙관적입니다. 위에서 설명한 대로, 특히 WebGL2 및 (최종적으로) WebGPU 를 지원하는 방향으로 나아가면서 onBeforeCompile 및 문자열 조작을 머티리얼 시스템에 새로운 기능을 추가하는 경로로 사용하는 것에 대해 매우 걱정하고 있습니다. 이 두 가지 선택이 유일한 선택이라는 것은 아니지만 (둘 중) 이것이 내 생각입니다.

다른 면에서는 서로의 관심사와 선호도를 이해하지만 여전히 동의하지 않는 것처럼 보입니다. 나는 이 시점에서 내가 쓸 시간이 있는 모든 것을 썼고, 잠시 동안 이 자리에 앉아 다른 사람들이 저울질하도록 할 것입니다. 이에 대해 철저하고 정중한 토론에 감사드립니다. 🙂

나는 확산 텍스처에 곱하기를 사용하여 주변 폐색 텍스처를 넣고 싶습니다. 그래서 저는 이것을 시도하고 있습니다:

const aoNode = new OperatorNode(
        new Math1Node( aoTexture, Math1Node.INVERT ),
        aoScale,
        OperatorNode.MUL
    );
material.ao = aoNode;

이것은 내 AO 텍스처입니다.

불행히도 내 모델에서 주변 폐색을 보았습니다.

그렇게 할 생각이 있습니까?
이것이 내 질문을 게시할 올바른 장소이기를 바랍니다.

감사 해요!

기존 노드 기반 도구에서 threejs의 재료로 매핑하는 방향으로 생각할 수 있기를 바랍니다. 결과적으로 적절한 문서와 함께 src/에서 NodeMaterial을 보고 싶습니다.

@IARI

기존 노드 기반 도구를 나열할 수 있습니까?

@donmccurdy

답변 감사합니다 :)

불행히도 나는 우리가 여전히 서로를 이해하지 못한다고 생각합니다. 이 게시물을 읽을 시간이 있다면 다음과 같습니다.

머티리얼 시스템에 새로운 기능을 추가하기 위한 경로로 onBeforeCompile 및 문자열 조작을 사용하는 것에 대해 매우 걱정하고 있습니다.

onBeforeCompile 는 끔찍합니다. 동의합니다. 내가 이러한 스레드에 관련된 유일한 이유는 onBeforeCompile 의 문자열 조작보다 우수한 #13198을 원하기 때문입니다.

이것은 three.js에 새로운 기능을 추가하는 패턴이 되어서는 안 됩니다. 사용자가 애플리케이션에 새로운 기능을 추가할 수 있어야 합니다. @bhouston 이 이러한 작업 중 일부를 수행하기 위해 포크를 유지 관리하는 방법에 대한 결과를 공유하지 않았다는 것이

채널당 uv 변환의 경우 이를 예제 또는 npm 모듈로 만들겠습니다. 매주 3명이 다운받는다면 아마 핵심에 있어서는 안될 내용일 것입니다. 20,000명이 다운로드했다면 처음부터 three.js가 어떻게 설계되었어야 했는지 알 수 있습니다.

onBeforeCompile 는 노드 머티리얼( https://github.com/mrdoob/three.js/pull/14214 )에 중요할 것 같으므로 문자열 조작에만 사용되는 것은 아닙니다 .

이 작업을 수행할 onBeforeCompile 및 NodeMaterial 가 있습니다. 세 번째 옵션을 요청합니다. onBeforeCompile 보다 훨씬 편리하고 NodeMaterial 보다 훨씬 작습니다.

최근 예:
https://github.com/mrdoob/three.js/pull/14206

오래된 토론:
https://github.com/mrdoob/three.js/pull/13198

@pailhead 우선 몇 가지 기본적인 Blender Cycles Node에 대해 생각합니다.
Unity 셰이더그래프를 가지고 노는 것도 흥미로울 것입니다.

@claudioviola material.shadow 하거나 확산 material.color = diffuse * oclusion 곱할 수 있습니다. 폐색은 간접광, AmbientLight , HemisphereLight ...

@IARI

ShaderGraph를 확인하기 위해 Unity 7.5 기가를 다운로드 중입니다. 그래프 작성을 위한 독립 실행형 도구가 있습니까? 나는이 너무 그래프를 저장 종류의 파일의 무엇을보고 싶어하고, 어떻게 three.js를까지 전송할 것이다 NodeMaterial 에서 /src .

@pailhead 는 이 현재 시점에서 NodeMaterials를 코어로 이동하는 것에 대해 격리되어 있다고 생각합니다. 나는 모든 사람이 며칠 동안 @pailhead 와 논쟁하는 것이 유용하다고 생각하지 않습니다. 저는 프로젝트가 한 개인에게만 맡겨서는 안 된다고 생각합니다.

이것은 서두르지 않았고 강요되지도 않았습니다. Sunag는 몇 년 전에 추가했습니다. 현재 이것이 필요하고 다른 대안이 해결되지 않았으므로(예: 병합) 이 경로를 시도해 보겠습니다.

모든 주요 도구인 3DS Max, UE4, Blender, Unity, Maya, Sketchfab은 셰이더 그래프를 사용합니다. 이와 관련하여 three.js가 영구적인 불이익을 받아야 한다고 주장하는 것은 three.js에게 불공평해 보입니다.

이 그래프 기반 셰이더 시스템이 현재로서는 완벽한지 확신할 수 없지만 일단 핵심이 되면 우리는 모두 계속해서 작업할 수 있습니다.

저는 우리가 앞으로 어떤 방식으로든 PhoneMaterial, StandardMaterial 등의 API를 계속 지원하여 three.js 프로젝트의 95%를 깨뜨리지 않도록 주장합니다. 그렇게 하는 것은 무책임한 것입니다. 이러한 단순화된 직선 인터페이스로 작업하는 것도 좋습니다.

나는 이것이 핵심으로 옮겨가는 것을 막을 능력이나 의욕이 없습니다. 차단기로 참조되었기 때문에 관련 없는 일부 PR의 차단을 해제할 수 있기를 바랍니다. @bhouston , 결코 당신과 논쟁할 의도가 없었습니다. 나는 당신의 포크와 그것에 대한 경험이 궁금했을 뿐입니다.

굶주린 3D 아티스트로 생계를 꾸렸을 때 나는 노드 기반의 모든 것을 좋아했습니다. Nuke는 내가 가장 좋아하는 작곡가였고, 그런 도구를 만드는 방법을 배우고 싶습니다. 나는 이것이 특히 #14231의 차단을 해제하기를 바랍니다. 나는 이것을 스스로 학습 플랫폼으로 사용하고 있지만 방해가되면 게시를 중단하겠습니다. 감사합니다.

@pailhead 나는 그것을 사용한 적이 없지만 아마도 물질 디자이너에 대해 들어 본 적이 있습니까? 내가 이해하는 한, 이 도구는 또한 그래프/셰이더를 작성하는 것 이상이지만 주로 재료의 절차적 디자인에 중점을 두고 있습니다. 이것이 흥미로운 단서가 될 수 있습니까?

그 외에는 내 머리 꼭대기에서 독립형 도구를 모르지만 빠른 Google 검색으로 다음 두 가지가 나왔습니다.

• https://victhorlopez.github.io/editor/
• http://www.shaderplay.com/products/nodeflex/overview/overview.html
  흥미롭게 보입니다.

그러나 2015년 @mrdoob 의 트위터 게시물에서 찾은 threejs 노드용 도구 도 있습니다. 업데이트된 적이 없는 것 같지만 왜 ....

그 도구가 여기에서 참조된 것 같지만 아무 것도 내보낼 수 있는 방법이 없습니다. 첫 번째 링크는 훌륭해 보이지만 출력은 GLSL과 비교할 때 매우 엉성하고 가독성이 좋지 않습니다. NodeMeterial 또는 ShaderMaterial 를 다시 조립하는 데 이미 사용할 수 있는지 궁금합니다.

Unity를 살펴보았지만 실제로 셰이더 그래프 도구를 찾을 수 없었고,

Btw 내가 어떻게든 이것을 차단했다면 반드시 차단을 해제하십시오. PR은 2015년부터이며, 저는 8일 전에 처음 응답했습니다.

(이건 좀 주제넘어서 죄송합니다..)
@pailhead Unity 셰이더그래프용: 경량 렌더 파이프라인 템플릿으로 Unity 프로젝트를 시작해야 합니다. Unity 패키지 관리자를 열고 최신 버전의 Render-pipelines.light 패키지를 사용하고 있는지 확인하십시오.
다음은 새 프로젝트를 설정할 때 설정하는 방법입니다. https://youtu.be/Ar9eIn4z6XE?t=98

Sea3D Flow 재질 노드 편집기(http://sea3d.poonya.com/flow/)는 NodeMaterial 을 작성한 동일한 사람인 @sunag가 작성했습니다.

@sunag 정말 감사합니다.
간접광을 어떻게 얻을 수 있습니까? 렌더러의 값입니까 아니면 어떻게 계산할 수 있습니까?

선택한 객체에만 후처리 효과를 적용하고 싶습니다(즉, 채도 변경).
그러나 노드로 마스킹(다른 방법이 없는 경우)과 관련된 것은 찾을 수 없습니다.
현재 나는 많은 것을 버퍼에 쓰는 (노드가 아닌) OutlinePass를 읽고 있는데, 이는 내가 원하는 것을 달성하기 위한 실행 가능한 방법으로 볼 수 있지만 접근 방법에 대한 아이디어는 조금도 없습니다. 이것은 노드와 함께.

Sea3D Flow 머티리얼 노드 에디터는 three.js 에디터와 동일한 독립 실행형이 될 것입니까, 아니면 일부가 될 것입니까? 여전히 Sea3D 또는 three.js와 관련된 다른 이름이 지정됩니까? three.js 커뮤니티에 비주얼 편집기를 출시해 주신 @sunag 에게 감사드립니다.

하지만 노드를 사용하여 이 문제에 접근하는 방법에 대한 아이디어가 전혀 없습니다.

@IARI

OutlinePass를 읽고 그것이 하는 일을 이해할 수 있기 때문에 GLSL을 알고 있는 것 같습니다. 또한 노드로는 달성할 수 없다는 것을 알 만큼 충분히 이해하고 있는 것 같습니다. 코딩하는 방법을 안다면 노드를 지정하는 방법을 알 수 있을 거라 생각했습니다. 더군다나 코딩하는 방법을 모른다면 노드를 지정하는 방법도 알 수 있습니다. 연결 끊김은 어디에 있습니까?

2016년의 이 글은 전혀 보지 못했습니다. Shader Frog를 보는 것은 흥미 롭습니다. 이것이 vim 대 emacs 또는 다른 것으로 볼 수 있는지 궁금합니다. 나는 Sublime Text를 사용하는 것을 좋아하고 당신은 다른 것을 사용하는 것을 좋아합니다. 한 사람은 셰이더 개구리를 사용하는 것을 좋아하고 다른 사람은 three.js의 Sea3D 편집기를 사용하는 것을 좋아합니다.

Shader Frog가 셰이더를 출력하는 방식을 좋아하지만 Sea3D와 같은 오픈 소스는 아닙니다.

다음이 있습니다.

타사 제품 메커니즘을 Three의 핵심에 넣는 것은 불공정한 이점처럼 보이며 정치적으로 이해할 수 없습니다.

나에게 이 모든 것이 세 가지 변경 없이 수행될 수 있다는 사실은 그것이 불필요하다는 것을 의미하며, Three.js가 webgl 래퍼 API인 것과 이제 구현 특정 기능을 구동하는 것 사이의 경계를 흐리게 합니다. 셰이더 노드 데이터를 저장하는 것은 앱에 따라 매우 다르며 내가 아는 한 현재 어떤 소프트웨어에 대한 공통 노드 편집기 표준 형식이 없습니까? 하나를 적용하면 다른 구현에 해로울 수 있습니다.

@보스턴
NodeMaterial 이 착륙하기를 기다릴 수 없습니다. 다른 PR을 차단 해제하고 일상으로 돌아갈 수 있기 때문입니다. 과거에 다른 목소리가 이것을 차단하려고 한 것 같습니다.

@pailhead 는 이 현재 시점에서 NodeMaterials를 코어로 이동하는 것에 대해 격리되어 있다고 생각합니다.
저는 프로젝트가 한 개인에게만 맡겨서는 안 된다고 생각합니다.

감사합니다.

Outlinepass가 수행하는 것과 정확히 동일한 방식으로 노드를 사용하여 달성할 수 없는 이유는 없지만 부품을 재사용할 수 있도록 읽을 수 있고 이해할 수 있으며 모듈식으로 구현해야 합니다.
예를 들어 버퍼와 물건에 쓰는 출력 노드가 없어야 하는 이유는 무엇입니까?

그리고 저는 glsl을 잘 알지 못합니다. 또한 저는 그것을 발견했습니다. 제 표현을 용서해 주십시오. 셰이더 코드를 읽고 쓰는 것은 매우 골치 아픈 일입니다. 게다가 자바 스크립트 코드에서 문자열의 어리석은 배열에 래핑된 경우 더 고통스럽습니다.

웹팩 같은 걸 사용하시나요?

어리석은 배열

.html 파일로 가져와야 하는 경우에만 어리석은 일입니다. 웹팩으로 작업하고 최신 JS 구문이 있는 경우 GLSL을 .glsl, .vs, .fs 파일로 유지하고 구문 강조 표시 등을 사용할 수 있습니다.

shader.fs:

void main(){
  gl_FragColor = vec4(1.);
} 

javascript (엄마 봐, 멍청한 배열은 없어)

import mShader from './shader.fs'

내 관심사는 당신이 무언가를 코딩하는 방법이 아니라 효과를 만드는 방법을 구체적으로 묻기 때문에 당신의 필요에 많은 가치를 보지 못한다는 것입니다. NodeMaterial 는 수천 개의 "이 효과를 어떻게 음영 처리합니까?" 질문에 대한 문을 열 수 있습니다. 이 질문에 대한 일반적인 답변은 다음과 같습니다.

노드를 사용하세요, 루크!

아니요, 같은 파일 내에서 두 개의 다른 언어로 된 코드를 읽어야(작성은 고사함)해야 하는 것은 항상 보기 힘든 일입니다. 또한 webpack은 줄 바꿈으로 결합된 못생긴 문자열 배열로 래핑된 threejs 예제 셰이더 코드를 연구하려고 할 때 아무 도움이 되지 않습니다.
어쨌든 이 문제는 노드 시스템에 관한 것이며 개인 코딩 선호도에 대한 논의가 아니라 노드에 대한 간단한 질문을 했습니다.

@IARI

죄송합니다. 귀하의 게시물에 물음표가 표시되지 않아 귀하의 질문을 놓쳤습니다.

이것은 확실히 개인적인 코딩 선호도에 대한 논의가 아니라, 다르다는 사실을 고려해야 합니다. 나는 또한 "이 셰이더를 어떻게 만들 수 있습니까?"라는 질문이 쏟아지는 것에 대해 약간 걱정하고 있습니다.

이전에는 이 막대가 꽤 높았습니다. 사람들은 i don't know glsl 또는 "문자열의 어리석은 배열"을 보고 포기했습니다. 그러나 더 낮으면 모두가 셰이더를 작성하려고 할 것입니다.

나는 당신의 질문을 찾지 못했지만 그것이 무엇인지 궁금합니다. 그것은:

NodeMaterial로 ToonShader를 어떻게 만드나요?

어떤 경우에 답이 무엇인지 궁금합니다.

NodeMaterial이 일부 추상화를 지원하지 않기 때문에 할 수 없습니다.
NodeMaterial을 사용하여 노드를 연결할 수 있습니다.

이 토론을 나누면 도움이 될까요? 그것은 매우 먼 옛날(2015년)로 거슬러 올라가는 게시물의 수입니다. NodeMaterial은 /examples에 있으므로 이로부터 툰 셰이더를 구축할 수 있습니다. 다른 문제를 열거나 스택 오버플로에 대해 구체적으로 게시할 수 있으며 나머지 대화는 새 문제로 이동할 수 있습니까?

우리는 이 토론을 다른 슬랙 채널과 같은 다른 곳에서 기꺼이 가져갈 수 있습니다. 저는 그것이 여기에 속하지 않는다는 느낌이 있지만 대부분 사람들을 짜증나게 할 것입니다.

이 특별한 경우에는 포럼이 slack보다 나을 수 있습니다.

@pailhead , 이 전체 토론이 생산적이지 않게 되었습니다. 이 문제를 닫고 당면한 실제 문제에 초점을 맞춘 새 문제를 만들 수도 있습니다.

@보스턴

여러 문제라고 생각하는 것을 제외하고는 동의합니다.

• 노드 머티리얼을 구현하는 방법
• 다른 관련 및 관련 없는 PR이 차단되어야 합니다.
• 셰이더를 작성하는 방법을 모르는 사람들이 특정 셰이더 효과를 구현하도록 하는 방법

NodeMaterial로 ToonShader를 어떻게 만드나요?
어떤 경우에 답이 무엇인지 궁금합니다.
NodeMaterial이 일부 추상화를 지원하지 않기 때문에 할 수 없습니다.
NodeMaterial을 사용하여 노드를 연결할 수 있습니다.

ㅋ ㅋ ㅋ. @bhouston에 동의합니다... 이것은 단지 농담일 수 있습니다. 말하기 전에 webgl_materials_nodes 예제를 볼 수 있었습니까?

코드를 사용하려면 FunctionNode 사용하는 표현식을 참조하십시오.

@sunag 저를 오해하신 것 같아요. 이것이 현재 /examples 있고 /src 가 아닌 경우 이것이 일등 시민으로 만들어지는 이유가 궁금했습니다. 이 문제는 2015년 @AndrewRayCode에 의해 제기된 것 같습니다.

나는 이 문제가 2015년으로 거슬러 올라가 다양한 주제를 논의하는 것으로부터 과부하가 걸린다고 말했습니다. 누군가 " whatever 만드는 방법"을 묻는다면 스택 오버플로라고 할 것입니다.

이것이 three.js의 대대적인 점검이 될 예정이라면 _(이를 위해 특별히 단일성을 구성해야 한다는 사실이 다소 두렵습니다)_ 그런 질문에 대해 여기 github에 전용 진행 중인 문제가 있어야 한다고 생각합니다. - usage of NodeMaterial . 말그대로 랜덤(#14232)을 요청하시는 분들이 이 글을 참고하셔서 소통이 흐트러집니다. :)

최근에 툰 셰이더를 작성해야 했지만 선, 특히 @WestLangley 의 뚱뚱한 선을 기반으로 했습니다. 따라서 "툰" 셰이더가 필요하더라도 광산은 완전히 달라졌을 것입니다. 그것은 또한 NodeMaterial 로 뚱뚱한 라인을 포팅하는 것을 포함할 것입니다. 누가 얼마나 오래 걸릴지 모릅니다. 이것들은 모두 여기에 복잡하게 얽힌 다양한 주제입니다.

그리고 코드를 사용하고 싶다면 FunctionNode를 사용한 표현식을 참조하세요.

내가 코드를 작성하면 숭고한 텍스트를 사용할 것입니다. ShaderMaterial 가 필요하지 않습니다. FunctionNode . 시각 효과를 만들면 시각 편집기를 살펴보겠지만 이것은 제 취향입니다. 내가 여기 있는 이유는 이것이 다른 PR을 차단했기 때문입니다 :) 나는 이것이 가능한 한 빨리 착륙하는 것이 실제로 3명의 최선의 이익이라는 것을 얼마 전에 깨달았습니다. 이 대화의 엉킴을 풀면 아마도 일을 서두르는 데 도움이 될 것입니다. 이것에서 나는 @bhouston에 동의합니다. 이것은 최대한 빨리 해야 합니다!

감사합니다.

참고로 저는 툰 셰이더 같은 것에는 관심이 없습니다.
저는 코드를 작성하지 않는 사람들이 특정 위치에 미리 정의된 간단한 효과를 플러그인할 수 있도록 하는 시스템을 구현하고 있습니다.

슬프게도 지금 당장 노드를 작성하는 방법을 연구할 시간이 없고 어쨌든 기본적인 glsl 코딩을 따라잡아야 하므로 지금은 노드 없이 구현하려고 합니다. 확장할 수 없습니다. , 좋은 노드 구현으로 하나의 패스로 충분할 수 있는 여러 렌더 패스를 사용하지만 가독성이 떨어집니다...

전반적으로 슬프게도 나는 일반적인 주제를 처음 접했고 훨씬 더 기본적인 이해가 필요하지만 내가 아는 바에 따르면 노드는 진정으로 우아하고 확장 가능한 방식으로 이를 수행하는 가장 좋은 방법일 것입니다.
블로그 기사나 튜토리얼과 같은 노드 구현에 대한 정보를 알고 싶습니다.

면책 조항: 나는 아무 것도 요구하지 않습니다. 단지 위에서 나의 모호한 요청을 명확히 하기를 바랍니다.
여기에서 수행되는 모든 작업에 대해 모두 감사합니다. 정말 놀랍습니다.

https://github.com/mrdoob/three.js/issues/14232 스레드에서 노드 기반 셰이더 구현에 대한 의견을 요청했습니다. 매우 가난하다고 생각합니다. 나는 그 아이디어를 좋아하지만 내 생각에는 구현이 완전히 부적절합니다. 그래서 제가 너무 부정적이기 때문에 그 이유에 대해 몇 가지 구체적인 이유를 제시할 것입니다.

이해도

노드 및 다양한 유틸리티 클래스에 대한 일부 코드를 읽은 후에는 이해하기가 매우 어렵다고 확실히 말할 수 있습니다.

• 변수 이름은 설명적이지 않습니다.
• 댓글이 전혀 없습니다
• 메서드 이름이 모호하거나 완전히 오해의 소지가 있습니다. (예: "빌드" 방법이 무엇을 한다고 생각합니까? - 추측)

코드 구조가 정말 이상합니다. 다음 스니펫을 고려하세요.
https://github.com/mrdoob/three.js/blob/e2b49c017b2d1f37ab34317033a27df7b5a71d4d/examples/js/nodes/FunctionNode.js#L39 -L50

다음을 사용하여 동일한 결과를 얻을 수 있습니다.

return this.inputs.find(input => input.name === name);

"이머징 아키텍처"

"노드"란 무엇입니까? 데이터 구조에 대한 정의를 묻고 싶습니다. 서로 다른 "노드" 사이에 공통점이 거의 없기 때문에 모호한 개념인 것 같아서 Node.js처럼 꽥꽥거리면 덕타이핑처럼 보입니다. Node.js입니다.

우려의 분리

Node 에서 ShaderMaterial 로 어떻게 가나요? 지금은 각 노드의 다양한 로직, 일부 빌더, 일부 캐시, 파서 등의 책임이 혼합되어 있습니다. 이 프로세스에 대한 명확한 책임은 없습니다. 노드가 NodeBuilder를 사용합니까? 뭐...? 이름에서 알 수 있듯이 NodeBuilder는 실제로 보조 구조인 것으로 밝혀졌기 때문에 노드를 생성하거나 구성하는 공장입니다. 내가 말할 수 있는 한 여기에서 수행할 상당히 뚜렷한 작업이 있습니다.

• 그래프 작성
• 확인
• 중간 표현 작성
• 최적화
• GLSL로 컴파일

그것은 현재 코드에서 찾을 수 있는 것이 아닙니다 .

결론

좋은 문서와 주석이 없으면 이 구현이 완전히 부적절하다고 생각합니다. 그런 것들이 제자리에 있으면 스파게티 코드와 디자인 부족의 문제입니다. 즉, 나는 그것이 강력한 도구이자 매우 유용한 개념의 작업 구현이라는 것을 인정합니다.

@Usnul 우리는 Three.JS에서 "return this.inputs.find(input => input.name === name);"

그 이유는 "=>"가 각 입력에서 호출되어야 하는 함수를 생성하기 때문입니다. for-loop 또는 while-loop에 비해 JavaScript에서 함수 호출은 매우 느립니다. 따라서 우리는 항상 콜백 지향 코드 대신 명시적 루프를 수행합니다. 나는 그것이 더 장황하다는 것을 알고 있지만 필요합니다. Three..JS는 모두 이와 같으며 의도적입니다.

@Usnul , 귀하의 디자인 문제는 매우 유용합니다. 그러면 일부 리팩토링을 도울 수 있습니까? 나는 모두가 당신의 디자인 입력과 기여에 감사할 것이라고 생각합니다. :)

그 이유는 "=>"가 각 입력에서 호출되어야 하는 함수를 생성하기 때문입니다. for-loop 또는 while-loop에 비해 JavaScript에서 함수 호출은 매우 느립니다. 따라서 우리는 항상 콜백 지향 코드 대신 명시적 루프를 수행합니다. 나는 그것이 더 장황하다는 것을 알고 있지만 필요합니다. Three..JS는 모두 이와 같으며 의도적입니다.

그것은 정당한 지적입니다. 개인적으로 나는 성능과 가독성이 어느 하나가 아니라 규모에 따라 이루어져야 하지만 일관성은 좋다는 철학을 가지고 있습니다. 이 특정 예제의 주요 문제는 배열을 반복하는 일반적인 방법이 아니라는 것입니다. 관용적 방법은 다음과 같습니다.

for(var i=0, count=array.length; i<count; i++){
    var element = array[i];
    ...
}

또는 다음 형식의 50줄 길이의 코드가 있다고 가정해 보겠습니다.

function complex(a){
  if(a){
      //do a ton of stuff
      ...
      return result;
  }
}

다음과 같이 읽을 수 없습니다.

function complex(a){
  if(!a){
      //omg! not A?!11 
      return;
  }
  //do a ton of stuff
  ...
  return result;
}

@Usnul 이러한 사항을 고려하도록 코드를 리팩토링하는 데 도움을 줄 수 있습니까? 리팩토링은 쉬워야 한다고 생각합니다. 맞나요? 저는 Code Complete의 열렬한 지지자입니다. 그 책은 저에게 많은 영향을 미쳤습니다.

@usnul 이것이 마음에 들지 않으면 자유롭게 리팩토링하시겠습니까? 이렇게 생겼는지 아닌지는 중요하지 않습니다. 이것 위에 빌드하는 것이 중요합니다. 제 이해입니다.
이것이 예제(또는 다른 저장소)에 있는 동안 굴절 기가 발생 해야 하는지 아니면 옮겨야 하는지 모르겠습니다 .

@IARI

나는 정말로 glsl을 잘 알지 못하며 , 또한 그것을 발견했습니다. 제 표현을 용서 하십시오 . 쓰는 것은 매우 골치 아픈 일입니다 .

그러나 내가 아는 바에 따르면 노드는 진정으로 우아하고 확장 가능한 방식으로 이를 수행하는 가장 좋은 방법일 것입니다.

내가 GLSL을 아주 잘 안다고 주장할 수는 없지만 내 문제를 해결할 만큼 충분히 알고 있습니다. 내가 아는 바로는 @usnul 이 여기에 쓴 내용과 @AndrewRayCode 가 이전에 쓴 내용에 대부분 동의합니다. GLSL에 비해 노드가 .

GLSL을 모른다면 다른 것과 비교하는 것이 매우 어려울 것이라고 생각합니다. 귀하가 직접 작성한 것처럼, 우리가 judge on what you know 이고 귀하가 직접 you don't know glsl 라고 말한 경우 귀하의 입력은 면책 조항으로 받아들여야 한다고 생각합니다. :)

내가 말한 것처럼 :

일본은 이 지구상에서 가장 나쁜 곳이지만... 실제로 일본에 가본 적이 없습니다."

감사합니다.

메서드 이름이 모호하거나 완전히 오해의 소지가 있습니다. (예: "빌드" 방법이 무엇을 한다고 생각합니까? - 추측)

와, 이게 밑에 ShaderMaterial 인줄도 몰랐네요. 내 생각에 이것은 THREE.WebGLRenderer 가 셰이더 템플릿으로 수행하는 모든 작업을 수행합니다.

나는 정말로 glsl을 잘 알지 못하며 또한 그것을 발견합니다. 제 표현을 용서하십시오. 셰이더 코드를 읽고 쓰는 것은 매우 골치 아픈 일입니다.
하지만 내가 아는 바로는 노드가 진정으로 우아하고 확장 가능한 방식으로 이를 수행하는 가장 좋은 방법일 것입니다.

@pailhead 그가 의미하는 바는 사물 사이에 중간 수준이 있다는 것입니다.

나는 왜이 알람을 이해하지 못합니다. @mrdoob 은 훌륭한 솔루션이 아닌 다른 것을 합병하지 않습니다. NodeMaterial 모든 훌륭한 PR, 개선 사항은 커뮤니티에 매우 유용합니다. 이것이 여전히 핵심적인 통합이 되지 않았다면 더 많은 작업을 통해 개선해야 하기 때문입니다.

@sunag 이 프로젝트를 돕기 위해 다른 사람들이 특별히 할 수 있는 일이 있습니까? 문서를 작성할 준비가 되어 있고 문서를 검토할 수 있다면 기꺼이 문서를 작성하겠습니다.

@sunag 이 프로젝트를 돕기 위해 다른 사람들이 특별히 할 수 있는 일이 있습니까? 문서를 작성할 준비가 되어 있고 문서를 검토할 수 있다면 기꺼이 문서를 작성하겠습니다.

이것은 훌륭할 것입니다. 틀림없이 많은 도움이 됩니다.

노드 기반의 머티리얼 시스템이 놀랍게 보이고 표현력이 확장됩니다.

기존 재료 시스템에서 코어의 노드 기반 재료 시스템으로 어떻게 전환합니까? 두 시스템을 모두 수행할 것인가 아니면 기존 시스템을 노드 하나로 교체할 것인가?

죄송합니다. 이 스레드가 너무 커서 이 스레드를 따라잡지 못할 수도 있습니다...

두 시스템을 모두 수행할 것인가 아니면 기존 시스템을 노드 하나로 교체할 것인가?

나는 성능과 유지 보수 모두에서 더 나은 교체를 궁극적인 목표로 봅니다. 다음 단계는 코어에 있는 MeshStandardNodeMaterial 및 기타 노드 재료가 비주얼, 구문 및 성능 면에서 코어와 똑같이 실행되도록 하는 것입니다.

WIP https://github.com/mrdoob/three.js/pull/14333

내 프로젝트에 shadowMap을 표시해야 합니다.

MeshStandardNodeMaterial을 사용하는 2개의 지오메트리와 방향 조명이 있는 장면이 있습니다.

나는 스위치를 켰다
castShadow = 빛에 대해 true
두 객체 모두에 대해 castShadow 및 ReceivingShadow를 사용합니다.
shadowEnabled = 렌더러의 경우 true

왜 작동하지 않습니까?
MeshStandardNodeMaterial의 그림자 속성을 사용해야 합니까? 이것이 목적입니까?

누구든지 나를 도울 수 있습니까?
감사 해요!

@클라우디오비올라
지원 질문은 stackoverflow 포럼으로 이동합니다.

@sunag NodeMaterial 가 충분히 안정적이어서 TypeScript 선언 파일 제공을 시작할 수 있다고 생각하십니까? 가까운 장래에 주요 API 변경을 계획하지 않는 경우 NodeMaterial 가 TS 지원이 없는 마지막 모듈 그룹이므로 이 작업부터 시작하겠습니다.

@sunag NodeMaterial이 충분히 안정적이어서 TypeScript 선언 파일을 제공할 수 있다고 생각하십니까? 가까운 장래에 주요 API 변경을 계획하지 않는 경우 NodeMaterial이 TS를 지원하지 않는 마지막 모듈 그룹이므로 이 작업부터 시작하겠습니다.

@Mugen87 네, 변경 사항보다 추가 사항이 더 많을 것입니다. TS 지원을 추가하면 좋습니다. 👍

좋아요, 다음 릴리스에서 TS 지원이 준비되었습니다 R017 🙌