>

시간이 지나면 일부 텍스처를 업데이트하고 싶은 Three.js 장면에서 작업하고 있습니다. 그러나 텍스처 업데이트가 매우 느리다는 것을 발견하고 FPS를 몇 초 동안 1-2 FPS로 드래그합니다 (단일 텍스처 만 업데이트 할 때).

텍스처 업데이트를 촉진하기 위해 할 수있는 일이 있습니까? 이 질문에 대해 다른 사람들이 제공 할 수있는 통찰력은 대단히 감사하겠습니다.

이 동작을 보려면 아래 예의 창을 클릭하십시오. 그러면 첫 번째 텍스처 업데이트가로드됩니다 (또 다른 클릭은 두 번째 텍스처 업데이트를 트리거합니다). 이러한 클릭 중 하나를 확대 한 후 화면이 멈 추면 FPS가 크게 떨어집니다. 누구든지이 문제를 해결하는 방법을 알고 있습니까?

<html>
<head>
  <style>
  html, body { width: 100%; height: 100%; background: #000; }
  body { margin: 0; overflow: hidden; }
  canvas { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js'></script>
  <script src='https://rawgit.com/YaleDHLab/pix-plot/master/assets/js/trackball-controls.js'></script>
  <script src='https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js'></script>
    <script type='x-shader/x-vertex' id='vertex-shader'>
    precision highp float;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    uniform vec3 cameraPosition;
    attribute vec3 position; // sets the blueprint's vertex positions
    attribute vec3 translation; // x y translation offsets for an instance
    attribute float texIdx; // the texture index to access
    varying float vTexIdx;
    void main() {
      // set point position
      vec3 pos = position + translation;
      vec4 projected = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      gl_Position = projected;
      // assign the varyings
      vTexIdx = texIdx;
      // use the delta between the point position and camera position to size point
      float xDelta = pow(projected[0] - cameraPosition[0], 2.0);
      float yDelta = pow(projected[1] - cameraPosition[1], 2.0);
      float zDelta = pow(projected[2] - cameraPosition[2], 2.0);
      float delta  = pow(xDelta + yDelta + zDelta, 0.5);
      gl_PointSize = 40000.0 / delta;
    }
    </script>
    <script type='x-shader/x-fragment' id='fragment-shader'>
    precision highp float;
    uniform sampler2D a;
    uniform sampler2D b;
    varying float vTexIdx;
    void main() {
      int textureIndex = int(vTexIdx);
      vec2 uv = vec2(gl_PointCoord.x, gl_PointCoord.y);
      if (textureIndex == 0) {
        gl_FragColor = texture2D(a, uv);
      } else if (textureIndex == 1) {
        gl_FragColor = texture2D(b, uv);
      }
    }
    </script>
  <script>
  /**
  * Generate a scene object with a background color
  **/
  function getScene() {
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xaaaaaa);
    return scene;
  }
  /**
  * Generate the camera to be used in the scene
  **/
  function getCamera() {
    var aspectRatio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 100000);
    camera.position.set(0, 1, -6000);
    return camera;
  }
  /**
  * Generate the renderer to be used in the scene
  **/
  function getRenderer() {
    // Create the canvas with a renderer
    var renderer = new THREE.WebGLRenderer({antialias: true});
    // Add support for retina displays
    renderer.setPixelRatio(window.devicePixelRatio);
    // Specify the size of the canvas
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add the canvas to the DOM
    document.body.appendChild(renderer.domElement);
    return renderer;
  }
  /**
  * Generate the controls to be used in the scene
  **/
  function getControls(camera, renderer) {
    var controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.zoomSpeed = 0.4;
    controls.panSpeed = 0.4;
    return controls;
  }
  /**
  * Generate the points for the scene
  **/
  function addPoints(scene) {
    var BA = THREE.BufferAttribute;
    var IBA = THREE.InstancedBufferAttribute;
    var geometry  = new THREE.InstancedBufferGeometry();
    // add data for each observation
    var n = 10000; // number of observations
    var rootN = n**(1/2);
    var cellSize = 20;
    var translation = new Float32Array( n * 3 );
    var texIdx = new Float32Array( n );
    var translationIterator = 0;
    var texIterator = 0;
    for (var i=0; i<n*3; i++) {
      var x = Math.random() * n - (n/2);
      var y = Math.random() * n - (n/2);
      translation[translationIterator++] = x;
      translation[translationIterator++] = y;
      translation[translationIterator++] = Math.random() * n - (n/2);
      texIdx[texIterator++] = (x + y) > (n/8) ? 1 : 0;
    }
    var positionAttr = new BA(new Float32Array( [0, 0, 0] ), 3);
    var translationAttr = new IBA(translation, 3, 1);
    var texIdxAttr = new IBA(texIdx, 1, 1);
    positionAttr.dynamic = true;
    translationAttr.dynamic = true;
    texIdxAttr.dynamic = true;
    geometry.addAttribute('position', positionAttr);
    geometry.addAttribute('translation', translationAttr);
    geometry.addAttribute('texIdx', texIdxAttr);
    var canvases = [
      getElem('canvas', { width: 16384, height: 16384, }),
      getElem('canvas', { width: 16384, height: 16384, }),
    ]
    var textures = [
      getTexture( canvases[0] ),
      getTexture( canvases[1] ),
    ];
    var material = new THREE.RawShaderMaterial({
      uniforms: {
        a: {
          type: 't',
          value: textures[0],
        },
        b: {
          type: 't',
          value: textures[1],
        }
      },
      vertexShader: document.getElementById('vertex-shader').textContent,
      fragmentShader: document.getElementById('fragment-shader').textContent,
    });
    var mesh = new THREE.Points(geometry, material);
    mesh.frustumCulled = false; // prevent the mesh from being clipped on drag
    scene.add(mesh);
    // on the first window click, paint red points
    // on the second window click, paint blue points
    var clicks = 0;
    window.addEventListener('click', function() {
      if (clicks == 0 || clicks == 1) {
        var canvas = canvases[clicks];
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = clicks == 0 ? 'red' : 'blue';
        ctx.rect(0, 0, 16384, 16384);
        ctx.fill();
        textures[clicks].needsUpdate = true;
        clicks++;
      }
    })
  }
  function getTexture(canvas) {
    var tex = new THREE.Texture(canvas);
    tex.needsUpdate = true;
    tex.flipY = false;
    return tex;
  }
  /**
  * Create an element
  **/
  function getElem(tag, obj) {
    var obj = obj || {};
    var elem = document.createElement(tag);
    Object.keys(obj).forEach(function(attr) {
      elem[attr] = obj[attr];
    })
    return elem;
  }
  /**
  * Add stats
  **/
  function getStats() {
    var stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '65px';
    stats.domElement.style.right = '5px';
    stats.domElement.style.left = 'initial';
    document.body.appendChild(stats.domElement);
    return stats;
  }

  /**
  * Render!
  **/
  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.update();
    stats.update();
  };
  /**
  * Main
  **/
  var stats = getStats();
  var scene = getScene();
  var camera = getCamera();
  var renderer = getRenderer();
  var controls = getControls(camera, renderer);
  addPoints(scene);
  render();
  </script>
