Camera cropped view of a planegeometry

Questions
, ,
1

I am creating a heatmap using the function below:

  createHeatmap = () => {
    const parentElement = this.containerCanvas;
    const canvasH = document.createElement('canvas');
    canvasH.id = 'heightmap';
    canvasH.width = 256;
    canvasH.height = 200;
    canvasH.style.position = 'absolute';
    canvasH.style.left = '0px';
    canvasH.style.zIndex = '9999999999';
    canvasH.style.backgroundColor = '#000000'; // Set your desired background color here

    parentElement.append(canvasH);

    const canvasG = document.createElement('canvas');
    canvasG.id = 'heightgrd';
    canvasG.width = 64;
    canvasG.height = 200;
    canvasG.style.position = 'absolute';
    canvasG.style.left = '257px';
    canvasG.style.zIndex = '9999999999';
    canvasG.style.backgroundColor = '#e33a3a'; // Set your desired background color here
    parentElement.append(canvasG);

    const ctxH = canvasH.getContext('2d');
    const ctxG = canvasG.getContext('2d');
    const heightMap = new THREE.CanvasTexture(canvasH);
    const gradientMap = new THREE.CanvasTexture(canvasG);

    this.createHeightMap(ctxH, heightMap);
    this.createGradMap(ctxG, gradientMap);
    this.setupShader(heightMap, gradientMap);



    canvasG.addEventListener("click", ()=>{
      this.createGradMap(ctxG, gradientMap);
      this.setupShader(heightMap, gradientMap);
    }, false);

    canvasH.addEventListener("click", () => {
      this.createHeightMap(ctxH, heightMap);
      this.setupShader(heightMap, gradientMap);
      if (this.selectedFloor){
        console.log(`808 -- this.floorsCache[this.selectedFloor] --->`, this.floorsCache[this.selectedFloor].size)
      }

    }, false);


  };

  createHeightMap = (ctx:any, heightMap:any) => {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 256, 256);
    for (let i = 0; i < 100; i++) {
      const x = Math.floor(Math.random() * 255);
      const y = Math.floor(Math.random() * 255);
      const radius = 50;
      const grd = ctx.createRadialGradient(x, y, 1, x, y, radius);
      const h8 = Math.floor(Math.random() * 255);
      grd.addColorStop(0, 'rgb(' + h8 + ',' + h8 + ',' + h8 + ')');
      grd.addColorStop(1, 'transparent');
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, 256, 256);
    }
    heightMap.needsUpdate = true;
    this.camera.updateMatrixWorld(true)
    this.scene.updateMatrixWorld(true)

  };

  createGradMap = (ctx:any, gradientMap:any) => {
    console.log('grad');
    const grd = ctx.createLinearGradient(0, 255, 0, 0);
    const colorAmount = 3 + THREE.MathUtils.randInt(0, 3);
    const colorStep = 1 / colorAmount;
    for (let i = 0; i <= colorAmount; i++) {
      const r = THREE.MathUtils.randInt(0, 255);
      const g = THREE.MathUtils.randInt(0, 255);
      const b = THREE.MathUtils.randInt(0, 255);
      grd.addColorStop(colorStep * i, 'rgb(' + r + ',' + g + ',' + b + ')');
    }
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 64, 256);
    gradientMap.needsUpdate = true;
    this.camera.updateMatrixWorld(true)
    this.scene.updateMatrixWorld(true)
  };

  setupShader = (canvasH:any, canvasG:any) => {

    const heatVertex = `
    uniform sampler2D heightMap;
    uniform float heightRatio;
    uniform float heightBias;
    varying vec2 vUv;
    varying float hValue;
    void main() {
      vUv = uv;
      vec3 pos = position;
      hValue = texture2D(heightMap, vUv).r;
      pos.y = hValue * heightRatio;
      pos.y += heightBias;

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

      gl_PointSize = 30. * (1. / - mvPosition.z);
      gl_Position = projectionMatrix * mvPosition;
    }
  `;
    const heatFragment = `
    uniform sampler2D gradientMap;
    varying float hValue;

    void main() {
      float v = clamp(hValue, 0., 1.);
      vec3 col = texture2D(gradientMap, vec2(0, v)).rgb;
      gl_FragColor = vec4(col, 1.) ;
    }
  `;
    // Use heightMap and gradientMap textures from canvas elements
    const planeGeometry = new THREE.PlaneGeometry(39.29856, 16.026444, 500, 500);
    planeGeometry.rotateX(-Math.PI * 0.5);
    // planeGeometry.scale(1,0.001,1)
    if(this.heat){
      this.scene.remove(this.heat)
      this.heat.geometry.dispose();
      this.camera.updateMatrixWorld(true)
      this.scene.updateMatrixWorld(true)
    }
    const heat = new THREE.Points(
      planeGeometry,
      new THREE.ShaderMaterial({
        uniforms: {
          heightMap: { value: canvasH },
          heightRatio: { value: 1},
          heightBias: { value: 0 },
          gradientMap: { value: canvasG },
        },
        side: THREE.DoubleSide,
        vertexShader: heatVertex,
        fragmentShader: heatFragment,
        depthTest: true,
        depthWrite: true,


      })
    );

    this.heat =  heat
    this.heat.renderOrder = 0
    this.heat.material.isOrthographicCamera = true
    this.camera.updateProjectionMatrix();

    heat.material.needsUpdate = true;
    this.scene.add(this.heat)
  };

when rotating the camera (OrthographicCamera) at certain angles it cuts the view

image
image1023×854 156 KB

my camera is configured this way

    this.camera = new THREE.OrthographicCamera(
      // Left
      this.cameraWidth / -2,
      // Right
      this.cameraWidth / 2,
      // Top
      this.cameraHeight / 2,
      // Bottom
      this.cameraHeight / -2,
      // Near
      -320,
      // Far
      400
    );

Could someone explain to me what could be happening please?

2

can you try near -1000 and far 1000 ?

3

Hi @manthrax, I managed to locate the problem. The shaderMaterial was being calculated incorrectly at the vertex. This occurs due to an interpretation problem in the Orthographic Camera;

Follow my updated code below

    const heatVertex = `
    uniform sampler2D heightMap;
    uniform float heightRatio;
    uniform float heightBias;
    uniform float pointSize; 
    varying vec2 vUv;
    varying float hValue;

    void main() {
        vUv = uv;
        vec3 pos = position;
        hValue = texture2D(heightMap, vUv).r;
        pos.y = (hValue * heightRatio) + heightBias;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        gl_PointSize = pointSize > 0.0 ? pointSize : 1.0;
    }
`;

    const heatFragment = `
    uniform sampler2D gradientMap;
    varying float hValue;

    void main() {
        float v = clamp(hValue, 0., 1.);
        vec3 col = texture2D(gradientMap, vec2(0, v)).rgb;

        float transparency = 1.0 - col.b;
        transparency = smoothstep(0.2, 1.0, transparency); 
        gl_FragColor = vec4(col.r, col.g, col.b, transparency);
        ;
    }
`;

Now there are some important changes, the first of which is gl_Position

 gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);

Another change is that now I pass a value per parameter to define the point size

 gl_PointSize = pointSize > 0.0 ? pointSize : 1.0;