Three.js: 자료: onBeforeCompile() 추가됨

WebGLProgram.js가 이미 많은 처리를 수행할 때 사용자 지정 문자열 조작을 요구하는 것은 약간 해키해 보입니다. 기존 사용 사례를 재정의하는 대신 새 #include를 추가하는 관련 사용 사례가 있습니다. 런타임에 THREE.ShaderLib를 수정하여 오늘 이 작업을 수행할 수 있지만 똑같이 더럽게 느껴집니다.

아마도 두 가지 모두에 더 좋은 솔루션은 수동 문자열 조작 없이 영구적으로 방해하지 않고 내장 청크를 재정의/증가하는 재질에 대한 사용자 정의 ShaderLib를 제공할 수 있도록 하는 것입니다. 이것이 다른 용도로 onBeforeCompile 후크를 배제하지는 않지만 귀하의 예제가 수행하려는 작업과 더 일치하는 것 같습니다.

즉, 원시 포함을 기반으로 하는 셰이더 구성은 항상 한 버전에서 다음 버전으로 매우 취약합니다. 모든 스켈레톤 코드(예 meshphong_vert.glsl )를 포함해도 상관없다면 이미 다음과 같이 내장 머티리얼을 확장할 수 있습니다.

export class MyPhongMaterial extends ShaderMaterial {
  constructor({ color, radius, map, normalMap, emissiveMap }) {
    super();
    this.vertexShader = "...."
    this.fragmentShader = "....";
    this.uniforms = UniformsUtils.clone(ShaderLib.phong.uniforms);

    this.isMeshPhongMaterial = true;
    this.lights = true;

    this.uniforms.time = { value: 1 };
    //...
  }
}

모든 경우에 한 릴리스에서 다음 릴리스로 너무 많이 변경되지 않도록 내장 셰이더의 내부 구성에 의존해야 합니다. 각 포함은 이미 서명이 잘못 지정된 위장된 기능입니다. 포함 수준 재정의가 아닌 기능 수준을 제공하기 위해 양쪽 모두에서 훨씬 깨끗하고 유지 관리가 용이할 것이라고 생각합니다.

오늘은 생각했다..

멋진! 2월 10일에 이 풀 리퀘스트를 했을 때 저도 그렇게 생각했습니다.

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

유일한 차이점은 콜백을 통해 수행한다는 것뿐입니까? WebGLRenderer에서 사용하지 않는 인수를 탭했습니다.

예를 들어 이 방법을 사용하여 threejs가 노멀 맵과 함께 작동하도록 하는 것을 좋아하지만 이것으로 해결하기 쉬운 것처럼 보이는 몇 가지 문제를 연결했습니다.

내 브랜치를 보고 이것을 스핀하거나 이 매우 간단한 예제를 확인할 수 있습니다(조명/그림자 등으로 사용자 정의 변형을 테스트하고 몇 가지 유니폼을 추가함).

http://dusanbosnjak.com/test/webGL/three-material-shader-override/webgl_materials_shader_override.html

아마도 두 가지 모두에 더 좋은 솔루션은 수동 문자열 조작 없이 영구적으로 방해하지 않고 내장 청크를 재정의/증가하는 재질에 대한 사용자 정의 ShaderLib를 제공할 수 있도록 하는 것입니다.

https://github.com/mrdoob/three.js/pull/10791에서 일어나는 일을 정확히 요약하면 더 나은 설명을 작성할 수 있기를 바랍니다. :)

나는 여기서 무슨 일이 일어나고 있는지 모른다는 것을 인정해야 합니다. 나는 3에 기여하는 것을 포기한 사람을 알고 있다고 생각합니다. 당시에는 그것을 이해하지 못했지만 지금은 다소 실망스럽습니다.

첫 번째 단락을 읽을 때 데자뷰가 발생하기 때문에 대부분 좌절합니다.

...Object3D의 onBeforeRender()와 유사한 방식입니다.

onBeforeRender() https://github.com/mrdoob/three.js/pull/9738 에서 기능을 도입하는 데 1년이 걸렸을 때 똑같은 일이 일어났습니다.

이런, 같은 개발자와 두 번? 내가 여기서 뭔가 잘못하고 있는 게 분명해, 하지만 어쩌지? 처음으로 빌드 파일이 체크인되고 있었는데 어떻게 해야할지 몰랐고 그냥 잊어 버렸습니다. 그러나 이번에는 이 풀 리퀘스트의 맨 위에 있었습니다. 지금 충돌이 있지만 쉽게 해결되며 몇 달 동안 충돌이 없었습니다.

오해하지 마세요. 여기 작업에서 허영심이 아니라고 생각합니다. 저는 사람들이 아이디어를 실행하고 피드백을 받고 싶다고 생각합니다. @unconed 당신이 문제에 대해 잘 알고 있고 아마도 다른 것을 시도했을 것입니다. 귀하와 같은 사용자가 다른 PR을 놓친 이유는 무엇입니까?

재료별 shaderlib에 대해 꽤 좋은 느낌을 받았지만 캐싱을 파악하기 위해 전체 셰이더를 문자열로 보거나 비교하는 렌더러의 기능 하나를 찾았지만 그다지 좋지는 않았습니다. 피드백이 좀 있었으면...

예시가 잘못되었나요? 머리는 추상 스파이크 볼보다 무슨 일이 일어나고 있는지 훨씬 더 명확하게 만들 수 있지만 전체 예제는 더 많은 땅을 덮는 그림자와 함께 작동합니다. 어떤 이유로 무겁지만 많은 verts에서 sin/cos 때문이라고 생각합니다.

처음부터 다시 시작한다면... 씬 키트가 절대적으로 끔찍하지만 이 API는 정말 좋습니다.

https://developer.apple.com/documentation/scenekit/scnshadable

끔찍하게 문서화되었지만 더 흥미로운 부분을 찾을 수는 없지만 기본적으로 셰이더의 여러 단계에서 후크를 추상화했습니다.

올해 초 나는 정확히 같은 것은 아니지만 비슷한 것을 하는 것으로 보이는 풀 리퀘스트를 했습니다.

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

유일한 차이점은 콜백을 통해 수행한다는 것뿐입니까? WebGLRenderer에서 사용하지 않는 인수를 탭했습니다.

@pailhead 아직 홍보 못해서 죄송합니다. 내 접근 방식의 주요 이점은 3개의 새 라인만 필요하다는 것입니다.

그렇게 말하면서, 나는 이제 당신과 @unconed 제안을 연구하는 데 시간을 할애할 것입니다.

이것은 확실히 더 우아하게 느껴집니다. 단 세 줄입니다. 나는 다른 하나에서 다른 패턴을 따르고 있었다. 조금 더 장황할 수 있다고 말하려고 했지만 확실하지는 않습니다. 다른 하나의 유일한 장점은 몇달전에 가길 잘했다는 것 :)

이런, 같은 개발자와 두 번? 내가 여기서 뭔가 잘못하고 있는 게 분명해, 하지만 어쩌지?

미안합니다. 내가 생각할 수있는 유일한 것은 아마도 내가 압도 당했다는 것입니다. 어쩌면 긴 토론이나 복잡한 PR이 내 에너지를 너무 많이 소모할 수도 있으므로 나중으로 미루고 더 간단한 PR로 이동하기로 결정합니다.