</body>
</html>

  • 답변 # 1

    캔버스의 크기는 16384 x 16384입니다. 기본적으로 엄청나게 큽니다.

    RGBA 형식의 경우 1073741824 바이트입니다. texture.needsUpdate = true를 설정할 때 CPU에서 GPU로 전송되는 텍스처 데이터의기가 바이트

    이것이 카드에 업로드 된 것을 확실히 알 수 있습니다.

    유스 케이스에 절대적으로 큰 텍스처가 필요한 경우 gl.texSubImage2D를 통해 증분 업데이트를 수행하거나 더 작은 텍스처를 사용하고 프레임 당 하나만 업데이트하거나 해당 텍스처 만 업데이트해야합니다. 이후 앱이 아닌 앱의 시작입니다.

    참고로, 면당 4k를 초과하는 텍스처가 필요한 경우는 거의 없습니다.

    이것은 텍스처 크기의 약 1/16 배입니다.

    three.js btw와는 아무런 관련이 없습니다. GPU/CPU 상호 작용의 기본 특성입니다. 업로드 및 상태 변경이 느리고 신중하게 조정하고 모니터링해야합니다.

  • 이전 c# - mvc net ADO> NET 공급자가 등록되지 않았거나로드 할 수 없습니다
  • 다음 hashmap - Java에서 키를 기준으로 정렬하는 방법은 무엇입니까?