2018-04-16

Three.js ConvexGeometry 多面体

質問をさせていただいてもよろしいでしょうか？

「それぞれあらかじめ設定された方向に向かって、中心から、それぞれ変数に応じた距離に頂点を複数設置し、それらを結んで多面体を生成する」

という制作に現在挑戦しております。

そこで、ConvexGeometryを使ってみました。

(図1)は変数でなく一律の定数で多面体を描画したものです。
しかし、ConvexGeometryの仕様が「凸包」のため、
外側に出っ張る分には良い(図2)のですが、
距離が比較的短い頂点(値が小さい変数)が生じた場合は、
図形に埋もれて隠れてしまうという問題に直面してしまいました。
(図3で隠れた頂点は本来中心に位置しています。)
全ての頂点情報が図形に反映されるようにしたいです。

ConvexGeometryですが、埋没した頂点は削除されるのが仕様になっているようです。
一番自由度が高いのがGeometryらしいので、そちらの方を使うと上手くいくかもしれません。

ConvexGeometry

ConvexGeometry - three.js wiki - アットウィキ

Geometry

https://threejs.org/docs/index.html?q=geom#Reference/Core/Geometry

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

2018-03-31

Three.js Blender Cycles Baking Texture

Three.js用 Blender Cycles テクスチャベイクの記事です。

2018-03-30

WebGL 波動拡散

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

波動や拡散で、何か良い初心者向けの解説とかあったら知りたいです。

自分はこのお二人の記事を参考にしました。

拡散はパーティクルのものでいいですか。

あれは単に移動量にglslの擬似乱数入れているだけです。

参考コード

uniform int clicked;

            void main() {
                vec2 uv = gl_FragCoord.xy / resolution.xy;
                float idParticle = uv.y * resolution.x + uv.x;
                vec3 vel = texture2D( textureVelocity, uv ).xyz;
                if(clicked == 0){
                    vel.x = 0.0;
                    vel.y = 0.0;
                    vel.z = 0.0;
                } else {
                    float a = fract(dot(gl_FragCoord.xy, vec2(2.067390879775102, 12.451168662908249))) - 0.5;
                    float s = a * (6.182785114200511 + a*a * (-38.026512460676566 + a*a * 53.392573080032137));
                    float t = fract(s * 43758.5453);
                    vel.x = (t * 2.0 - 1.5) * 20.0;
                    vel.y = (t * 2.0 - 1.5) * 20.0;
                    vel.z = (t * 2.0 - 1.5) * 20.0;
                }
                gl_FragColor = vec4( vel, 1.0 );
            }

2018-03-21

WebGL Canvas2D 原点位置の違い

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

canvas2dで画像を読み込み、各頂点色を抜き出し、抜き出した色をパーティクルに適応するということをやっているのですが、canvas2dとwebglの原点位置の違いから、画像が90度反時計回りに表示されています。
多分行列で回転掛けるのだと思うのですが、javascriptのFloat32Arrayは1次元配列なのでそのままじゃ計算できない気がします。

これは WebGL 云々というより、パーティクルに相当する頂点のひとつひとつに、どのように色をアタッチするのかを変えることによって解決すべきじゃないかな。

行列なんかで回転させる処理を記述してしまうと、そのあとが大変になってしまいそう。

たとえば、一次元配列の imagedata を、恐らく二重の for ループとかで処理していると思うんですけど、外側と内側との役割を反転させるだけでも、色のアタッチされる順序が変化するような気がするけど、どうですかね。

var imagedata = なんか;
var w = canvas.width;
var h = canvas.height;
var i, j, k, l;
var x, y;

var position = [];
var texCoord = [];

for(i = 0; i < h; ++i){
    k = i / h; // ここが texCoord.y に相当
    y = (k + 1.0) / 2.0;
    for(j = 0; j < w; ++j){
        l = j / w; // ここが texCoord.x に相当
        x = (l + 1.0) / 2.0;
        position.push(x, y, 0.0);
        texCoord.push(l, k);
    }
}

