福野泰介の一日一創

愛あるC言語入門 with WebAssembly、C言語からJavaScriptの関数を呼び出そう編！

まったさんからもらった、C言語入門 for mac！

入門者にぴったり、多めに見てくれるモード -Wno-all がイイ！

putcharで数が文字に！これをWebAssemblyでも実現します！

love() { putchar(65); putchar(66); putchar(67); } ゆるいC言語で書いたプログラム。65、66、67を指定してputchar関数を呼び出しています。GitHubのlovec-wasm、step2からZIPファイルをダウンロードするか、GitHub Desktopでbranchをstep2に切り替えよう。（初心者じゃない人は、ゆるくないモードの step3 をどうぞ）

これをコンパイラclangを使って、ブラウザ用の仮想マシン語、WebAssembly(wasm)にコンパイル！

clang -Wno-all --target=wasm32 -nostdlib -Wl,--no-entry -Wl,--export=love -Wl,--allow-undefined love.c -o love.wasm

・・・ちょっと長いですね。コピペでOKですが、毎回コピペも面倒なので、この1行を c.sh というファイルに書いて保存しておけば・・・

sh c.sh

と、ターミナル上ですぐ使えます！lsで確認、WebAssemblyのバイナリファイル love.wasm ができます。（Windowsの人は、WSLを使おう）

「wasm in C test」
ブラウザで love.wasm ファイルを読み込んで、関数 love を呼ぶと、画面に"ABC"が表示されます。ターミナルで動くJavaScriptのランタイム、Denoを使っても動きますよ。

deno run -A love.js 100

肝はブラウザから呼び出しする時に準備する、importObject で、JavaScriptの関数を設定しているところ！

分からない、うまくいかないときは、Issuesに記述するか、Xで返信ください！

鯖江のおしゃれカフェ＆メガネやサングラスなど目の複合施設、レンズパーク！

レンズがたくさん！

ステキな店内！

カフェで注文、めめモンの初恋、いちご味！

レンズのプロ、諸井さんと！
メガネの上からかけるサングラスで、神山まるごと高専への長距離ドライブへの備えもばっちり！

links
- step1 C言語で作ってブラウザで動かそう! love.c for WebAssembly
- step2 ゆるいC言語でブラウザにもputchar! love.c for WebAssembly

大好評、love.cで始まる、まったさんのC言語入門 in 神山まるごと高専 in ITブートキャンプ！

C言語でWebアプリも開発できるところを伝えるべく、ひとまず超シンプルなサンプルを作りました。

int love(int param) { return param + 1; } 引数に1を足した数を返すだけの関数を持つC言語のソースファイル love.c。

これをコンパイラclangを使って、ブラウザ用の仮想マシン語、WebAssembly(wasm)にコンパイル！

「wasm in C test」
ブラウザで love.wasm ファイルを読み込んで、関数 love を呼ぶテスト。いろいろ数値を変えて実行してみよう。ターミナルで動くJavaScriptのランタイム、Denoを使っても動かせます。

deno run -A love.js 100

「code4fukui/lovec-wasm」
超ミニマムWebAssemblyのコンパイルセットはこちら。love.c のコンパイルにチャレンジしてみよう！分からない、うまくいかないときは、Issuesに記述ください！

→ C言語からJavaScriptの関数を呼び出す、step2 へ続く!

福井市の足羽川沿いに巨大なアートが登場。
「福井県　堤防彩る巨大アート　福井市の足羽川に完成｜北陸新幹線で行こう！北陸・信越観光ナビ」

近くからの写真で収まらないので、パノラマ撮影。

思い出を3Dで残す3つの方法。1つ目は、iPhone 12Pro以上で使える距離センサーLiDARを使った、Scaniverseによる3Dスキャン。大きさが正確に分かります。ポリゴンになるのでゲームなどにも応用しやすい。丁寧に撮る必要があってちょっと大変。透明のものは消えちゃう。

2つ目は、Scaniverseの最近のアップデートで追加された、ガウシアンスプラッティング、Splatを使った3D点群スキャン。撮影範囲が広いとデータが大きい。見えないところもぼやっとするのでざっくり撮るのに便利。透明なものも表現してくれる。Scaniverse上でのクロップ編集に未対応。

「足羽川アート」
3つ目は、いろんな角度の写真から3Dモデルを生成するフォトグラメトリ。撮影した動画を「フォトグラメソッド for Mac」で使って生成し、1つ目のデータを使ってサイズを調整しました。動画が撮れればどんなスマホでもOK。変換速度も粗いものなら数分で終わって、意外とうまくいくのが楽しい。調整したものをXRモニュメントに追加。Vision ProではVRモードのみ動作します。Quest3ならARモードでお楽しみください！

「XRモニュメント」 src and data on GitHub
XRモニュメントに、Vision Pro用の3Dモデル表示リンクを追加。3Dモデルをバーチャルに飾ることができます！バーチャルなのでサイズは自由自在。ミニチュアにして手元に置いておくのもかわいくていいですよ！

Vision Pro、QooCam EGO、Canon Dual Fisheyeなど、3D写真という4つ目の手もありますね。Blender片手に3D模写も楽しいかも？

モニュメントにフォーカスした新しい旅のお供にどうぞ！

何でもできるC言語。XでC言語で検索して、見つけたステキライブラリ「neco」を使って、リクエストされたファイルを返すだけのシンプルなウェブサーバーをつくってみました。（参考、C言語向けコルーチン非同期 I/O ライブラリ neco を使ってみた。）

「code4fukui/c-webserver-by-neco: WebServer in C by neco, Concurrency library for C (coroutines)」
C言語でJavaScript/Denoのように使える非同期I/Oライブラリ「neco」から neco.h と neco.c を持ってくるだけ。120行の server.c で、ブラウザからリクエストされたファイルを返すウェブサーバーができました。

gcc server.c neco.c ./a.out

ローカルでサクッとコンパイルして、実行。ブラウザでローカルホストのポート8080番にアクセスすると index.html を表示します。

さすがバイナリファイルを直接生成するC言語。
起動が高速、表示も速く、省メモリ！