zoukankan      html  css  js  c++  java
  • 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 ) {
        
        
    }
    
    
    

    接着我们发现WebGLTexturessetTexture2D 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() 用来更新纹理
  • 相关阅读:
    jdbc的入门学习
    java代码生成Excel文件3000条自定义属性的的域账户名
    java面试题
    node图片资源捉取
    运用node真机调试移动web项目
    node读取文件转换json文件
    微信小程序页面导航功能
    JavaScript值全等判断
    微信小程序海报生成功能
    JavaScript常用数组操作方法,包含ES6方法
  • 原文地址:https://www.cnblogs.com/chenjy1225/p/9640570.html
Copyright © 2011-2022 走看看