変体

daijimachine..

2011-03-28 19:23:11

License: MIT License

Fork: 7

Fav: 19

View: 15718

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;}

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<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>

QR Code