JavaScript

「マンデルブロ集合を鑑賞するツールを作成した」開発日記

マンデルブロ集合を鑑賞するツールを作成した youtu.be 先日動画を公開しました。 マンデルブロ集合を鑑賞するツールを作成しました。 Unity や three.jsなどは使わずに、ゲームエンジン部分も自作です。 よかったら上記の動画も確認してみてください。 また…

TypeScriptとWebGLでポリゴンを描画する方法

目次 はじめに webpack + TypeScriptのプロジェクトを作成する シェーダのソースコードをimportする 実際にポリゴンを描画する さいごに 1. はじめに この記事では、WebGLでポリゴンを描画する方法を紹介します。 言語はTypeScriptを使います。 わざわざJava…

いまさら聞けないJavaScriptのPromiseを丁寧に解説

目次 はじめに Promiseとは Promiseを使う 3.1. 基本的な使い方(then, catch) 3.2. 実行される順番に注意 3.3. then, catchが両方実行されることもある Promiseを作る 4.1. Promise.resolve(), Promise.reject() 4.2. new Promise() まとめ 1. はじめに こ…

標準正規分布から(いい感じの)乱数をとってみた

目次 はじめに 一様分布と標準正規分布 ボックス=ミュラー法 実装してみた まとめ 1. はじめに (擬似)乱数といえば、みなさん一度は使ったことがあると思います。 各言語で準備されている関数などを使ってランダムな値を取得できます。 特によくあるのは0以…

Nuxt.js + Typescript + Vuetify の空プロジェクトを作成しました

目次 概要 プロジェクトの作り方 さいごに 1. 概要 Webで新しいプロジェクトを作るときって意外と大変だったりしますよね。 あの設定ファイルってどうするんだっけ。 あのライブラリはどこで有効にできるんだっけ。 そんなことに悩むのが面倒だったので、基…

Nuxt.js と Typescript で Store の変更と読み出し

目次 概要 準備 Storeの変更 Storeの読み出し まとめ 1. 概要 最近Web開発はNuxt.js + Typescriptの組み合わせが気に入っています。 せっかく気に入っているので、この組み合わせでの開発ノウハウを記載しておきます。 今回は基礎の基礎、Storeの変更と読み…

three.jsでカメラとの距離を無視して描画順序を制御する方法

目次 この記事の目的 描画順序を制御する方法 描画処理のソースコード 全ソースコード まとめ 1. この記事の目的 この記事では、カメラからの距離を無視して描画順序を制御する方法を紹介します。 今回は例として、二つのオブジェクトを空間に配置し、描画…

karmaでテスト実行中に、fetchでローカルファイルを取得する

目次 この記事の目的 テスト対象のコードを準備する karmaの設定ファイルを準備 テストコードでfetchする まとめ

babel, webpack, karmaでnode_modulesを除いてカバレッジを計測する

目次 この記事の目的 テスト対象のコードを準備する karmaとbabel, webpack karmaでカバレッジを測定する テストを実行します まとめ

【WebAssembly】JSとwasmでソートの速度を比較する

目次 この記事の目的 C++でソートを実装 JSでソートを実装 実行用のHTMLを準備する 実際に速度を比較する まとめ

【WebAssembly】JS側で作成したtyped arrayをwasm側に渡す

目次 この記事の目的 wasm側のソースコードを準備 wasmにコンパイルするスクリプトを準備 JSのtyped arrayをwasmに渡す方法 サンプルの動作確認を行うHTMLを準備 まとめ

【WebAssembly】babael, webpackと一緒にwasmを使う

目次 この記事の目的 babel, webpackの導入 JavaScriptのソースコードを用意する サンプルを動かすHTMLを準備する wasmに変換するソースコードを準備する Utilsクラスでwasm読み込みを実装する 動作確認用のHTMLを準備する まとめ

【WebAssembly】wasm側で動的に作成したインスタンスをJSに渡す

目次 この記事の目的 JSに渡したいクラスをC++で定義する wasmのソースコードを実装する JS側でポインタからインスタンスを読み込む HTMLからwasmを読み込んで実行する まとめ

【WebAssembly】C/C++で実装された既存の資産をincludeする

目次 この記事の目的 includeされる側のクラスを実装 ビルド用のスクリプトを準備 includeする側の実装 HTMLからwasmを読み込み実行する まとめ

【WebAssembly】C/C++からJavaScriptで実装した関数を実行する

目次 この記事の目的 C/C++でコールバック関数の定義のみ書く JavaScriptでコールバック関数の実装を書く emccで –pre-js オプションでビルドする HTMLから読み込んで実行する まとめ

【WebAssembly】C/C++で実装した関数をJSから呼び出す

目次 本記事の目的 C/C++で呼び出したい関数を実装する emccのExportedFunctionsオプションを使ってビルド JSからwasmを読み込んで関数を呼び出す まとめ 1. 本記事の目的 本記事では、C/C++で実装した関数をJSから呼び出す方法を紹介します。 例として、int…

【WebAssembly】MODULARIZEオプションを使う

目次 関連記事 MODULARIZEオプション HTMLからwasmを読み込む方法 HTMLからwasmを読み込むサンプル まとめ 1. 関連記事 【WebAssembly】Getting Started をDocker で試す - shogonir blog wasm-sample/01-wasm-modularize at master · shogonir/wasm-sample …

【WebAssembly】Getting Started をDocker で試す

目次 WebAssemblyとは サンプルを動かしてみる サンプルの動作を解説する まとめ 1. WebAssemblyとは WebAssembly(wasm)とは、JavaScript高速化の最新技術です。JavaScriptの高速化技術であるasm.jsがさらに進化したものです。C/C++, Rust, Goなどの言語で記…

Unity Web Player をブラウザの画面に合わせて起動する

Unity Web Player をブラウザの画面に合わせて起動する 結論 Project をビルドした時に生成される HTML ファイルを編集する。コミットログを見ればわかる方は次のリンクへ飛んでください。以降では HTML の編集箇所の説明を書きます。 ※ Unity Web Player は…

「サマーウォーズの OZ を Unity で再現しました」開発日記

サマーウォーズの OZ を Unity で再現しました youtu.be 先日、動画をあげました。題名の通り、 OZ の世界を Unity で再現しました。作ったものは Web 上で公開していて、 OZ の世界を誰でも自由に飛び回れるようになっています。自分で言うのもなんですが、…