@pailhead 님뿐만이 아닙니다. @bhouston 은 @WestLangley 와 @Mugen87을 포함해 이런 PR을 많이 했습니다.

다시 말하지만, 내가 PR을 좋아하지 않는다는 것이 아니라 PR에 내가 당시에 제공할 수 없는 약간의 관심이 필요하다는 것입니다. 좋은 예는 인스턴싱 PR입니다. 나는 그것을 읽을 시간을 찾았고, 내 자신의 실험을 했고, 단순화를 제안했습니다. 조만간 다시 볼 수 있지 않을까 싶습니다.

이 모든 것을 관리하고 모든 PR에 가치 있는 관심을 기울이는 것은 어렵습니다.

예시가 잘못되었나요? 머리는 추상 스파이크 볼보다 무슨 일이 일어나고 있는지 훨씬 더 명확하게 만들 수 있지만 전체 예제는 더 많은 땅을 덮는 그림자와 함께 작동합니다. 어떤 이유로 무겁지만 많은 verts에서 sin/cos 때문이라고 생각합니다.

이제 당신이 그것을 언급합니다 ... 예, 확대 할 때 새로운 MacBook Pro에서 10fps로 실행됩니다 😮

나는 그것이 그림자와 랜드, 죄값과 물건이라고 생각하지만 예, 그것은 너무 많은 히트를 치는 것 같습니다.

어느 쪽이든, 나는 당신이 이것을 세 줄로 요약했다는 것에 놀랐습니다. 저는 재료 매개변수가 어떻게 유니폼으로 바뀌고 그 패턴을 따랐는지에 너무 집중했습니다. 차이점은 사전과 같은 대안 ShaderLib 하므로 #include <> 가 다른 코드를 가져온다는 것입니다. 이 일이 발생하기 전에 포함을 제거하고 glsl로 바꿉니다. 셰이더 주위에 일종의 래퍼를 반환하면 아마도 이 구문이 더 깔끔해질 수 있다고 생각합니다( replace() 대신에 청크 이름 + glsl을 제공하면 됩니다. .

이게 있으면 정말 좋겠지만, 그렇게 많은 3D 엔진으로 작업하지 않았지만 Unity와 Scene Kit에는 이와 비슷한 기능이 있는 것 같습니다.

@unconed

onBeforeCompile() 장점 중 하나는 재질 속성이 변경되지 않은 상태로 유지된다는 것입니다. 그래서 내장재를 확장하는 느낌이 더 큽니다.

export class MyMeshPhongMaterial extends MeshPhongMaterial {
  constructor( parameters ) {
    super( parameters );
    this.onBeforeCompile = function ( shader ) {
      shader.vertexShader = shader.vertexShader.replace(
        '#include <begin_vertex>',
        'vec3 transformed = vec3( position.x + sin( position.y ) / 2.0, position.y, position.z );'
      );
    };
  }
}

var material = new MyMeshPhongMaterial();
material.color.setRGB( 1, 0, 0 ); // this still works

ShaderLib 것은 실제로 까다롭습니다. 영원히 변하지 않는 후크를 추가하는 것은 가능해야 합니다:

    #include <begin_vertex>
    % vertex %
    #include <morphtarget_vertex>
    #include <skinning_vertex>
    % transformed_vertex %
    #include <project_vertex>
    % projected_vertex %

교체 코드는 다음과 같이 됩니다.

this.onBeforeCompile = function ( shader ) {
  shader.vertexShader = shader.vertexShader.replace(
    '% vertex %',
    'transformed.x += sin( position.y ) / 2.0;'
  );
);

물론 컴파일하기 전에 사용되지 않은 모든 후크를 제거합니다.

다음은 인스턴스당 ShaderChunks와 비교한 모습입니다.

//given some material
var material = new THREE.MeshNormalMaterial();

//and some shader snippet
var myShader = [
    'float theta = sin( time + position.y ) / 2.0;',
    'float c = cos( theta );',
    'float s = sin( theta );',
    'mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );',
    'vec3 transformed = vec3( position ) * m;', //and making assumptions about THREE's shader framework
    'vNormal = vNormal * m;'
].join( '\n' );

https://github.com/mrdoob/three.js/pull/10791 Material.defines 접근 방식과 동일:

material.shaderIncludes = {

        begin_vertex: myShader,

    //uv_pars_vertex: [
    //  THREE.ShaderChunk['uv_pars_vertex'], //this doesn't have to be
    //  "uniform float time;",
    //].join('\n')
};

material.shaderUniforms = { time: { value: 0, type: 'f' || 'float' } }; //because this could just inject it in the right place (but needs type)

_청크 이름의 사전과 uniforms 개체입니다. 여기서 문자열 조작은 "이 덩어리를 재사용하고 그 위에 무언가를 하고 싶습니다"의 라인을 더 많이 따릅니다.

이 홍보:

material.onBeforeCompile = function ( shader ) {

    shader.uniforms.time = { value: 0 };

    shader.vertexShader = 'uniform float time;\n' + shader.vertexShader; //this feels hacky

    shader.vertexShader = shader.vertexShader.replace( //this is more verbose
        '#include <begin_vertex>',
        myShader
    );

};

onBeforeCompile()의 한 가지 이점은 재료 속성이 변경되지 않은 상태로 유지된다는 것입니다.

다른 PR에서도 동일하게 작동하기 때문에 어떻게 하든 상관없다고 생각합니다.

내가 생각할 수 있는 관련이 없는 이점 중 하나는 재료를 조작하는 논리를 동일한 블록과 동일한 수준에서 유지할 수 있다는 것입니다. 어딘가에 색상이 변경되는 코드가 있고 나중에 해당 자료에 사용자 정의 GLSL을 추가하는 경우 색상으로 유니폼을 변경하는 코드를 추가할 수 있습니다. (텍스트 벽 건너뛰기)

uv_pars_vertex 이 혼란스럽다면 다음과 같은 질문을 하는 것이 좋습니다.

" float rand( vec2) 와 같은 사용자 지정 GLSL 함수를 어디에 삽입합니까?"

그렇다면 이것은 의미가있을 수 있습니다 https://github.com/mrdoob/three.js/pull/11050

또 다른 주장은 - GLSL을 알고 있다고 가정하고 THREE의 셰이더 프레임워크를 알고 있다고 가정할 때 여전히 창의적이어야 하며 어디에 무엇을 주입할지 생각해야 합니다. uv_pars_vertex 가 내 머티리얼 확장을 수행하기에 편리한 장소라는 것을 알아내기 위해 약간 생각하고 대부분의 셰이더를 살펴봐야 했습니다.

이와 같은 것에서 추상화로 이동하고 lightingPhase , objectTransformation , perspectiveTransformation 등의 후크를 사용하는 것이 좋습니다. 또는 모든 셰이더 프로그램에 포함된 적어도 guaranteedToBeAboveMainButBelowCommonsAndExtensionCalls 더미 청크. % vertex % 를) 사용하려는 것 같습니까? 그러나 나는 그 구문에 익숙하지 않습니다.

