तीन.जेएस

Question

में एनिमेटेड स्प्राइट्स के प्रदर्शन में सुधार करना अभी मैं एक ऑनलाइन गेम पर काम कर रहा हूं और प्रदर्शन कारणों से HTML5 के कैनवास की बजाय वेबग्ल का उपयोग करने का निर्णय लिया है। मैं तीन.जेएस ढांचे का उपयोग कर रहा हूं और मेरा इरादा एनिमेटेड स्प्राइट्स ले जाना है। Sprites खुद spritesheets पर रखा जाता है और मैं सही कला का उपयोग करने के लिए यूवी ऑफसेट और यूवीस्केल का उपयोग करता हूं और समय बीतने के दौरान स्प्राइट की कला को स्विच करता हूं। मैं सोच रहा था कि इस कोड के प्रदर्शन में सुधार करने का कोई तरीका है, क्योंकि अभी यह एक ही समय में मैदान पर लगभग 300 "खिलाड़ियों" पर धीमा होना शुरू कर देता है।

सादर

के बाद मेरे कोड का सबसे महत्वपूर्ण हिस्सा है:

var image = THREE.ImageUtils.loadTexture("img/idlew.png"); 

    function addPlayer(){ 
    var mesh = new THREE.Sprite({map:image});//, affectedByDistance: false, useScreenCoordinates: false}); 
    images.push(mesh); 
    mesh.position.set(Math.floor(Math.random() * 500), Math.floor(Math.random() * 500), 10); 
    scene.add(mesh); 
    mesh.uvScale.x = 96/1152; 
    mesh.scale.x = 0.1; 
    mesh.scale.y = 0.1; 
    } 


var imgBackground = new THREE.MeshLambertMaterial({ 
     map:THREE.ImageUtils.loadTexture('img/grass.jpg') 
    }); 


    var background = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000),imgBackground); 


    scene.add(background); 



    scene.add(camera); 
camera.rotation.x = -(Math.PI/2); 
scene.add(new THREE.AmbientLight(0xFFFFFF)); 

addPlayer(); 

    renderer.render(scene, camera); 
    var moveUp = false; 
    tick(); 
    var ticker = 0; 
    var usedOne = 0; 

    function tick(){ 
    ticker++; 
    if(ticker%10==0){ 
     for (var i = 0; i < images.length; i++) { 
     images[i].uvOffset.x = usedOne * 0.0835; 
     }; 
     usedOne++; 
     if(usedOne == 12) usedOne = 0; 
     addPlayer(); 
     addPlayer(); 
     addPlayer(); 
     console.log(images.length); 
    } 
    requestAnimationFrame(tick); 

     renderer.render(scene, camera); 
    } 

Answer 1

मैं कोड को साकार द्वारा अपने ही सवाल का जवाब बहुत

renderer.render(scene, camera); 

रखकर सुधार किया जा सकता सही जगह पर कोड ताकि की आवश्यकता होने पर इसे केवल कहा जा सके। पर उपलब्ध स्रोत के साथ

http://stemkoski.github.com/Three.js/Texture-Animation.html

:

Answer 2

मैं कोड का एक उदाहरण एक एनिमेटेड बनावट, पर लाइव उदाहरण प्रदर्शित करने के लिए लिखा है

http://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Texture-Animation.html

उपयोगी भाग एक समारोह है मैंने ऑफसेट को स्वचालित रूप से संभालने के लिए लिखा था।

function TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration) 
{ 
    // note: texture passed by reference, will be updated by the update function. 

    this.tilesHorizontal = tilesHoriz; 
    this.tilesVertical = tilesVert; 

    // how many images does this spritesheet contain? 
    // usually equals tilesHoriz * tilesVert, but not necessarily, 
    // if there at blank tiles at the bottom of the spritesheet. 
    this.numberOfTiles = numTiles; 
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
    texture.repeat.set(1/this.tilesHorizontal, 1/this.tilesVertical); 

    // how long should each image be displayed? 
    this.tileDisplayDuration = tileDispDuration; 

    // how long has the current image been displayed? 
    this.currentDisplayTime = 0; 

    // which image is currently being displayed? 
    this.currentTile = 0; 

    this.update = function(milliSec) 
    { 
     this.currentDisplayTime += milliSec; 
     while (this.currentDisplayTime > this.tileDisplayDuration) 
     { 
      this.currentDisplayTime -= this.tileDisplayDuration; 
      this.currentTile++; 
      if (this.currentTile == this.numberOfTiles) 
       this.currentTile = 0; 
      var currentColumn = this.currentTile % this.tilesHorizontal; 
      texture.offset.x = currentColumn/this.tilesHorizontal; 
      var currentRow = Math.floor(this.currentTile/this.tilesHorizontal); 
      texture.offset.y = currentRow/this.tilesVertical; 
     } 
    }; 
}  

(उदाहरण के लिए) का उपयोग कर सामग्री को प्रारंभ कर सकते हैं::

var runnerTexture = new THREE.ImageUtils.loadTexture('images/run.png'); 
// a texture with 10 frames arranged horizontally, display each for 75 millisec 
annie = new TextureAnimator(runnerTexture, 10, 1, 10, 75); 
var runnerMaterial = new THREE.MeshBasicMaterial({ map: runnerTexture }); 

और प्रत्येक से पहले इसे अद्यतन का उपयोग कर रेंडर: समारोह (ऊपर के लिंक से निकाले) इस प्रकार है

var delta = clock.getDelta(); 
annie.update(1000 * delta); 

आशा है कि इससे मदद मिलती है!