変体

by

Readme
JavaScript 159 lines
HTML 1 lines
CSS 4 lines

変体

HTML5 Canvasの挙動テスト。
即席3Dライブラリを作って、Canvasの処理速度、描画速度等々、もろもろの挙動を体感してみた。
とりあえず動くレベルの実装。

今回やってみて、Canvasの描画精度が、わりと低いという印象を持った。

変体

/**
* 変体
* 
* HTML5 Canvasの挙動テスト。
* 即席3Dライブラリを作って、
* Canvasの処理速度、描画速度等々、
* もろもろの挙動を体感してみた。
* 
* 今回やってみて、Canvasの描画精度が、
* わりと低いという印象を持った。
* 
* @author Masayuki Daijima (ARCHETYP Inc.)
* @see http://www.daijima.jp/
* @see http://twitter.com/daijimachine
*/

var canvasW = 465;
var canvasH = 465;
var ctx, do3d, mouseX, mouseY;
var fps = 30;
var vpX = canvasW>>1;
var vpY = canvasH>>1;

var cnt = 0;
var motion_cnt = 0;
var velocity = 0;

var IDLING_TIME = 80;

(function()
{
  window.onload = function(){
    
    //Canvas
    var _canvas = document.getElementById("canvas");
    _canvas.addEventListener("mousemove", onMouseMove, true);
    
    //Context
    ctx = _canvas.getContext("2d");
    
    //3D Object
    //do3d = new ExtraDisplayObject3D(this, "#0C89AD");
    do3d = new ExtraDisplayObject3D(this, "#FF0000");
    
    setInterval(update, 1000/fps);
  }
}
)();

function onMouseMove(e)
{
  mouseX = e.clientX - document.body.scrollLeft;
  mouseY = e.clientY - document.body.scrollTop;
}

function update()
{
  cnt++;
  
  var i, vertex, target_v;
  var angleX = (mouseY - vpY) * .029;
  var angleY = (mouseX - vpX) * .029;
  
  if(isNaN(angleX)) angleX = 3;
  if(isNaN(angleY)) angleY = 1.5;
  
  do3d.rotationX += angleX;
  do3d.rotationY += angleY;
  //do3d.rotationZ += angleX;
  do3d.setTransformMatrix();
  
  if(do3d.isDeform){
    motion_cnt++;
    if(motion_cnt >= IDLING_TIME) velocity += 0.03;
    if(motion_cnt == IDLING_TIME) (do3d.formType == "sphere") ? do3d.deform_vertices = do3d.all_vertices_sphere.slice(0) : do3d.deform_vertices = do3d.all_vertices_cube.slice(0);
    
    for(i = 0; i < do3d.vertices.length; i++)  {
      (do3d.formType == "sphere") ? vertex = do3d.all_vertices_sphere[i] : vertex = do3d.all_vertices_cube[i];
      
      if(motion_cnt >= IDLING_TIME) {
        
        (do3d.formType == "sphere") ? target_v = do3d.all_vertices_cube[i] : target_v = do3d.all_vertices_sphere[i];
        
        if(do3d.formType == "sphere"){
          if(do3d.all_vertices_cube[i]){
            do3d.deform_vertices[i].x += (target_v.x-do3d.deform_vertices[i].x) * velocity;
            do3d.deform_vertices[i].y += (target_v.y-do3d.deform_vertices[i].y) * velocity;
            do3d.deform_vertices[i].z += (target_v.z-do3d.deform_vertices[i].z) * velocity;
          }
        }else{
          if(do3d.all_vertices_sphere[i]){
            do3d.deform_vertices[i].x += (target_v.x-do3d.deform_vertices[i].x) * velocity;
            do3d.deform_vertices[i].y += (target_v.y-do3d.deform_vertices[i].y) * velocity;
            do3d.deform_vertices[i].z += (target_v.z-do3d.deform_vertices[i].z) * velocity;
          }
        }
        do3d.vertices[i] = do3d.transMatrix.transformPoint(do3d.deform_vertices[i]);
      }else{
        do3d.vertices[i] = do3d.transMatrix.transformPoint(vertex);
      }
      //do3d.vertices[i].project(do3d.vertices[i].getPerspective(do3d.distance));
    }
    
    if(motion_cnt >= IDLING_TIME*2) {
      if(do3d.formType == "sphere"){
        do3d.formType = "cube"
        do3d.triangles = do3d.triangles_cube.slice(0);
        do3d.vertices = do3d.all_vertices_cube.slice(0);
        do3d.setSphereVertices();
      }else{
        do3d.formType = "sphere"
        do3d.triangles = do3d.triangles_sphere.slice(0);
        do3d.vertices = do3d.all_vertices_sphere.slice(0);
        do3d.setCubeVertices();
      }
      cnt = 0;
      motion_cnt = 0;
      do3d.deform_vertices = [];
      do3d.isDeform = false;
      velocity = 0;
    }
  }else{
    if(cnt > IDLING_TIME){
      do3d.isDeform = true;
    }else{
      for(var i = 0; i < do3d.vertices.length; i++)
        do3d.vertices[i] = do3d.transMatrix.transformPoint(do3d.vertices[i]);
        //do3d.vertices[i].project(do3d.vertices[i].getPerspective(do3d.distance));
    }
  }
  
  this.ctx.clearRect(0,0,canvasW,canvasH);
//  this.ctx.shadowBlur = 1;
//  this.ctx.shadowColor = "#000000";
  
  do3d.triangles.sort( function(a, b){ return ( b.screenZ() - a.screenZ() ); } );
  
  if(do3d.isDeform) {
    //Vertex Dot Rendering
    for(i in do3d.vertices) {
      this.ctx.beginPath();
      this.ctx.rect(do3d.vertices[i].x, do3d.vertices[i].y, 2.5, 2.5);
      this.ctx.closePath();
      this.ctx.fillStyle = do3d.rgbaString;
      this.ctx.fill();
    }
  }else{
    //Face Rendering
    for(i in do3d.triangles) {
      var t = do3d.triangles[i];
      t.transformPoint(do3d.transMatrix);
      //t.perspective(1000);
      if(t.isBackFace()) continue;
      t.draw(this.ctx);
    }
  }
}

変体