👩🏼‍🏫 🤽 🚵🏿 キャンバスなし 🌆 🛌🏻 🤭

おそらく「I am PR」または「JavaScript」に転送することをお勧めします（提案は受け入れられます）。または、そのままにしておく必要があります。しかし...

JavaScriptでZバッファー、サブピクセル精度、Guroライティングを使用した3Dですか？はい、誰でもキャンバスを使用してこれを行うことができます！

キャンバスの長所を長く美味しいもので説明することはできますが、この記事はそれについてではありません。それほど面白くない

キャンバスが悪い理由をご覧ください。

それで何？

有名な大手企業のインターネットブラウザーでは機能しません。VMLを介してキャンバスをエミュレートすると、最もおいしいピクセル操作がカットされ、Flashでピクセルスナックをエミュレートすると、Adobe開発者がExternalInterfaceのどこかにカップルを挿入するため、恥ずかしく遅くなりますスリープ機能:)
Google Chrome（別名Chromium）のみが、十分なJavaScript実行速度を提供できます。他のすべてのブラウザーでは、美味しくてセクシーな効果はスライドショーに変わるリスクがあります。
そして最後に、最も重要なことはスポーツマンらしくないことです！コウモリのファイルにサッパー、C ++のsedとボヤール方言のテトリスを書いている人がいる限り、プログラミングプロセスのためのプログラミングは大衆に興味があると確信しています:)

私は~~非常にクレイジーな~~ ブログを持っています。そこでは、キャンバスを使用しないJavaScriptでさまざまなエフェクトやゲームを作成することについて定期的に書いていきます。

2週間ごとに新しい効果について書きます。
2か月に1回、あるゲームのプレイ可能なデモを作成することについて話します（通常どおり、キャンバスを使用しません）。
そして最後に、 6か月ごとにゲームをします（まあ、少なくとも締め切りを守らないように頑張ります）

シードに関する小さな異端記事-キャンバスを使用して3D + Zバッファー+サブピクセル+グラウドシェーディングを作成する方法

ステップ0

始めるには、Chrome Frameの形式でcanvasタグのサポートを提供することでIEユーザーの世話をする必要があります： メタを登録し、Googleスクリプトを接続し、 非キャンバスブロックを作成し、Google iframeのスタイルを編集します（デフォルトではページの中央に表示されます）

< head > < meta http-equiv ="X-UA-Compatible" content ="chrome=1" /> < style type ="text/css" media ="screen" > .chrome-install { position: relative; margin: 0; padding: 0; top: 0; left: 0; } </ style > < script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js" ></ script > </ head > < body onload ="main()" > < div id ="no-canvas" style ="display:none;" > < h2 > < canvas > support required. </ h2 > < div id ="chrome-install-placeholder" ></ div > </ div > < div id ="canvas-enabled" > < canvas id ="canvas" width ="384" height ="384" ></ canvas > </ div > </ body > * This source code was highlighted with Source Code Highlighter .

メイン関数（タイムアウトによって呼び出されます。それ以外の場合、chrome（開発版）は本体の背景を最後まで描画しないことがあります）：

function main() { canvas = document .getElementById( 'canvas' ); if ( typeof (canvas.getContext) == 'function' ) { ctx = canvas.getContext( '2d' ); setTimeout(init, 100); } else { document .getElementById( 'canvas-enabled' ).style.display = 'none' ; document .getElementById( 'no-canvas' ).style.display = '' ; CFInstall.check({ node: 'chrome-install-placeholder' , className: 'chrome-install' , destination: window.location.href }); } } * This source code was highlighted with Source Code Highlighter .

ステップ1

すべてのレンダリングは128x128バッファーで行われ、3倍に増加して表示されます（ putImageDataを使用）。