上のコードに、そのまま imagedata から抜いてきた色を適用するとしたらを下に書きますね。

var imagedata = なんか;
var w = canvas.width;
var h = canvas.height;
var i, j, k, l, m, n;
var x, y;

var position = [];
var texCoord = [];
var color = [];

for(i = 0; i < h; ++i){
    k = i / h; // ここが texCoord.y に相当
    y = k * 2.0 - 1.0; // -1.0 ~ 1.0 の position.y
    m = i * w; // これが imagedata 内の縦方向のインデックス
    for(j = 0; j < w; ++j){
        l = j / w; // ここが texCoord.x に相当
        x = l * 2.0 - 1.0; // -1.0 ~ 1.0 の position.x
        position.push(x, y, 0.0);
        texCoord.push(l, k);
        
        n = (m + j) * 4; // これが imagedata 内の対象ピクセルのインデックス
        color.push(
            imagedata[n],
            imagedata[n + 1],
            imagedata[n + 2],
            imagedata[n + 3]
        );
    }
}

要は RGBA ごとに格納されている一次元配列の imagedata から、きちんと縦方向と横方向が破綻しないように色を抜き出して VBO の元になるデータに突っ込むわけです。

2018-03-06

altJS JavaScriptの代替

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

みなさんAltJS何使ってるんですかね。現在はTypeScriptなのですが、Hexeに移行しようと思って、ちょっと気になりました。

Hexeに詳しくないんですがTypeScriptだと何か問題ありました？

画作りのアルゴリズムをなるべく簡潔に書くことを目的としてるので、ASライクなHexeに惹かれてるという。

TSは悪くないんですけどね。やっぱり事前の設定の手間がまだまだ多いなあとは思ってます。

あとコンパイル先が柔軟な点とか、独自のアニメーションライブラリとかですね。Hexe使ってる人がまわりにあまりいないので、少しここらへんの事情は気になりますね。

TweenXCore - lightweight motion library for haxe

独自にeasingを作れるこいつと併用すると良い的な情報がタイムラインに流れてきたのがきっかけですかね。

Hexe自体がASの後継をめざしてるっぽく、独自のグラフィックライブラリを使ってサクッとゲーム作れたりすることが売りだそうです。

2018-02-17

WebGL Geometryを作る数学波紋

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

f:id:webgl:20180217215650p:plain

bloomを使ってみたくて、波を作ってみました。

波紋の動きは、いるかのボックスさんの記事を参考にさせていただきました。

いるかのボックス: Three.jsで波紋エフェクトをつくる

CircleGeometryでは間に頂点を増やせないな、と思っていたら、RingGeometryという素晴らしい形状がありました。

既存のジオメトリを工夫してつかうだけでもいろいろできそうですね。

こんな数式を叩いたらこういうGeometryになりますよ、みたいなまとめってどっかに落ちてたりしますか？

頂点組み立てるための、ってことですか？

レイマーチの距離関数とかは結構あるけどね。

ロジカルに数式的なもので表現できる場合は「数学さえ」ちゃんとわかっていれば結構書けます。

http://www.3d-meier.de/tut3/Seite0.html

こちらの数式を用いると色々生成できます。

参考情報です。

2018-02-11

Three.js ColorMap LookupTable

three.jsにcolormap lookup tableがあるのを知りました。

データ値の範囲からカラー値を決定するために使用されるようです。

var lut = new THREE.Lut( "rainbow", 512 );

var data = [0, 10.1, 4.2, 3.4, 63, 28];

lut.setMax(63);

color = lut.getColor(10);

コンストラクタ　Lut( colormap, numberOfColors )

colormapは、カラーマップを設定する引数。使用可能なカラーマップは、"rainbow", "cooltowarm", "blackbody"です。

numberOfColorsは、データ配列を表すために使用される色の数を設定する引数。

詳細はこちらです。

https://threejs.org/docs/#examples/Lut

https://threejs.org/examples/webgl_geometry_colors_lookuptable.html

cx20さんのサンプルです。コメントで教えていただきました。