「Web」カテゴリーアーカイブ

Rust(wasm)の速度性能テスト&JavaScriptでゲームループ改

WebAssembly(Rust)の実行速度を簡単な球の物理計算で性能テストしてみました。あと以前作成したゲームループに問題があったため、処理落ちしても大丈夫なように修正、改良しました。
少し古いPC(Windows10)で30FPSを維持できる個数は、Chromeで5000個、Firefox4500個、Edge2500個でした。低価格スマホ、タブレット(android、Chrome)では1000個。

続きを読む Rust(wasm)の速度性能テスト&JavaScriptでゲームループ改

Rust(wasm)⇒WebGL テクスチャファイル読み込み

Rust(wasm)で画像ファイルを読み込み、WebGLに転送、テクスチャポリゴンを表示します。JavaScriptの画像処理は使わずに、Rustで画像のバイナリーデータを解析、必要があればデコードしてWebGLのtexImage2Dへ。GPUが直接扱えるDDS(無圧縮)とATF(DXT+ETC1+PVRTC)、デコードが簡単なTGAの3種類の画像に対応します。

続きを読む Rust(wasm)⇒WebGL テクスチャファイル読み込み

Rust(wasm)⇔JavaScript ファイル読み込みとアニメーション(ゲームループ)

RustでWebGLのプログラムを作っていますが、ファイル読み込み処理が必要になってきました。シェーダーソースコードをRustに埋め込むとエディタで色が変わらない、テクスチャにも対応したい。特殊なサーバー処理なしでファイル操作したいので、JavaScriptのFetch命令でファイル読み込みを実装します。Rust側でできることはRustで実装したいという設計方針のため、比較的簡単な実装、ゲームループでFetchの非同期処理に対応します。ついでにアニメーション処理。RustでPromiseのような処理を実装する知識は……まだない。

続きを読む Rust(wasm)⇔JavaScript ファイル読み込みとアニメーション(ゲームループ)

Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (2/2)

前回準備した機能を使って、RustからWebGLのAPIを呼び出して、ポリゴン描画行います。ちょっとした(無駄な)こだわりですがOpenGLに似た記述と仕様を再現しています。それを実現することでRustについての理解が深まったと思います。GL部分だけを見ると、C++のプログラミングをしていると錯覚するかも。今回は、ソースコード2つ(lib.rsとindex.js)と簡単な説明のみです。


続きを読む Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (2/2)

Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (1/2)

前回の記事はJavaScriptでのWebGLの画面クリアだけだったので、今度はRustによるポリゴン描画を行います。WebGLのAPIを呼び出すだけで簡単できると考えていましたが、データの受け渡しが思った以上に複雑でした。OpenGLの知識があればポリゴン描画自体は難しくないので、主にRust⇔JavaScript間のデータの受け渡し方法について書いていきます。

WebGLについての誤算

WebGLもOpenGLと同じようにバッファやシェーダーなどのリソースを作成した際は、GLuintの整数値(ハンドル)が返ってくると思っていました。違いました。WebGLBufferやWebGLShaderといったオブジェクトが返され、これを使ってGL命令を実行。Rust(wasm)で直接JavaScript側のオブジェクトを管理できない様なので対策が必要です。それと、Rust(wasm)から直接WebGL(WebAPI)は呼び出せないため、JavaScriptを経由する必要があります。

続きを読む Rust(wasm)とJavaScript(WebGL)のデータ受け渡し Rust+WebGLでポリゴン描画 (1/2)

Rust+Wasm+WebGLはじめました 環境構築=>Hello World =>画面クリアまで(Windows10)

Rustというプログラム言語が面白そうなので使い始めてみました。Rustから直接WebAssemblyコードを出力できるので、実行環境はWebブラウザに、グラフィック処理はWebGLを使用します。Webブラウザ上で3Dゲームが作成できるようになることが目標です。それとWebプログラム初心者なので、npm、wasm-bindgenなどのツールやバインダーは使用せず、基本的に手作業で作成していきます。というか使い方がよくわかってないだけですが…… 

今回行うこと Rustの環境作成&ビルド、ブラウザ上で実行、Rust⇔JavaScript間の関数呼び出し、WebGL導入まで

続きを読む Rust+Wasm+WebGLはじめました 環境構築=>Hello World =>画面クリアまで(Windows10)

WordPressでSVG形式の画像表示

WordPressでSVG(Scalable Vector Graphics)画像の表示に挑戦してみる。
SVGファイルをアップロードしてimgタグで他の画像と同様に記述し表示……表示されない。やっぱりまだ一般的な画像フォーマットではないので何か設定が必要のようです。
WordPressのSVGに関連するプラグインをインストールしてみるが、うまくいかない。もっと調べてみると、どうやらサーバーの設定(MIME Type)も必要のようです。それと、IE9では表示関連に問題があり対策が必要。
今後、プログラムの説明で図が必要なときは、SVG画像を使う予定です。

SVG画像の表示(WordPress日本公式キャラクター「わぷー」)
WordPress日本公式キャラクター「わぷー」

続きを読む WordPressでSVG形式の画像表示

WordPressでソースコード表示

ソースコードを見やすくするにはhtmlのタグを使用する必要が、でもめんどくさい。
もしかしたらWordPressのプラグインがあるかも。ありました。
最初に見つけたのが「SyntaxHighlighter Evolved」
WordPressのプラグイン検索でインストールしようとすると、「現在のバージョンではテストされていません」1年以上更新なし、と注意が出たので他にもないか探したところ、「Crayon Syntax Highlighter」というものを発見、WordPress最新Verもテスト済み。
http://thikasa.net/20120724/wordpress-plugin-crayon-syntax-highlighter/
ここのブログを参考にして、使ってみることにしました。

WordPressの投稿編集画面で、crayonボタンを押すと、ソースコードの編集ダイアログが表示、そこにソースコードをコピペして表示設定を行うと、下のようにソースコードを表示してくれます。

2019/9/1
Crayon Syntax Highlighterは3年以上更新されていないようなので、利用を中断しています。

	UINT createDeviceFlags = 0;
#ifdef _DEBUG
	createDeviceFlags |= D3D11_CREATE_DEVICE_DEBUG;
#endif
	D3D_FEATURE_LEVEL featureLevels[] =
	{
		D3D_FEATURE_LEVEL_11_0,//DirectX11のみ 10以降は無視
	};
	ID3D11Device* device;
	ID3D11DeviceContext* dv_ctx;
	D3D_FEATURE_LEVEL feature_level;
	HRESULT hr
		= D3D11CreateDevice(NULL, D3D_DRIVER_TYPE_HARDWARE, NULL,
					createDeviceFlags,featureLevels, 1 ,D3D11_SDK_VERSION,
					&device, &feature_level, &dv_ctx);
	//デバイス作成に成功したらメッセージボックス表示
	if(SUCCEEDED(hr)){
		MessageBox(NULL, L"成功", L"DirectX11", MB_OK);
		
		dv_ctx->Release();
		device->Release();
	}

かなり便利です。

WordPress › Crayon Syntax Highlighter « WordPress Plugins