var scr = []; var zbuf = []; var WDT = 128; var HGT = 128; function blit() { var cd = ctx.createImageData(canvas.width, canvas.height); var data = cd.data; var ind = 0; for ( var y = 0; y < HGT; y++) { var line = scr[y]; for ( var x = 0; x < WDT; x++) { data[ind++] = line[x][0]; data[ind++] = line[x][1]; data[ind++] = line[x][2]; data[ind++] = 255; .... } ctx.putImageData(cd, 0, 0); } * This source code was highlighted with Source Code Highlighter .

ステップ2

Figureをオブジェクトとして表現し、チート関数boxを記述します。これにより、法線を持つキューブがすぐに作成されます。

{ points: [ {x: point_x, y: point_y, z: point_z, n: { x: point_normal_x, y: point_normal_y, z: point_normal_z } }, .... ], faces: [ [point_1, point_2, point_3, { x: face_normal_x, y: face_normal_y, z: face_normal_z }], .... ], color: object_color, rot: [rot_x, rot_y, rot_z] } function box(size, cl, rot) { var norm = 1 / Math.sqrt(3); return { points: [ { x: -size, y: size, z: -size, n: { x: -norm, y: norm, z: -norm } }, .... ], faces: [ [ 0, 1, 2, { x: 0, y: 1, z: 0 } ], .... ], color: cl, rot: rot }; } * This source code was highlighted with Source Code Highlighter .

ステップ3

すべての黒の仕事をしましょう-オブジェクトを（法線と一緒に-再び法線を読み取るよりも高速です）2Dで投影します（通常は光のレベルを数えるのが^面倒だったので、魔法の式と魔法の係数を見つけるために科学的な突く方法 ^tmを使用しました 0.7および3）

function project(pt, rm) { var rot = { x: (pt.x*rm.oxx + pt.y*rm.oxy + pt.z*rm.oxz), y: (pt.x*rm.oyx + pt.y*rm.oyy + pt.z*rm.oyz), z: (pt.x*rm.ozx + pt.y*rm.ozy + pt.z*rm.ozz + ZPOS) }; var l = 1 - (Math.cos(pt.nx*rm.ozx + pt.ny*rm.ozy + pt.nz*rm.ozz) - 0.7) * 3; l = Math.max(0, Math.min(1, l)); return { x: ((WDT / 2) + rot.x * (WDT / 2 - 1) / rot.z), y: ((HGT / 2) + rot.y * (HGT / 2 - 1) / rot.z), z: rot.z, l: l }; } function draw_object(obj) { var ax = (tm * obj.rot[0]); var ay = (tm * obj.rot[1]); var az = (tm * obj.rot[2]); var s1 = Math.sin(ax); var s2 = Math.sin(ay); var s3 = Math.sin(az); var c1 = Math.cos(ax); var c2 = Math.cos(ay); var c3 = Math.cos(az); var rm = { oxx: (c2 * c1), oxy: (c2 * s1), .... }; var pr = []; for ( var i = 0; i < obj.points.length; i++) { pr.push(project(obj.points[i], rm)); } for ( var i = 0; i < obj.faces.length; i++) { var face = obj.faces[i]; var fz = (face[3].x*rm.ozx + face[3].y*rm.ozy + face[3].z*rm.ozz); if (fz <= 0) { triangle(pr[face[0]], pr[face[1]], pr[face[2]], obj.color); } } } * This source code was highlighted with Source Code Highlighter .

ステップ4

水平線（最適ではない）と三角形（スピードチャンピオンでもない）を描画する手順を記述します。

function hline(y, xl, xr, cl, ll, lr, zl, zr) { // - , // , // xl -= 0.5; xr += 0.5; .... } // ** ** function triangle(a, b, c, cl) { .... .... var dxl = (cx - ax) / (cy - ay); var dxr = (bx - ax) / (by - ay); .... var y = ay; while (y < by) { // (y - ay) - // xl = sx + dxl * (y - ay); xr = sx + dxr * (y - ay); .... hline(y, xl, xr, cl, ll, lr, zl, zr); y++; } .... } * This source code was highlighted with Source Code Highlighter .

ステップ5

ループ関数を記述し、setIntervalを介して実行します。

function loop() { tm = (( new Date()).valueOf() - st) / 1.5; draw_scene(); blit(); } * This source code was highlighted with Source Code Highlighter .

エピローグ

完全なスクリプトはhttp://zame-dev.org/projects/nocanvas/0000/index.htmlで入手できます（ページのソースコードをご覧ください）

ブログを読む @ RSSを購読する

キャンバスなし