変体 daijimachine Follow 2011-03-28 19:23:11 License: MIT License Fork22 Fav20 View35132 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; } 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;} 変体 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;} use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? 変体 HTML5 Canvasの挙動テスト。 即席3Dライブラリを作って、Canvasの処理速度、描画速度等々、もろもろの挙動を体感してみた。 とりあえず動くレベルの実装。 今回やってみて、Canvasの描画精度が、わりと低いという印象を持った。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author daijimachine URLhttps://www.daijima.jp/ 代島昌幸 | Masayuki Daijima Twitter : http://www.twitter.com/daijimachine/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/3cdH/js"></script> 3d canvas cube html5 matrix sphere triangle vertex 変体 Discussion Questions on this code? Tags 3D canvas cube html5 matrix sphere triangle vertex 変体 Favorite by KiKiKi Maran.Emil takashi-miya karpovsystem kinkuma_desi phi siouxcitizen Ervinitok shamotron ksk1015 orenzi4 termat Beck.Kuchkor fingaholic clockmaker miniapp hikipuro: 3D calmbooks: canvas uraura_: 3d asou_jp: 3D Forked sort by latest page views favorite forked forked: 変体 umi 00 693 160/1/4 3d canvas cube html5 matrix sphere triangle vertex 変体 forked: 変体 Russ.Bittles 00 828 160/1/4 3d canvas cube html5 matrix sphere triangle vertex 変体 forked: 変体 Russ.Bittles 00 760 160/1/4 3d canvas cube html5 matrix sphere triangle vertex 変体 forked: 変体 PhilMaGeo 00 933 160/1/4 3d canvas cube html5 matrix sphere triangle vertex 変体 1 2 3 4 5 6NEXT>>
