GLSL Sandboxサーバーを動かす

提供: Akionux-wiki
Share/Save/Bookmark
移動: 案内検索

概要

GLSL Sandboxとは、mrdoob氏を中心に開発された、WebGLを利用してブラウザ上でGLSLのレンダリング結果を視覚的に確認しながらコーディングを行うことができるようなウェブアプリケーションである。

ここでは、GitHubで公開されているGLSL Sandboxのソースコードをダウンロードしてサーバー上で稼働させる手順を説明する。

環境

この記事はLinux Mint 15の環境でインストールした結果に基づいている。

手順

git cloneでソースコードをダウンロード

 git clone https://github.com/mrdoob/glsl-sandbox.git

Rubyの準備

GLSL SandboxではBundlerでGemパッケージ管理をしている[1]。まず、rubygemsとruby-devをインストール。

sudo apt-get install rubygems ruby-dev

bundlerをインストールする。

sudo gem install bundler --no-ri --no-rdoc

GLSL Sandboxのフォルダで次のコマンドを実行。

sudo bundle install

mongodbのインストール・設定

データベースにはmongodbを利用している。

mongodbをインストール

sudo apt-get install mongodb

mongodbでデータベースとユーザーを作成する。

mongo
> use glsl_sandbox_db
> db.addUser("glsl_sandbox", "glsl_sandbox")
> db.createCollection("counters")
> db.createCollection("versions")
> db.createCollection("code")
> exit

model.rbのENV['MONGOHQ_URL']の部分を"mongodb://glsl_sandbox:glsl_sandbox@localhost/glsl_sandbox_db"に書き換える。

uri = URI.parse("mongodb://glsl_sandbox:glsl_sandbox@localhost/glsl_sandbox_db")
conn = Mongo::Connection.from_uri("mongodb://glsl_sandbox:glsl_sandbox@localhost/glsl_sandbox_db")

Cloudinaryを使っている点の対処

GLSL Sandboxでは外部サービスCloudinary[2]をサムネイル画像のアップロード先として使っているので、そのまま使おうとするとapi_keyを出せと怒られる。Cloudinaryを使っても良いのだが、他のサービスに依存したくないのでサムネイル画像アップロード先を自分のサーバーに改造した。

server/model.rbのcode_data['image']はdata_urlというものなので、これをバイナリに変換してファイルに書き込む[3]ことでpngファイルとして保存する。

server/model.rbに変更を加える必要がある。 diff -ur オリジナルのserver/model.rb 変更後のserver/model.rbの結果は次のようになる:

--- glsl-sandbox.orig/server/model.rb	2014-08-04 17:56:12.622290982 +0900
+++ glsl-sandbox/server/model.rb	2014-03-16 23:07:36.510324312 +0900
@@ -1,6 +1,36 @@
 
+require 'open-uri'
+def save_file(data, filename)
+	#filename = File.basename(url)
+	open(filename, 'wb') do |file|
+		file.write(data)
+		#open(url) do |data|
+		#	file.write(data.read)
+		#end
+	end
+end
+
+def convert_data_url_to_image(data_url, file_path)
+	split_data = splitBase64(data_url)
+	file_path = "#{file_path}"
+	imageDataString = split_data[:data]
+	imageDataBinary = Base64.decode64(imageDataString)
+	File.open("#{file_path}", "wb") { |f| f.write(imageDataBinary) }
+	return true
+end
+def splitBase64(uri)
+	if uri.match(%r{^data:(.*?);(.*?),(.*)$})
+		return {
+			:type =>      $1, # "image/png"
+			:encoder =>   $2, # "base64"
+			:data =>      $3, # data string
+			:extension => $1.split('/')[1] # "png"
+		}
+	end
+end
+
 class Effects
-    def initialize(effects, extra={})
+	def initialize(effects, extra={})
         @effects=effects
         @extra={
             :page => 0,
@@ -66,11 +96,13 @@
             :code => code_data['code']
         }
 
-        res=Cloudinary::Uploader.upload(
-            code_data['image'],
-            :public_id => code_id.to_s)
+		#FIXME
+        #res=Cloudinary::Uploader.upload(
+        #    code_data['image'],
+        #    :public_id => code_id.to_s)
 
-        image_url=res['url']
+        image_url='image/' << code_id.to_s << '.png' #res['url']
+		convert_data_url_to_image(code_data['image'], 'server/assets/' << image_url)
 
         @code.find_and_modify({
             :query => { :_id => code_id },
@@ -192,8 +224,8 @@
 private
 
     def connect_database
-        uri = URI.parse(ENV['MONGOHQ_URL'])
-        conn = Mongo::Connection.from_uri(ENV['MONGOHQ_URL'])
+        uri = URI.parse("mongodb://glsl_sandbox:glsl_sandbox@localhost/glsl_sandbox_db")
+        conn = Mongo::Connection.from_uri("mongodb://glsl_sandbox:glsl_sandbox@localhost/glsl_sandbox_db")
         @db = conn.db(uri.path.gsub(/^\//, ''))
 
         @versions=@db.collection('versions')

パッチを当てるときは上記の差分をmodel.rb.patchとして保存し、

cd /path/to/glsl-sandbox
patch -p1 < model.rb.patch

とする。

サムネイル画像を格納するフォルダを作っておく。

mkdir server/assets/image

起動

GLSL SandboxはWEBrickというWebサーバー用フレームワーク[4]を用いている。

以下のようにしてサービスを実行する:

# mongod --dbpath /var/lib/mongodb/ &
$ cd /path/to/glsl-sandbox/
$ ruby server/main.rb &

References

  1. http://www.milligramme.cc/wp/archives/3475
  2. http://programmer-jobs.blogspot.jp/2013/05/ruby-on-railsheroku-cloudinary.html
  3. http://dev-feeds.blogspot.jp/2013/07/ruby-on-rails-convert-data-url-into.html
  4. http://thinkit.co.jp/article/117/1/