Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
544 views
in Technique[技术] by (71.8m points)

javascript - 在某些情况下,A帧缓冲区几何合并似乎会转移实体(A-Frame buffer-geometry-merger seems to shift entities in some cases)

I have a simple case of a A-Frame scene using the buffer-geometry-merger component , which seems to work well when writing entities in static HTML, but not when the same entities are injected in the DOM by building a A-Frame component: in this case, the geometry seems to be shifted, as if the position of the parent were applied (again) to the merged entity, even when its position is (0,0,0) with respect to its parent.

(我有一个使用buffer-geometry-merger组件的A-Frame场景的简单案例,当以静态HTML编写实体时,它似乎工作得很好,但是当通过构建A-Frame组件将相同的实体注入DOM中时,这似乎效果很好:在这种情况下,即使父对象的位置相对于父对象为(0,0,0),也似乎将几何图形移动了,就好像父对象的位置(再次)应用于合并实体。)

The HTML file is:

(HTML文件是:)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-geometry-merger-component/dist/aframe-geometry-merger-component.min.js"></script>
    <script src="cubes-buffer-min.js"></script>

  </head>
  <body>
    <a-scene renderer="colorManagement: true;" stats>

      <a-box position="-5 0 -3"></a-box>
      <a-box position="-10 0 -3"></a-box>

      <a-entity test position="-5 0 0">
      </a-entity>

      <a-entity position="-5 0 3">
        <a-entity buffer-geometry-merger>
          <a-entity geometry="primitive: box" position="0 0 0"></a-entity>
        </a-entity>
      </a-entity>

      <a-entity camera position="0 15 0" rotation="-90 0 0"></a-entity>
    </a-scene>
  </body>
</html>

The JavaScript file defining the test A-Frame component (included from the above HTML file) is:

(定义test A-Frame组件的JavaScript文件(包含在上述HTML文件中)为:)

AFRAME.registerComponent('test', {

  init: function () {
    let base = document.createElement('a-entity');
    base.addEventListener('loaded', (e) => {
      base.setAttribute('buffer-geometry-merger', {});
    });
//    setTimeout(function() {
//      base.setAttribute('buffer-geometry-merger', {});
//    }, 2000);
    let box = document.createElement('a-entity');
    box.setAttribute('geometry', {buffer: true, primitive: 'box'});
    box.setAttribute('position', {x: 0, y: 0, z: 0});
    base.appendChild(box);
    this.el.appendChild(base);
  },
});

When loaded in the browser, you can see how the "static" box appears where it is expected, in (-5,0,3), but the dynamic one (the one injected by the test component) appears shifted to the left, in (-10,0,0).

(在浏览器中加载后,您可以在(-5,0,3)中看到“静态”框的位置,但动态框(由test组件注入的框)向左移动,在(-10,0,0)中。)

The first two boxes in (-10,0,-3) and (-5,0,-3) are just for reference.

((-10,0,-3)和(-5,0,-3)中的前两个框仅供参考。)

I included the commented out timer code to illustrate what happens.

(我包括注释掉的计时器代码以说明会发生什么。)

If you disable the 'loaded' event listener, and uncoment the timer code, you can see how the dynamic box is located in the right place, but then the timer fires, and the buffer-geometry-merger is added, the box is "shifted" to the wrong place.

(如果您禁用了“已加载”事件侦听器,并且未输入计时器代码,则可以看到动态框位于正确位置的方式,但是计时器将触发,并添加buffer-geometry-merger ,该框为“转移到错误的位置。)

In this screenshot, white boxes are for reference, purple box is the dynamic one, blue box is the static one:

(在此屏幕截图中,白色框仅供参考,紫色框是动态框,蓝色框是静态框:)

在此处输入图片说明

Any idea about what is happening, or how to fix this behavior?

(关于正在发生的事情或如何解决此行为的任何想法?)

  ask by jgbarah translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

From what I gather, in Your case:

(根据我的收集,就您而言:)

// pseudo code, before the merge is done
<a-entity test position='-5 0 0'
   <a-entity base buffer-geometry-merger
       <a-entity box

1) The merger is creating a clone of the box using it's world matrix ( source ).

(1)合并是使用盒子的世界矩阵( )创建盒子的克隆。)


2) Then it combines the geometries (here only the box) into a single mesh which is used as the base mesh ( source ).

(2)然后将几何图形(这里仅是框)组合成一个网格,用作基础网格( )。)

But hey, the base already is shifted by -5 0 0 due to its parent !

(但是,嘿,由于其父级, 基数已经偏移了-5 0 0 !)

So actually, the world matrix is applied twice.

(因此,实际上,世界矩阵被应用了两次。)


Why isn't it happening with a setup like this:

(为什么这样的设置没有发生这种情况:)

var worldPos = new THREE.Vector3();
worldPos.setFromMatrixPosition(this.el.object3D.matrixWorld);
console.log('not loaded', worldPos) // looks like the parent(s) transforms are ignored
base.addEventListener("loaded", e => {
   worldPos.setFromMatrixPosition(this.el.object3D.matrixWorld);
   console.log('loaded', worldPos) // this seems to give a proper value
});

Quite identical, isn't it ?

(完全一样,不是吗?)

Apparently not, because here the merge is done before the parent transform is applied.

(显然不是,因为这里合并是在应用父变换之前完成的。)

You can verify this by logging (done on the entity with the merger component):

(您可以通过登录(在带有合并组件的实体上完成)进行验证:)

 var worldPos = new THREE.Vector3(); worldPos.setFromMatrixPosition(this.el.object3D.matrixWorld); console.log('not loaded', worldPos) // looks like the parent(s) transforms are ignored base.addEventListener("loaded", e => { worldPos.setFromMatrixPosition(this.el.object3D.matrixWorld); console.log('loaded', worldPos) // this seems to give a proper value }); 

The component is not waiting until the node is loaded - so in the "static" case it seems to work properly.

(该组件不会等到节点加载完毕-因此,在“静态”情况下,它似乎可以正常工作。)


I don't think the component is supposed to work properly when the entity is being nested, or itself having nested entities.

(我认为当实体被嵌套或本身具有嵌套实体时,该组件不应正常工作。)

Most examples I found have simple layout:

(我发现的大多数示例都具有简单的布局:)

 <a-entity buffer-geometry-merger <a-box <a-sphere ..... 

The simplest solution is to subtract the parents transform from the merged one.

(最简单的解决方案是从合并后的转换中减去父转换。)

In Your case:

(在您的情况下:)

 // test component, after setting the merge component: let mtx = new THREE.Matrix4() mtx.getInverse(this.el.object3D.matrix) base.object3D.applyMatrix(mtx) 

Something just like this .

(事情就像这样 。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...