이 PR은 있는 그대로 반대 방향으로 가고 있는 것 같다. 탭해야 할 위치를 아는 것 외에도 명시적으로 문자열을 조작하고 렌더러가 이미 수행하는 작업 중 일부를 반복해야 합니다. 또한 첫 번째 질문 외에 다른 질문을 하면

내가 주입하는 함수 내에서 commons 청크에 선언된 함수를 어떻게 사용합니까?

전체 셰이더에 유니폼을 추가하는 것보다 더 많은 문자열 조작을 수행하는 자신을 발견할 수 있습니다.

uv_pars_vertex 가 내 머티리얼 확장을 수행하기에 편리한 장소라는 것을 알아내기 위해 약간의 생각을 하고 대부분의 셰이더를 살펴봐야 했습니다.

우리가 과도하게 엔지니어링하지 않는 한 그 문제를 해결할 방법이 없다고 생각합니다. % vertex % 의 아이디어는 후크의 이름을 지정하여 약간의 도움을 주고 코드를 주입하는 상태를 어느 정도 알려주지만 어느 시점에서 어떤 변수를 사용할 수 있는지 문서화하기 어려울 것입니다. .

빌트인 머티리얼 해킹을 허용하는 문을 열고 있지만 적절한 "지원"을 제공할 수 없다고 생각합니다. 사용자는 물건이 파손될 가능성이 있음을 인지해야 합니다.

다른 PR에서 다루려고 했습니다. 적어도 기능, 변수, 속성 및 유니폼에 대해 더미 후크를 추가했습니다. 많은 GLSL 로직이 이미 구조체에서 발생하고 Scenekit은 각 변수를 문서화했습니다(더 이상 동일한 문서를 찾을 수 없음).

진행하면서 리팩토링해야 할 수도 있지만 다음과 같은 내용이 있습니다.

#ifdef PHASE_FOO

#include <shader_foo> 
//someGlobalStruct.mvPosition = modelViewMatrix * myLogic( transformed );
//if there is glsl provided for phase "foo" document that it should operate on "transformed" 
//and that it should return "mvPosition" 
#end including <shader_foo>

#else 

  //default
  #ifdef USE_SKINNING

    vec4 mvPosition = modelViewMatrix * skinned;

  #else

    vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );

  #endif

#ifdef PHASE_BAR

#include <something_like_this>
//mvPosition = myPostDefaultTransformationLogic( mvPosition );

#endif

gl_Position = projectionMatrix * mvPosition;

#endif

물론 ifdef 및 포함은 아마도 이와 같이 작동하지 않을 것입니다. 그러나 다른 접근 방식을 사용하면 비교적 간단하다는 것을 알 수 있습니다. 빈 문자열로 항상 #include <some_phase> 추가할 수 있습니다. #ifdef 를 사용하여 트리거되는 항목을 관리하는 데 도움이 될 수 있습니다. 예를 들어 "vertex_transformation" 단계에 대한 논리를 제공하면 셰이더는 사용자가 제공하는 모든 것을 정의합니다. 각 청크가 GLSL로 수행하는 작업을 문서화하면 전반적으로 도움이 됩니다. 추상화로 더 이상 진행하지 않고 청크가 현재 구조화되는 방식에 대한 이 지도를 갖는 것이 좋을 것이라고 생각합니다.

빌트인 머티리얼 해킹을 허용하는 문을 열고 있지만 적절한 "지원"을 제공할 수 없다고 생각합니다. 사용자는 물건이 파손될 가능성이 있음을 인지해야 합니다.

우리는 이미 모든 재료에 사용할 수 있는 정의 항목을 가지고 있습니다. https://github.com/mrdoob/three.js/issues/10764는 수정 제안 THREE.ShaderLib 다음 정의 .defines 의 인스턴스에 속성을 Material . 물론, 그 속성은 내가 항목을 작성할 때까지 문서화되지 않았으며(하지만 당신은 그것을 승인했습니다 :)), 여전히 정의되지 않았습니다 .

그러나 이것이 현재 작동하고 모든 머티리얼에 의해 상속되는 방식은 지원 됩니다. 여기에 무언가를 넣으면 해당 머티리얼의 셰이더에 영향을 미칩니다 . 게다가 이미 셰이더 라이브러리의 일부인 무언가를 정의하면 문제가 발생할 수 있습니다 .

똑똑한 사람이 되려고 하지 않고 모범을 보이려고 합니다. 저는 주로 ShaderMaterial 정의를 사용했지만 WebGLRenderer 작동하는 방식 때문에 모든 재료에 영향을 미칩니다. 다음과 같은 논리는 없습니다.

Phong 와 같은 재료의 추상화와 같은 훨씬 더 똑똑하고 표면적이라면 정의를 고려하지 마십시오. three는 셰이더 청크를 재정의하도록 설계되지 않았으며 Phong 템플릿은 GLSL이 수행해야 하는 작업에 대한 최종 권한이며 이를 사용하지 못하도록 숨기는 역할을 하므로 GLSL 정의가 이를 방해하지 않는 것이 좋습니다.

그래도 깨질 수 있을지는 모르겠지만 시도는 해봐야겠네요.

그렇게 말하면서 많은 이익을 제공한다면 물건을 부수는 옵션을 원합니다. 꽤 캡슐화되고 작은 GLSL 스니펫을 사용하여 3개의 버전을 쉽게 변경하여 노멀 맵을 다르게 렌더링할 수 있습니다. 노멀을 취하고 그것을 다른 노멀을 얻기 위해 변환하는 것은 매우 간단합니다. 완전히 다른 방식으로 컴퓨터 그래픽을 시작하지 않는 한, 저는 이것이 깨지는 것을 볼 수 없습니다. :)

인스턴스화는 또 다른 예입니다.

오 ANGLE_INSTANCED_ARRAYS를 사용하고 싶습니다. 3개는 그림자 또는 PBR 재질로 지원하지 않는 것 같습니다. 이 두 줄을 추가하고 저에게 적합하게 만들겠습니다."

