RenderTarget作为新纹理只返回黑白纹理

Question

RenderTarget作为新的纹理第2部分:如果我给一个平面一个着色器，并将一个纹理传递给它，那么渲染工作就像它应该做的那样。然后我看到一架飞机，它的纹理被传递给了阴影，太棒了。

但是，如果我试图通过renderTarget输出这个结果为一个新的纹理，我就会得到一个黑白纹理。

谁知道为什么？

var camera, controls, scene, renderer, container, aspect;

var textureCamera
var textureScene;
    
function main() {
init();
animate();
}

function init() {

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio ); 
    renderer.shadowMap.enabled = true; 
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.setClearColor( 0x000000 );  
    container = document.getElementById('container');
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild( renderer.domElement );

    aspect = container.clientWidth / container.clientHeight; 
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );
    
    camera = new THREE.PerspectiveCamera( 60, container.clientWidth / container.clientHeight, 1, 1000000 );
    camera.position.set(0, 0, 200);

    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.enableZoom = true;
    controls.enabled = true;
    controls.target.set(0, 0, 0);
    
    //-------------

    const loader = new THREE.TextureLoader();
    var texture = loader.load("pz.png");   //fine 
    //texture = generateTexture(); //returns a black and white texture 
    const geometry = new THREE.PlaneGeometry( 50, 50 );
    const material = customShader(texture);
    const plane = new THREE.Mesh( geometry, material); 
    scene.add( plane );

}//-------End init----------


function animate() {

    requestAnimationFrame( animate );  
    render();
    
}//-------End animate----------

function render() {
    
    //renderer.render(textureScene, textureCamera);   //for test, it works correct 

    camera.updateMatrixWorld();
    camera.updateProjectionMatrix(); 
    renderer.render(scene, camera); 

}//-------End render----------


function generateTexture() {

    var resolution = 2000;
    textureScene = new THREE.Scene();
    textureScene.background = new THREE.Color(0xFFFFFF);

    var textureOptions = { 
        format: THREE.RGBFormat,
        magFilter: THREE.LinearFilter,
        minFilter: THREE.LinearFilter,
    };

    var renderTarget = new THREE.WebGLRenderTarget(resolution, resolution, textureOptions);
    textureCamera = new THREE.PerspectiveCamera(60, 1, 0.1, 100000.0);
        
    textureCamera.position.set(0, 0, 200);
    textureCamera.lookAt(0, 0, 0);

    const loader = new THREE.TextureLoader();
    var texture = loader.load("pz.png");
    const geometry = new THREE.PlaneGeometry( 50, 50 );
    const material = customShader(texture);
    const plane = new THREE.Mesh( geometry, material); 
    textureScene.add( plane );

    renderer.setRenderTarget( renderTarget );
    renderer.clear(); 
    renderer.render( textureScene, textureCamera );
    
    renderer.setRenderTarget(null);
    return renderTarget.texture;
}


function customShader(texture){

    var Vertex =`
    varying vec2 vUv;
    void main() {
        vUv = uv;
        vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewPosition;
    }`;
    
    var Fragment =`

    uniform sampler2D tex;
    varying vec2 vUv;
    void main() {
        vec4 color = texture2D(tex, vUv);
        gl_FragColor = color;
    }`;
    
    var uniforms = {   
        tex: { value: texture }
    };  
            
    return Shader = new THREE.ShaderMaterial({              
        uniforms: uniforms,         
        vertexShader: Vertex,
        fragmentShader: Fragment,   
        //transparent: true,
        side: THREE.DoubleSide,
    }); 

}

Answer 1

根据上面的代码，我在第二个场景中记录了土星环的纹理，然后将它投影到主场景中的一个球体上。结果和我想象的完全一样。但是，所有内容都已完成的整个代码相当广泛。还有土星后面光环上的阴影，土星的质地和散射的大气。土星和光环上的阴影取决于土星围绕太阳的位置。整件事都在不断更新。像第一张照片中那样，环影单独出现在土星上的代码并不太大。我以前从没做过小提琴。如果有人对代码感兴趣，我很高兴在这里得到关于如何集成可执行代码的建议。

​

​

​

​

Answer 2

问题是，在呈现到呈现目标之前，您必须等待纹理被实际加载。我已经更新了您的代码，因此它使用了异步/等待语法来解决这个问题。特别是看看generateTexture()是如何被改变的。

​

let camera, scene, renderer;

init().then(animate);

async function init() {

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setClearColor(0x000000);
  document.body.appendChild(renderer.domElement);

  const aspect = window.innerWidth / window.innerHeight;
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  camera = new THREE.PerspectiveCamera(60, aspect, 1, 1000000);
  camera.position.set(0, 0, 200);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);

  //-------------

  const texture = await generateTexture();
  const geometry = new THREE.PlaneGeometry(50, 50);
  const material = customShader(texture);
  const plane = new THREE.Mesh(geometry, material);
  scene.add(plane);

} //-------End init----------


function animate() {

  requestAnimationFrame(animate);
  render();

} //-------End animate----------

function render() {

  renderer.render(scene, camera);

} //-------End render----------


async function generateTexture() {

  const resolution = 2000;
  const textureScene = new THREE.Scene();
  textureScene.background = new THREE.Color(0xFFFFFF);

  const renderTarget = new THREE.WebGLRenderTarget(resolution, resolution);
  const textureCamera = new THREE.PerspectiveCamera(60, 1, 0.1, 100000.0);

  textureCamera.position.set(0, 0, 200);
  textureCamera.lookAt(0, 0, 0);

  const loader = new THREE.TextureLoader();
  const texture = await loader.loadAsync("https://threejs.org/examples/textures/uv_grid_opengl.jpg");
  const geometry = new THREE.PlaneGeometry(50, 50);
  const material = customShader(texture);
  const plane = new THREE.Mesh(geometry, material);
  textureScene.add(plane);

  renderer.setRenderTarget(renderTarget);
  renderer.clear();
  renderer.render(textureScene, textureCamera);

  renderer.setRenderTarget(null);
  return renderTarget.texture;
}


function customShader(texture) {

  const Vertex = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewPosition;
    }`;

  const Fragment = `

    uniform sampler2D tex;
    varying vec2 vUv;
    void main() {
        vec4 color = texture2D(tex, vUv);
        gl_FragColor = color;
    }`;

  const uniforms = {
    tex: {
      value: texture
    }
  };

  return Shader = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: Vertex,
    fragmentShader: Fragment
  });

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/controls/OrbitControls.js"></script>

​