---
title: Three.jsでセル・オートマトン
date: 2014-12-22T00:00:00.000Z
updated: 2026-01-08T14:51:00.655Z
tags:
  - threejs
  - making-of
  - study
  - "2014"
  - 2014/12
  - 2014/12/22
url: https://baku89.com/ja/2014/12/22/three-js-ca
---

# Three.jsでセル・オートマトン

![img](https://wp.baku89.com/wp-content/uploads/2015/01/thumbnail.png)

[Fuse](http://px.baku89.com)

当時お気に入りだった[セル・オートマトン](/cellular-automata)のシミュレーターアプリ"[Sablo](https://vimeo.com/94828687)"を批判されたので、「おもしろいセル・オートマトンつくったる」と一念発起して作ったのがこれ。導火線に火付けて、ダイナマイトを爆発させられます。

![fuse](https://wp.baku89.com/wp-content/uploads/2014/12/unsupported.gif)

GLSL 触り始めてから GPGPU 的な事をやりたくなってきたのもあって、かなり楽しかったです。

「前のフレームの計算結果を利用して新しいフレームを計算する」という部分で突っかかったので、一応メモ。

```
shader.uniforms.buffer.value = this.srcRenderTarget;
renderer.render(dstRenderTarget)[(srcRenderTarget, dstRenderTarget)] = [
  dstRenderTarget,
  srcRenderTarget,
];
```

`WebGLRenderTarget`はそのままテクスチャとしても扱えるので、2つターゲットを用意してあげて、前フレームで描画に使ったの RenderTarget をシェーダの`uniforms`にセットしてやりつつ、お互いに代わる代わるオフスクリーン描画してあげれば良いみたいです。このサイトのソースを参考にしています。

- [WebGL Cellular Automaton](http://labs.byhook.com/automaton/index.html)

---

無駄に楽しくなってきて、ついでに投稿機能も付けてしまいました。MySQL が PHP の gd も勉強できたので結果よかった。ちょこちょことピカチュウやカップル、下品なイラストなどが投稿されているんだけど、おｋのchain reactionの模式図は面白い。「原爆」ってキャプションはともかくとして。

![img](https://wp.baku89.com/wp-content/uploads/2014/12/000027_thumb.png)\
_[Fuse #27](https://px.baku89.com/fuse/27)_