The WebGLRenderTarget texture is not displayed, please help to check

Questions
1

Thank you very much.I’m having a problem with the WebGLRenderTarget that doesn’t show up when I create it

 this.cameraPara = {
      "fov": 90,
      "aspect": this.container.offsetWidth / this.container.offsetHeight,
      "near": 1,
      "far": 1000
    };

    this.RTScene = new THREE.Scene();
    this.RTcamera = new THREE.PerspectiveCamera(_this.cameraPara.fov, _this.cameraPara.aspect, 
    _this.cameraPara.near, _this.cameraPara.far);
    this.RTcamera.position.set(0.1, 1, 1);;
    var geometry = new THREE.PlaneGeometry(384, 192, 3, 3);
    const texture = new THREE.VideoTexture(video);
    texture.maxFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestFilter;
    const material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 200
    this.RTScene.add(mesh);
    const RenderTarget = this.RenderTarget = new THREE.WebGLRenderTarget(
      3840,
      1920,
    );

   var scene = this.scene;
    var camera = this.camera;
    const geometry = new THREE.SphereGeometry(
      30,
      32,
      32,
    );
    geometry.scale(-1, 1, 1) 
    var RenderTargettexture = this.RenderTarget.texture;
    const material = new THREE.MeshBasicMaterial({ map: RenderTargettexture, side: THREE.DoubleSide });
    material.map.needUpdate = true;
    var mesh = new THREE.Mesh(geometry, material);
    mesh.name = "vrliveBox";
    this.VRObject.add(mesh);
    this.scene.add(mesh);
    this.renderer.render(scene, camera);

 render() {
    var width = this.container.offsetWidth;
    var height = this.container.offsetHeight;
    var scene = this.scene
    var camera = this.camera
    this.renderer.setSize(width, height);
    var _this = this;
    if (this.RenderTarget !== null) {
      this.renderer.setRenderTarget(_this.RenderTarget);
      this.renderer.setClearColor(0xffddff);
      this.renderer.clear();
      this.renderer.render(_this.RTScene, _this.RTcamera)
    }
    this.renderer.setRenderTarget(null);
    this.renderer.render(scene, camera);
  }

I don’t know if there’s something wrong with the code, but it’s black in the display
I want the video to render on the SphereGeometry

If you need to provide other comments please say, I do not know WebGLRenderTarget, please forgive me

Thank you very much

2

Im sorry i can’t help, but it may be worth mentioning in the title that this is related to displaying a video. This may be slightly more complex than say just rendering some triangles into a texture because i think it can fail at two points. The texture may be rendering, but whatever was supposed to end up in the texture may not have been read if that makes sense.

3

You should render your scene, look at the camera position, adjust it, and then use it as webgl rendertarget.I think the map rendered by webgl rendertarget should be what your camera sees, so the map is black

4

Should I adjust my camera so that he can read my plane graphics

5

I think you should do this, just like you take a picture from one place, but your lens is not aimed at the object you want to take, and it will certainly not achieve the effect you want.

1 Like
6

I would like to ask, webGLRenderTarget camera, is not moving, how to fill the entire camera Angle

7

You can load the scene of planegeometry to adjust the position of the camera

8

Thank you very much， Let me try something like yours

9

I would also like to ask if the new version of THREE PlaneGeometry does not have faceVertexUvs

10

@zengyuhan503
Correct, it doesn’t have that property.
Instead, it has geometry.attributes.uv, a buffer attribute with UV coordinates per vertex.

11

image

12

How should the current version be set up， * Same as the previous version
Geometry.FaceVertexUvs [0][m] = [UV [2], UV [3], UV [1]];
Is there a good example.Sorry, I’m not familiar with this，

13 
    const max = mergeGeometry.boundingBox.max;
    const min = mergeGeometry.boundingBox.min;
    const offset = new THREE.Vector2(0 - min.x, 0 - min.y);
    const range = new THREE.Vector2(max.x - min.x, max.y - min.y);
    const uv = [];

    for (let i = 0; i < mergeGeometry.attributes.position.array.length; i += 3) {

      let u = (mergeGeometry.attributes.position.array[i] + offset.x) / range.x;

      let v = (mergeGeometry.attributes.position.array[i + 1] + offset.y) / range.y

      uv.push(u, v);

    }

    mergeGeometry.setAttribute("uv", new THREE.Float32BufferAttribute(uv, 2, true));

Like this？

1 Like
14

我能回到之前的版本的 能使用face 和WebGLrenderTarget的版本吗

15

I think you’d better not do this. The new version of three has better performance and better effect. :beers:

16
  • Sorry, because I don’t know anything about UV :joy:
17

You can try to learn about UV. :blush:

18

Thank you so much,

image
image1151×762 60.4 KB

I don’t know if my UV inside the red box is correct

19

image
image856×685 44.5 KB

image
image1126×648 98.6 KB

  • I found that each rectangle showed only part of the content
20

This seems to be the problem of UV,This case seems to help you.
https://threejs.org/examples/?q=video#webgl_materials_video