福野泰介の一日一創

Meta Quest Proと登場で広がった未来。かぶって一瞬で伝わるデモにマイクラ風は有益！単色なハコでは少し寂しいのでいい感じののテクスチャーを生成するツールアプリを、Processing系のステキグラフィックスでよく使われているパーリンノイズ関数の改良版、シンプレックスノイズを使って作りました。

「pixel-texture-maker」src on GitHub
色を3色選んで、どの色空間でグラデーションパターンするかを選択、どちらの色に寄せるかを選択します。右クリック画像保存でテクスチャーPNGファイル(4KB程度)のできあがり！

シンプレックスノイズは、「jwagner/simplex-noise.js: A fast simplex noise implementation in Javascript / Typescript.」のESモジュールCDN版を使用、グラデーションは先日作った「chroma-es」を使っています。

良い感じのピクセルテクスチャーがいくらでも作れちゃうので、せっかくなのでマイクラ風な木を生成するライブラリ「voxel-trees」を使って、生やしてみました。

「vr-tree」src on GitHub
A-Frameのマイクラ風をベースに木がある空間、作ってみました。

ESモジュール化した「voxel-trees」を使うと、任意の3D空間にピクセルな木が生えます。コールバック関数setBlockを設定する形で下記のように使います。 import tree from "https://code4fukui.github.io/voxel-trees/index.js"; tree({ position: { x: 0, y: 0, z: 0 }, setBlock: (pos, type) => { console.log("set", pos, type); }, }); プログラムで作る3D建築物、いろいろと作ってシェアできるのも楽しそう！

ボックスを置いたり消したり、A-Frame、Questのコントローラーでボタン押したらボックス表示のコードはこんな感じ(on GitHub)。 const handler = function(evt) { const p = this.object3D.getWorldPosition(); toggleBox(p); }; handr.addEventListener("triggerdown", handler); 楽しい！

バーチャルなマイクラ風、体験して見たい方、ものづくりの祭典、NT鯖江へどうぞ！