変体

daijimachine..

2011-03-28 19:23:11

License: MIT License

Fork: 7

Fav: 17

View: 14211

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 159 lines
HTML 1 lines
CSS 4 lines

変体

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

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

変体
Vertex3D(lib)
Triangle3D(lib)
Matrix3D(lib)
Light(lib)
FlatShader(lib)
ExtraDisplayObject3D(lib)

/**
* 変体
* 
* 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;
}

変体

変体 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); } } } <canvas id='canvas' width="465" height="465"></canvas>* {margin:0;padding:0;} body {background:#fff;overflow:hidden;} #canvas {background:#000000;}

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/3cdH/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/daijimachine/1_hentai" title="変体">変体 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip