---
author: mugi
created: 2014-12-22T00:00:00.000Z
wp_postid: 1715
tags:
  - threejs
  - making-of
  - study
permanent: true
title: Three.jsでセル・オートマトン
wp_post_type: post
aliases:
  - 2014/12/22/three-js-ca
visibility: public
modified: 2026-01-08T14:51:00.655Z
content_id: gPkyNMDECN39f8A4xMokh
---

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

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

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

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

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

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

```js
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)_