이 기능이 마침내 three.js에 제공된다는 것을 알게 되어 기쁩니다. :). 예, yet another material modifier PR 도 만들었습니다. (https://github.com/mrdoob/three.js/pull/7581) 너무 오래되어 코드가 더 이상 관련이 없지만 기본적으로 @mrdoob 과 같은 후크를 주입하고
나는 이 기능을 사용하고자 하는 대부분의 사람들이 기본 자료를 완전히 다시 작성하는 대신 "약간" 수정하기를 원하기 때문에 수정하는 내용을 이해하기 쉽기 때문에 미리 정의된 후크의 아이디어를 좋아합니다.

나는 이 PR의 단순함을 좋아하지만 우리가 일을 하기 위해 더 구조화되고 깨끗한 방법을 원한다면 나는 이미 당신의 코드로 대체할 후크 사전과 유니폼이나 사용자 정의 코드를 추가하는 더 간단한 방법을 선호합니다. 문자열만 교체합니다.

@fernandojsg #10791을 확인하고 피드백을 제공할 수 있는 기회가 있으면 메인 바로 외부에 추가 후크(귀하의 "pre_vertex"와 같은 것)를 추가하고 관리가 약간 더 있다는 점을 제외하고는 귀하가 한 것과 매우 유사해 보입니다.

@fernandojsg 당신의 홍보를 잊어버렸습니다 😚. 나는 당신의 PR이 내가 이 일을 보기 시작했던 방식과 꽤 많이 닮았다고 생각합니다. 잠재의식?

똑똑한 사람이 되려고 하지 않고 모범을 보이려고 합니다. 나는 주로 ShaderMaterial 정의를 사용했지만 WebGLRenderer 작동하는 방식 때문에 모든 재료에 영향을 미칩니다.

그런 식으로 라이브러리를 해킹할 수 있어서 다행이지만 의도하지 않은 용도로 내부적으로 남용 기능을 사용해서는 안 됩니다. 그런 식으로 깨지기 쉬운 코드로 끝나는 것은 쉽습니다.

#7581을 다시 읽는 중... https://github.com/mrdoob/three.js/commit/e55898c27a843f69a47e602761c60d9bbe91ee35 위에 % HOOKS % 하고 다음과 같은 클래스를 만들 수 있습니다.

THREE.ExtendedMaterial = function ( material, hooks ) {

    material.onBeforeCompile = function ( shader ) {
        var vertexShader = shader.vertexShader;
        var fragmentShader = parameters.fragmentShader;
        for ( var name in hooks ) {
           vertexShader = vertexShader.replace( '%' + name + '%', hooks[ name ] );
           fragmentShader = fragmentShader.replace( '%' + name + '%', hooks[ name ] );
        }
        shader.vertexShader = vertexShader;
        shader.fragmentShader = fragmentShader;
    };

    return material;

};

그러면 다음과 같이 할 수 있습니다.

```js
var 재료 = 새로운 THREE.ExtendedMaterial(
새로운 THREE.MeshBasicMaterial(),
{ 꼭짓점: 'transformed.x += sin( position.y ) / 2.0;' }
);

따라서 문제는 어떤 후크가 있어야 하느냐는 것입니다.

VERTEX
TRANSFORMED_VERTEX
PROJECTED_VERTEX

NORMAL
TRANSFORMED_NORMAL

FRAGMENT_UNIFORMS
INPUT_FRAGMENT
OUTPUT_FRAGMENT

@mrdoob 예를 들어 이 요지 에서 인스턴스를 지원하기 위해 MeshBasicMaterial 정점 셰이더에 코드를 삽입해야 하는 위치를 볼 수 있습니다.

그리고 나머지 자료는 여기에서:)

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

VERTEX_UNIFORMS 너무 독단적인 것 같습니다. 함수, 속성 또는 변수를 어디에 추가해야 하나요? PRE_VERTEX 뭔가요?

NORMAL_MAP 은(는) 반드시 필요합니다.

vert:

PRE_VERTEX
VERTEX
TRANSFORMED_VERTEX
PROJECTED_VERTEX

NORMAL
TRANSFORMED_NORMAL

UV

fragment:

PRE_FRAGMENT
INPUT_FRAGMENT
LIGHT
NORMAL

OUTPUT_FRAGMENT

VERTEX_UNIFORMS 너무 독단적인 것 같습니다. 함수, 속성 또는 변수를 어디에 추가해야 하나요? PRE_VERTEX 뭔가요?

흠, 의견이 있습니까? 어때요?

attribute vec4 aMyAttribute; 은 유니폼이 아닙니다 :)

float myRand( vec4 foo ) { /*logic*/ return vec4(bar,baz)} 은(는) 유니폼이 아닙니다.

varying vec3 vMyVarying; 도 유니폼이 아닙니다.

복수가 아니거나 제복이 전혀 아닙니다.

속성 "주입"의 사용 사례는 무엇입니까?
대신 geometry.addAttribute( 'aMyAttribute', ... ) 를 사용해야 하지 않습니까?

나는 당신이 그것을 선언 할 필요가 없다는 것을 몰랐습니다. 여전히 다양한 기능과 기능이 남아 있습니까?

여전히 다양한 기능과 기능이 남아 있습니까?

좋은 지적.

GLSL에서 더 이상 속성을 선언할 필요가 없습니까? 나는 그것이 유니폼처럼 더 잘 작동한다고 생각했지만 GLSL에서 선언하지만 JS로 입력 할 필요는 없습니다.

코드가 꽤 흩어져 있는 특정 항목에 관해서는 이 목록이 꽤 빠르게 커질 수 있다고 생각합니다. 노멀 맵을 수행하는 한 가지 방법은 vert와 frag 모두에서 두 가지 추가 속성, 가변 및 변환 논리를 포함합니다.

나는 여전히 간단하고 우아한 최신 변경 사항을 좋아합니다. 나는 우리가 전역 범위에 코드를 넣을 장소가 필요하다는 @pailhead에 동의합니다. https://github.com/mrdoob/three.js/pull/7581에서 preMainVertex preMainFragment 를 전역적으로 주입하여 다양한 기능과 기능에 사용할 수 있도록 했습니다. 아마도 globalVertex/Fragment 또는 이와 유사한 이름이 더 나을 수 있습니다.

GLOBAL_VERTEX 및 GLOBAL_FRAGMENT 좋은 소리 👌

다른 홍보에서 이름을 정확히 어떻게 지었는지 😆 👍

@pailhead 하지만 이제 코드를 병합하는 비밀을 알게 되었습니다. PR을 열고 잠시 그대로 둔 다음

이제 진지하게 나도 그 이름을 좋아하고 그것으로 우리가 갈 준비가 되었다고 생각합니까, 아니면 내가 뭔가를 놓치고 있습니까? 내 PR의 예제를 이 새 코드로 변환하려고 합니다.)

코드가 들어가는 부분은 괜찮고 타임라인이 좀 어긋나 있습니다. #7581은 거의 2년 전에 제안되었습니다. https://github.com/mrdoob/three.js/issues/10789 에서 참조되지 않았으므로 아마도 레이더에서 벗어났습니다. 부딪히거나 갈퀴를 쳤을 것입니다.

모듈을 가져오고 자신의 세 가지를 체리피킹하는 경우에도 사람들은 비공식 핵심 모듈을 사용하는 것에 대해 그다지 만족하지 않습니다. "이봐, foo를 처리하는 npm 패키지가 있습니다"라고 말하는 것이 훨씬 쉽습니다. 이것이 내가 이와 같은 PR을 중요하게 생각하는 이유입니다. 세 가지는 충분히 유연하지 않습니다.

이익!

무슨 이익? 😆

코드가 들어가는 부분은 괜찮고 타임라인이 좀 어긋나 있습니다. #7581은 거의 2년 전에 제안되었습니다. https://github.com/mrdoob/three.js/issues/10789 에서 참조되지 않았으므로 아마도 레이더에서 벗어났습니다. 부딪히거나 갈퀴를 쳤을 것입니다.

뭐라고 요? 새 PR을 만들기 전에 열려 있는 모든 PR을 확인하지 않았습니까? #트롤롤

진실 :)

확인을 눌러 목록에서 전화를 걸고 최대한 빨리 받을 수 있습니다.:D

이 셰이더(예:

#include <shadowmap_pars_vertex>

void main() {

    #include <begin_vertex>
    #include <project_vertex>
    #include <worldpos_vertex>
    #include <shadowmap_vertex>

}

다음과 같이 보입니다.

#include <shadowmap_pars_vertex>

void main() {

    % begin_vertex %
    % project_vertex %
    % worldpos_vertex %
    % shadowmap_vertex %

}

음, 그것들을 모두 교체할지 아니면 현재 동작 중 일부를 남기고 코드를 삽입할지 잘 모르겠습니다.

#include <shadowmap_pars_vertex>

%GLOBAL_VERTEX% 
void main() {
       %PRE_VERTEX% 
    #include <begin_vertex>
...
}

내 초기 접근 방식은 나머지 포함을 건드리지 않고 추가 코드를 주입하는 것이었습니다.

따라서 % hook % 는 실제 후크를 위한 것입니다. <begin_vertex> 를 바꾸려면 여전히 문자열에서 찾아야 합니다. begin_vertex 후크가 없을까요?

내 PR에서 나는 단지 재료의 동작을 약간 수정하고 싶었습니다. 일반적으로 fs가 완전히 실행된 후 또는 그의 예에서 @mrdoob이 보여준 것과 유사한 대 변환 후에 약간의 색상 보정을 수행했습니다.
하지만 각 포함을 완전히 교체하려면 포함 대신 후크를 사용하고 후크를 바인딩하지 않은 경우 포함 자체를 삽입하는 논리를 추가해야 합니다.

나는 법선에 대해 그렇게하고 싶습니다 (파생을 사용하지 않고 3ds Max 또는 Maya 또는 법선 맵이 생성되는 모든 곳에서 실제 TBN 정보를 사용하십시오). 인스턴스와 함께 작동하도록 MeshPhongMaterial 를 조정하려면 일부 청크를 모두 교체해야 하지만, 이것은 매우 극단적인 경우처럼 느껴집니다.

생각나는게 이 두가지인데 더 있는지 궁금합니다.

따라서 % hook % 는 실제 후크를 위한 것입니다. <begin_vertex> 를 바꾸려면 여전히 문자열에서 찾아야 합니다. begin_vertex 후크가 없을까요?

둘 다 교체할 수 있습니다. 현재 코드에서는 이미 무엇이든 바꿀 수 있습니다. %HOOK% 는 편의를 위한 것입니다.

#11562에서 언급했듯이 교체 가능한 셰이더 청크의 개념은 어떻습니까?

예시:

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  map: texture,

  parts: {
    frag: {
      map_pars_fragment: `
        uniform sampler2D map;
        uniform sampler2D map2;
     `,

      map_fragment: `
        vec4 texelColor = texture2D( map, vUv );
        vec4 texelColor2 = texture2D( map2, vUv );

    texelColor = mapTexelToLinear( 
          mix( texelColor, texelColor2, progress)
        );

    diffuseColor *= texelColor;
      `
    }
  }
});

material.uniforms.progress = {value: 1};
material.uniforms.map2 = {value: texture2};

이것은 하나의 재료에서 여러 텍스처 사이의 전환 코드가 얼마나 간단할 수 있는지입니다.

그것은 쉽게 구현될 수 있고 불필요한 코드를 만드는 것을 피할 수 있습니다.

@sasha240100

https://github.com/mrdoob/three.js/pull/10791 은 parts 를 shaderChunks 하고 이를 논쟁.
:roll_eyes: 😆

청크가 이미 표시되어 있으므로 frag{} 사전도 필요하지 않습니다. 모두 _fragment 및 _vertex 있습니다.

이것은 대체해야 할 것을 찾기 위해 문자열을 검색해야한다는 점을 제외하고는 동일합니다.

@pailhead 예, frag: {} 삭제하겠습니다. 머티리얼 셰이더가 연결되기 전에 전달되어야 하기 때문에 인수로 사용했습니다. 이 경우 연결 후 기존 부품을 교체하지 않아도 됩니다.

우리는 실제로 인수와 속성을 둘 다 추가할 수 있습니다. color 처럼

지금 여기가 어디입니까? 예제가 .replace() 하고 있고 후크/교체 가능한 청크가 보이지 않습니까? @mrdoob

아직 이것으로 돌아가지 못했습니다.

% hook % 대한 홍보를 하시겠습니까?

위의 의견에서 확장된 자료를 원하십니까?

THREE.ExtendedMaterial = function ( material, hooks ) {

    material.onBeforeCompile = function ( shader ) {
        var vertexShader = shader.vertexShader;
        var fragmentShader = parameters.fragmentShader;
        for ( var name in hooks ) {
           vertexShader = vertexShader.replace( '%' + name + '%', hooks[ name ] );
           fragmentShader = fragmentShader.replace( '%' + name + '%', hooks[ name ] );
        }
        shader.vertexShader = vertexShader;
        shader.fragmentShader = fragmentShader;
    };

    return material;

};

후크의 위치를 ​​선택하고 문서화하는 것이 실제로 그렇게 간단하지 않을 수 있습니까? 전달된 hooks 를 chunks 대체하고 지금은 global_vert 및 global_frag 를 추가하여 포함을 찾을 수 있습니까? 내가 쓴 지금은 세 사람의 책임이 아닌 것처럼 들리지만 다른 한편으로는 미래에 % hook % 대해 THREE.ExtendedMaterial 스텁이 될 것입니다.

THREE.BAS 확장자를 알고 있는지 모르겠습니다. 다음과 같이 사용자 지정된 재료에서 배열로 액세스할 수 있는 원본 재료의 자리 표시자를 사용합니다.

  var material = new BAS.PhongAnimationMaterial({
    flatShading: true,
    vertexColors: THREE.VertexColors,
    side: THREE.DoubleSide,
    uniforms: {
      uTime: {type: 'f', value: 0}
    },
    vertexFunctions: [
      // cubic_bezier defines the cubicBezier function used in the vertexPosition chunk
      BAS.ShaderChunk['cubic_bezier'],
      BAS.ShaderChunk['quaternion_rotation']
    ],
    vertexParameters: [
      'uniform float uTime;',
      'attribute vec2 aDelayDuration;',
      'attribute vec3 aStartPosition;',
      'attribute vec3 aEndPosition;',
      'attribute vec3 aControl0;',
      'attribute vec3 aControl1;',
      'attribute vec4 aAxisAngle;'
    ],
    vertexInit: [
      'float tProgress = mod((uTime + aDelayDuration.x), aDelayDuration.y) / aDelayDuration.y;',
      'vec4 tQuat = quatFromAxisAngle(aAxisAngle.xyz, aAxisAngle.w * tProgress);'
    ],
    vertexPosition: [
      'transformed = rotateVector(tQuat, transformed);',
      'transformed += cubicBezier(aStartPosition, aControl0, aControl1, aEndPosition, tProgress);'
    ]
  });

예를 들어 vertexInit 및 fragmentInit 가 main() 함수의 맨 위에 있는 간단한 규칙을 기반으로 한다는 사실이 마음에 듭니다. vertexParameters 및 fragmentParameters 는 셰이더 상단에 있으며 유니폼 또는 속성을 정의합니다. vertexFunctions 및 fragmentFunctions 는 main() 함수 앞에 있습니다. 법선, 위치 등...

위치에서 볼 수 있듯이 transformed 변수를 변경하여 최종 위치를 변경합니다. 예를 들어, 프래그먼트 셰이더의 법선( objectNormal ) 또는 색상( diffuseColor )에 대한 유사한 것입니다.

이것은 Phong 재료가 어떻게 생겼는지이며 자리 표시자만 추가합니다. https://github.com/zadvorsky/three.bas/blob/master/src/materials/PhongAnimationMaterial.js

안녕하세요 여러분, 저는 대화를 따르려고했지만 솔직히 게임 개발자가 아닌 프론트 엔드에서 왔기 때문에 길을 잃었습니다.

MTL을 로드하려고 하는데 다음이 표시됩니다.

material.onBeforeCompile.toString()이 정의되지 않았습니다.

내 MTL 파일은 원래 .psd 파일을 가리키고 있었고 동일한 폴더를 포함하는 몇 안 되는 png 중 하나로 변경했습니다(일반). psd를 로드할 수는 없지만 어쨌든 psd가 있어도 실패합니다.

# Blender MTL File: 'goblin.blend'
# Material Count: 1

newmtl Material
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.640000 0.640000 0.640000
Ks 0.001617 0.005682 0.002517
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2
map_Kd Normal.png

콘솔 출력은 다음과 같습니다.

THREE.WebGLRenderer 87
bundle.js:54570 OBJLoader: 29.447998046875ms
bundle.js:28429 Uncaught TypeError: Cannot read property 'toString' of undefined
    at WebGLPrograms.getProgramCode (bundle.js:28429)
    at initMaterial (bundle.js:32350)
    at setProgram (bundle.js:32542)
    at WebGLRenderer.renderBufferDirect (bundle.js:31605)
    at renderObject (bundle.js:32335)
    at renderObjects (bundle.js:32308)
    at WebGLRenderer.render (bundle.js:32072)
    at bundle.js:9658
    at bundle.js:53976
    at XMLHttpRequest.<anonymous> (bundle.js:40153)

im을 사용하는 코드는 주로 다음과 같습니다.

OBJLoader(THREE);

const modelLoader = new THREE.OBJLoader();
const textureLoader = new MTLLoader();
textureLoader.setTexturePath( 'models/' );
    textureLoader.load('models/goblin.mtl', function( materials ) {

            materials.preload();

            modelLoader.setMaterials( materials );
            modelLoader.load('models/goblin.obj', function ( obj ) {
                 scene.add( obj );
                renderer.render( scene, camera );


            });

        }); 


    renderer.render( scene, camera );

}

이것이 모델의 문제입니까? 3에? mtl 로더에서? 솔루션이 있습니까?

도움을 주시면 감사하겠습니다.
감사 해요.

material.shader = shader 에서 material.onBeforeCompile(shader=>...) material.shader = shader 와 같은 작업을 수행해야 합니까?

나는 그것이 다소 투박하다고 생각합니다. 언젠가는 다른 제안을 다시 방문할 가치가 있을 것입니다. :)

@jjalonso

이것은 버그인 것 같습니다:

https://stackoverflow.com/questions/46787166/react-and-three-js-mtlloader-material-onbeforecompile-is-undefined

이것으로 인해 발생하지만 Material 에 이 기능이 없는 이유는 무엇입니까?
https://github.com/mrdoob/three.js/blob/35a26f178c523514673d992da1aece23c1cfca6e/src/renderers/webgl/WebGLPrograms.js#L244

@mrdoob

이러한 확장된 셰이더가 올바르게 캐시되지 않을 수 있습니까? 두 가지 다른 재료를 사용하려고 합니다. 하나는 dithering_fragment 변경되었고 다른 하나는 변경되지 않았습니다. 둘 다 장면에 추가하면 dithering_fragment 청크가 없는 하나만 사용되는 것으로 나타납니다.

나는 이 바이올린으로 그것을 재현할 수 없었다
https://codepen.io/anon/pen/KQPBjd

하지만 내 예에서 이 코드를 사용하면

const dithering_fragment = 
`
gl_FragColor.xyz *= foobar
`

// in onBeforeCompile
console.log(shader.fragmentShader)



md5-0f1a3ac67268b230968df20abdbd03d1



/**
#if defined( DITHERING )
  gl_FragColor.rgb = dithering( gl_FragColor.rgb );
#endif

gl_FragColor.xyz *= foobar

}
*/

그러나 다른 포함 및 정의를 공유하는 다른 재료를 장면에 추가하면 오류가 발생하지 않습니다.

그 이유는 다음과 같습니다.

https://github.com/mrdoob/three.js/blob/35a26f178c523514673d992da1aece23c1cfca6e/src/renderers/webgl/WebGLPrograms.js#L244

두 재료에 일부 논리가 제공되는 동일한 기능이 있습니다. 논리에 대한 변수는 콜백 범위를 벗어납니다. 따라서 두 재료 모두 동일한 해시를 얻습니까?

array.push( material.onBeforeCompile( obtainShaderSomehow ) )

https://github.com/mrdoob/three.js/pull/10791은 다음과 같이 해결했습니다.

https://github.com/pailhead/three.js/blob/879d52349bd5ef72c64fc962d8ca26bacaf489bf/src/renderers/webgl/WebGLPrograms.js#L242

global_vertex 및 global_fragment 자리 표시자/후크를 제거하면 다른 pull 요청을 재고하시겠습니까? 그것들이 없으면 많은 파일에 영향을 미치고 코드가 적습니다. 세 줄은 아니지만 올바르게 해시됩니다. :)

이 바이올린 https://codepen.io/anon/pen/KQPBjd 에서 #41 댓글
장면에 있는 다른 메시의 재질이 변경됩니다.

https://github.com/mrdoob/three.js/issues/13192

이것이 최근 릴리스에 포함되었습니까, 아니면 모두 아직 개발 중입니까?

@cdhanna http://threejs.org/examples/#webgl_materials_modified

@mrdoob .onBeforeCompile() 해킹된 자료를 직렬화하는 것은 어렵거나 불가능하다고 생각합니다. 사용자가 완전한 기능(렌더링, 복사, 복제, 직렬화 등)으로 수정된 내장 재료를 원할 경우 ShaderMaterial 사용해야 한다고 생각하십니까?

_가능한 가장 멋지고 건설적이며 대립적이지 않은 방식으로 다음을 읽으십시오_ :)

@takahirox 왜 계속 청구되는 건가요?

해킹된 자료를 직렬화하는 것이 어렵거나 불가능하다고 생각합니다.

당신이 재료 "해킹"하면 onBeforeCompile 당신은 다른 물질과 동일한 유니폼을 추가합니다. 다른 점이 없다. material.color 직렬화할 수 있다면 왜 material.userData.myColor 를 직렬화할 수 없습니까?

나는 싸움을 시작하려고 하지 않습니다, 텍스트의 벽 또는 무엇이든. 가장 간단하고 짧은 용어로 설명하거나 적어도 그것이 불가능하거나 어려운 이유에 대해 올바른 방향을 알려 주시겠습니까? 나는 명백한 것을 놓치고 있다는 가능성에 열려 있지만, 만약 그렇다면 그것이 무엇인지 이해하고 싶습니다 :)

Articles 에 의해 생성된 아주 작은 샘플에서 이 실험 은 사람들이 ShaderMaterial 접근 방식을 사용하고 싶어하지 않는 것 같습니다.

이게 딱 떠올랐나요? 이것이 어렵거나 불가능하다는 것을 증명하는 일종의 테스트가 있습니까? 좋다:

runSerializationTest( someMaterialWithOnBeforeCompile ).expect( something )

onBeforeCompile 메소드에는 매우 임의의 코드가 포함될 수 있으므로 해당 콜백을 강력하게 직렬화하는 것은 확실히 불가능합니다. 예를 들어 메서드는 동기식 XMLHttpRequest를 만들고 결과로 무언가를 할 수 있습니다. 😂

그러나... 실제로 사용되는 방식(셰이더를 패치하기 위해)에 대해서는 불가능하지 않다는 데 동의합니다. 그러나 쉬운 API(예: fn.toString() )는 해키하고 강력한 API는 더 복잡합니다.

나는 아직도 그 문제를 이해하지 못한다. 이 관점은 어떻습니까?

MeshPhongMaterial 있고 MeshStandardMaterial 가 없는 rN 을 가져옵니다.

MeshPhongMaterial 직렬화할 수 있습니다. 다음과 같이 JSON을 작성하십시오.

{
  color: 'red',
  specular: 'very',
  glossy: 'not much'
}

두 가지 재료가 모두 있는 rN+1 을 가져옵니다.

여전히 같은 방식으로 둘 다 직렬화할 수 있습니다.

//phong
{
  color: 'red',
  specular: 'very',
  glossy: 'not much'
}

//standard
{
  color:'red',
  shininess: 'shiny',
  metalness: 'not much'
}

MeshStandardMaterial 에서 GLSL을 직렬화한 곳이 없습니다.

같은 방식으로 확장된 자료를 직렬화합니다.

//extended PhongMaterial
{
   color: 'red',
   specular: 'very',
   glossy: 'not much',
   hamburger: 'medium rare'
}

역직렬화:

if ( data.userData.hamburger && HamburgerPhongMaterial )
   mat = new HamburgerPhongMaterial( data ) 
else{ 
   console.warn(`I'm terribly sorry, but you don't have the HamburgerPhongMaterial extension, using default fallback`)
   mat = new PhongMaterial( data ) 
}

내가 여기서 무엇을 놓치고 있습니까?

onBeforeCompile ... 해당 콜백을 직렬화하십시오.

왜, 왜 당신은 그것을 고려하시겠습니까 :) 이것이 내 혼란의 핵심이라고 생각합니다. 왜 이 훅에 대한 생각이 주어지는지, 그것은 물질적 정의, 설명 등의 일부가 아닙니다. 데이터가 아닌 엔진, 플러그인, 앱 등과 관련이 있습니다.

위에서 제공한 예제는 나에게 괜찮아 보입니다. 재료를 역직렬화하는 사용자 코드가 HamburgerPhongMaterial의 존재에 대해 알고 있으면 됩니다. 나는 그것에 대해 아무런 문제가 없습니다. #14099와 유사한 접근 방식을 취하고 toJSON 및 fromJSON을 재정의하면 반드시 API 변경이 필요하지 않습니다.

여기서 @takahirox 의 질문을 다르게 해석한

... .onBeforeCompile()로 해킹된 자료를 직렬화하는 것은 어렵거나 불가능합니다. 사용자가 전체 기능(렌더링, 복사, 복제, 직렬화 등)으로 수정된 내장 재료를 원할 경우 ShaderMaterial을 사용해야 한다고 생각하십니까?

나는 그것을 분리하려고 노력할 것이다.

• 사용자가 onBeforeCompile 의해 수정된 GLSL이 있는 일반 MeshStandardMaterial에서 toJSON()을 호출하면 GLSL에 대한 변경 사항이 자동으로 직렬화되지 않습니다.
• 사용자가 GLSL에 대한 변경을 나타내는 몇 가지 추가 속성으로 MeshStandardMaterial을 직렬화하고 이러한 추가 속성으로 무엇을 해야 하는지 알고 있는 사용자 정의 코드로 로드하면 확실히 문제가 없습니다.
• 다양한 다른 옵션(ShaderMaterial, NodeMaterial, glTF의 KHR_techniques_webgl , ...)은 임의의 사용자 정의 재료를 직렬화하는 데 사용할 수 있습니다.

만약 우리가 이야기하고 있는 사건이 그 중 하나가 아니라면, 제가 여기서 오해하고 있는 것 같습니다. 이것이 #14099에 관한 것이라면 나는 (여전히) 그것을 병합하는 데 찬성합니다.

흠, 나는 처음 두 가지를 실제로 구별하지 못했습니다. 유니폼이 필요하지 않은 것을 생각하려고 합니다. 예를 들어 gl_FragColor.xyz /= gl_FragColor.a; 일 수 있습니다. 그러나 나는 이와 같은 것을 직렬화하려는 시나리오를 상상할 수 없습니다( 자료와 함께? ). 머티리얼 데이터가 아닌 어떤 이펙트 렌더러의 범위에 들어갈 것 같습니다.

materials = loadSerializedMaterials()

effect = new Effect()

effect.load( 'alphaDivide').then(()=>materials.forEach(mat.onBeforeCompile = effect.getOnBeforeCompile('alphaDivide')))

두 번째 예는 내가 항상 염두에 두었던 것입니다. 다양한 입력과 함께 userData.extension === 'hamburger' 대한 힌트를 직렬화하십시오.

제가 글을 잘 못썼나 봅니다. 내가 언급하고 싶었던 것은

• .onBeforeCompile() 로 해킹된 빌트인 머티리얼은 빌트인 머티리얼과 동일한 API에서 올바르게 복사, 복제, 직렬화되지 않습니다'. 해킹되지 않은 자료로 취급됩니다.
• 사용자가 올바른 결과를 원하면 사용자 측에서 약간의 추가 작업이 필요합니다.
• 사용자가 사용자 측 추가 작업 없이 Three.js 핵심 API가 포함된 해킹된 내장 자료를 원하는 경우 ShaderMaterial 와 같은 다른 옵션을 고려해야 합니다.

내 질문은 특정 사례가 아니라 .onBeforeCompile() 정책에 대한 것입니다. 제한 사항을 명확히 하고 문서에 메모를 추가하고 싶었습니다.

three.js와 전체 ​​렌더링 시스템을 잊어버리면 요점을 알 수 있을 것 같습니다. 일반 개체로서 .clone() 있으면 복제할 수 있고 일관된 기대치를 가질 수 있습니다. 문제는 두 솔루션(복제하지 않고 복제)에 유효한 인수가 있는 것 같습니다. 리스너를 복제하지 않지만 드로잉에 영향을 주는 무언가가 일관성을 유지하기를 어느 정도 기대합니다.

다른 영역에서 동일한 문제가 발생했기 때문에 위에서 제안한 제안이 유효한 방법이라고 생각합니다(예: 대상 간에 깊이 버퍼를 공유하는 것도 ownThing || outsideThing 로 해결할 수 있음).

작동하지 않는 함수를 캐싱하는 대신 기본적으로 userData 를 캐싱하지만 그 일부를 캐싱합니다. userData.hamburger: 'rare' 를 캐시하는 것은 의미가 없지만 userData.effectOn: true". The 캐시합니다. ownInput | 소유 청크 | ownWhatever`가 이 문제를 해결할 것입니다.

또한 다음 문제를 해결합니다.

onBeforeCompile 메서드는 매우 임의의 코드를 포함할 수 있으므로 해당 콜백을 강력하게 직렬화하는 것은 확실히 불가능합니다.

오랜 시간 동안 사람들은 onBeforeCompile 를 사용했습니다. 이제 거기에서 어떤 종류의 임의 코드를 찾을 수 있는지 알아야 합니다. 전달된 shader 개체에서만 작동한다고 생각합니다. 해당 개체를 변경하지만 ShaderMaterial 의미가 있는 돌연변이만 어쨌든 영향을 미칩니다. gl 직접 설정하는 것은 아마도 무시될 것이며, 그것이 내 마음에 떠오르는 유일한 것입니다.

그것은 본질적으로의 pre three parse 는 필수와 함께 쉐이더 자신을 구문 분석 할 수있는 기회를 얻는 단계, uniforms:{} 당신이 그것을 가능하지 않기 때문에, 인터페이스를 Material ( defines:{} 다른 한편으로는 ShaderMaterial 형제자매입니다.

어떻게 하는지, 즉 임의의 코드가 무엇이든 상관없습니다. 아무 것도 반환하지 않지만 shader:{} 하고 렌더러가 이를 사용합니다.

내가 제안하는 접근 방식:

1. 다양한 클래스에 ownThing 를 추가합니다. THREE.WebGLRenderTarget 에는 .ownStencilDepthBuffer 가 있을 수 있습니다. 여기에서 위에서 제안한 대로 ownGLSL:{} ownInput | ownUniforms 일부 버전이 될 것입니다. shader:{} 개체를 변경하기 위해 임의의 코드가 필요하지 않습니다.

WebGLRenderer (슈퍼 프라이빗) 내부에서 다음과 같은 입력이 주어지면:

const shader = {
  uniforms: buildFromMaterial(mat),
  vs: getVSTemplate(key),
  fs: getFSTemplate(key)
}

핵무기:

shader = onBeforeCompile( shader )

shader.vs //invalid GLSL
shader.uniforms //you got some extra ones that onBeforeCompile may have mutated, maybe removed some others

shader = ___parse(shader) //private step

shader.vs //valid glsl, (not a template)

compile(shader)

이것을 사용하십시오:

function parseShader(shader){
   return {
     uniforms: shader.uniforms,
     vs: parseChunks(shader.vs)
     fs: parseChunks(shader.fs)
   }
}
//FIX FOR HASHING BUG
function parseChunk( material, chunkName ){
  return material.ownChunks[chunkName] || THREE.ShaderChunks[chunkName]
}

//do whatever you want with the templates, maybe remove an `#include <>`
shader = onBeforeParse(shader)

shader.vs //template || valid glsl

shader = parseShader(shader) //sample OWN || PRIVATE 

shader.vs //valid GLSL 

//if you want to apply a regex on the entire valid glsl, or compile node material or something else
shader = onBeforeCompile( shader )

compile(shader)

1. WebGLRenderer 가 ShaderMaterial 이외의 다른 정보를 알지 못하게 합니다.

어디에 있든

const mat = new THREE.MeshBasicMaterial()
const sm = new THREE.ShaderMaterial()

가지다

const mat = nodeMaterial.compile() //returns ShaderMaterial, with a friendly interface (same as StandardMaterial for example)

const mat = chunkMaterial.compile()

는 TL : 물건의 박사는 위의 "컴파일"(구문 분석)이 발생하면 시간에 특정 지점에 대해 신경 쓰지 않는 사용자입니다. 나는 그들이 무슨 일이 일어나는지에 대해 더 신경을 쓴다고 생각하고, 일어나는 일은 in: shaderString, out: shaderString 단일 사용 사례가 아니라면 소수로 분리될 수 있습니다. 파이프라인의 특정 지점에서 수행되어야 하는 이유는 조사하고 이해할 가치가 있다고 생각합니다. 도움을 주기보다는 오히려 방해가 되는 것 같습니다.

@mrdoob .onBeforeCompile() 해킹된 자료를 직렬화하는 것은 어렵거나 불가능하다고 생각합니다. 사용자가 완전한 기능(렌더링, 복사, 복제, 직렬화 등)으로 수정된 내장 재료를 원할 경우 ShaderMaterial 사용해야 한다고 생각하십니까?

나는 onBeforeCompile() 이 직렬화될 것이라고 (고려하지 않았다)...

방금 onBeforeCompile을 사용하여 심하게 물렸습니다. 정의된 방식으로 내장 셰이더를 수정할 수 있는 셰이더 도우미 클래스가 있습니다. 이를 위해 onBeforeCompile 메서드를 사용합니다. 분명히 첫 번째 주석에서 언급했듯이 WebGLProgram은 onBeforeCompile.toString()을 해시로 사용합니다. 그러나 내 함수는 일반적이기 때문에(꼭짓점 및 조각 셰이더의 일부를 변수로 대체함) onBeforeCompile.toString()은 다른 셰이더에 대해 다르게 보이지 않습니다. 이것은 모든 다른 셰이더가 동일한 프로그램으로 캐시되었음을 의미합니다. 평가 호출과 uuid 및 이제 내 기능이 모두 다르게 보입니다. 이것을 알아내는 데 영원히 걸렸습니다.

@donaldr https://github.com/mrdoob/three.js/issues/13192를 참조

평가판을 어떻게 사용하고 있는지 공유할 수 있습니까? 나는 그것에 대해 생각했지만 너무 더러운 것 같았습니다. 기본적으로 const fdscxnmdrek435rkjl 를 본문 맨 위에 추가한 다음 평가할 수 있습니까?

이것은 모든 다른 셰이더가 동일한 프로그램으로 캐시되었음을 의미합니다. 평가 호출과 uuid 및 이제 내 기능이 모두 다르게 보입니다. 이것을 알아내는 데 영원히 걸렸습니다.

매우 답답하게 들립니다. 죄송합니다. 😞 수정해야 하는 사항이 라이브러리 자체에서 의미가 있는 것처럼 보이면 문제를 여는 것도 환영합니다.

오픈 이슈도 환영합니다.

기존의 것을 다시 여는 것을 고려하시겠습니까? #13192 같은 것 같지만 닫혀 있었다 :crying_cat_face: 기능으로 간주된다면 해결 방법이 거기에 게시되면 정말 좋을 것입니다.

흠...

const _obc = shader => {...}
const obc = `
function (shader){
  const _${ hash() }
  ${ _obc.toString() }
  _obc(shader)
}
`
material.onBeforeCompile = eval(obc)

^^ 이게 효과가 있을까요? eval 사용한 적이 없습니다.

#17567을 통한 Material.customProgramCacheKey() 의 도입은 이제 개발자가 조건문과 함께 onBeforeCompile() 를 통해 수정된 머티리얼에 대해 셰이더 프로그램이 공유되지 않을 가능성을 보장합니다.

새 스레드(예: #13446)의 onBeforeCompile() 컨텍스트에서 다른 기존 문제 또는 개선 사항에 대해 논의하십시오.