three.js needsUpdate 方法

Posted 2021-01-05 可爱的黑精灵

本篇介绍Material类中的needsUpdate方法。Geometry中类似的update方法可以类推。

问题提出

function render() {
    
    material.map = canvasMap;
    material.map.needsUpdate = true;
    
}

我想实时的更新材质(material)的贴图(map)，所以我在render函数中为material赋值并将needsUpdate设为true。
后来跑着跑着页面挂了，我发现这个赋值操作很占GPU，我在找解决方案的时候发现这玩意不需要赋值操作！！！

needsUpdate设为true它会实时的检测贴图是否更新，并更新贴图。

needsUpdate

step1

首先转跳到three.js中

THREE.Texture.prototype = {

    constructor: THREE.Texture,

    set needsUpdate( value ) {      // value = true;

        if ( value === true ) this.version ++;  //this.version ++ 变为了1;

    }
    
    }

step2

这个version = 1有什么用我们继续看
由于是Texture 调用了WebGLTextures。

THREE.WebGLTextures = function ( _gl, extensions, state, properties, capabilities, paramThreeToGL, info ) {
    
    
}

接着我们发现WebGLTextures中setTexture2D setTextureCube这两个函数用到了version所以我们先看setTexture2D。

• setTexture2D() 删减版

    
    //  参数`texture`就是前面的`THREE.Texture`
    
    function setTexture2D( texture, slot ) {
           
        // 这里 `texture.version = 1`

        if ( texture.version > 0 && textureProperties.__version !== texture.version ) {

            // 替换图片
            
            var image = texture.image;

                uploadTexture( textureProperties, texture, slot );
                return;

            }

        }

• uploadTexture() 用来更新纹理