three.js needsUpdate 方法

本篇介紹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() 用來更新紋理