文章/答案/技术大牛

发布

社区首页 >问答首页 >当更新数据纹理统一时，所有点都转到0,0。

问当更新数据纹理统一时，所有点都转到0,0。
EN

Stack Overflow用户

提问于 2017-01-06 21:18:48

回答 1查看 90关注 0票数 0

当用户点击时，我正在交换新的位置数据，以形成点云(在高云和宽云之间交替)。我制作了这个小提琴，到目前为止我可以让云第一次正确地呈现(一个高大的云)，但是在点击事件上，所有的点位置似乎变成0,0而不是一个宽云。我错过了什么？

这里有一些检查代码片段：

function makeCloud() {

    var cloudWidth, cloudHeight;

    if ( isTallCloud ) {
        cloudHeight = 100;
        cloudWidth = 25;
    } else {
        cloudHeight = 25;
        cloudWidth = 100;
    }

    isTallCloud = !isTallCloud;

    var positions = new Float32Array( particles * 4 );
    var offsets = new Float32Array( particles * 4 );

    for ( var i = 0, i4 = 0; i < particles; i ++, i4 +=4 ) {

        positions[ i4 + 0 ] = ( Math.random() * 2 - 1 ) * cloudWidth; // x
        positions[ i4 + 1 ] = ( Math.random() * 2 - 1 ) * cloudHeight; // y
        positions[ i4 + 2 ] = 0.0; // velocity
        positions[ i4 + 3 ] = 0.0; // velocity

        offsets[ i4 + 0 ] = positions[ i4 + 0 ]; // width offset
        offsets[ i4 + 1 ] = positions[ i4 + 1 ]; // height offset
        offsets[ i4 + 2 ] = stateChange; // this will hold the change state ( 0.0 or 1.0 )
        offsets[ i4 + 3 ] = 0.0; // not used

    }

    cloudData = {
        "positions" : positions,
        "offsets" : offsets
    }
}

function updateStateChange() {

    for ( var i = 0, i4 = 0; i < particles; i ++, i4 +=4 ) {
        cloudData.offsets[ i4 + 2 ] = stateChange; // this will hold the change state ( 0.0 or 1.0 )
    }
}

function updateOffsets() {
    offsetsTexture = new THREE.DataTexture( cloudData.offsets, width, height, THREE.RGBAFormat, THREE.FloatType );
    positionUniforms.tOffsets.value = offsetsTexture;
    positionUniforms.tOffsets.needsUpdate = true;
}

function onDocumentClick() {
    event.preventDefault();
    stateChange = 1.0;
    makeCloud();
    updateOffsets();
}

function animate() {
    requestAnimationFrame( animate );
    update();
    render(); 
}

function render() {
    renderer.render( scene, camera );
}

function update() {
    positionUniforms.uTime.value += 0.01;
    gpuCompute.compute();

    particleUniforms.tPositions.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;

    if ( stateChange === 1.0 ) {
        stateChange = 0.0;
        console.log("swapped state!");
        updateStateChange();
        updateOffsets();
    }
}

来自着色器代码的片段：

vec4 offsets = texture2D( tOffsets, uv ).xyzw;
float swapState = offsets.z;
vec4 nowPos;
vec2 velocity;

if ( swapState == 0.0 ) {
    nowPos = texture2D( tPositions, uv ).xyzw;
    velocity = vec2(nowPos.z, nowPos.w);
} else { // if swapState == 1.0
    nowPos = vec4( offsets.x, offsets.y, 0.0, 0.0 );
    velocity = vec2(0.0, 0.0);
}

背景：

我意识到，只要在点击中交换所有数据并获得我想要的结果就够容易的了；然而，我试图通过在纹理中传递这些偏移值来更新的原因是，在我的更大的程序中，有更多的点云，我只想改变选定的云(如着色器中的swapState所示)，同时让物理着色器继续控制剩余的未选定的云。更新所有的云会破坏由着色器控制的物理的连续性。

javascript

three.js

textures

shader

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-08 00:37:27

我在代码中发现了错误--缺陷在于我如何为DataTexture设置DataTexture属性。见固定小提琴这里。这是使它最终如预期那样工作的修订：

function updateOffsets() {
    offsetsTexture = new THREE.DataTexture( cloudData.offsets, width, height, THREE.RGBAFormat, THREE.FloatType );
    offsetsTexture.needsUpdate = true; // **using this way of updating the texture produced the behavior I expected
    positionUniforms.tOffsets.value = offsetsTexture;
    // positionUniforms.tOffsets.needsUpdate = true; **this form of updating caused the faulty behavior
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41514510

复制

相似问题

问当更新数据纹理统一时，所有点都转到0,0。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当更新数据纹理统一时，所有点都转到0,0。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当更新数据纹理统一时，所有点都转到0,0。
EN