blog

• New release CON004 MUSH SPACE now on sale

  - 2016-07-22

  

  

  

  

  

  I released first album from CONDITIONAL label at UK. It's now on sale ! Cassette tape / digital data both is on band camp page: CON004 MUSH SPACE MOXUS

  TRACKLIST:

  1. 2(noise) 02:30
  2. SC_060718_172129 02:05
  3. tass 00:58
  4. no.3431 04:47
  5. practice_2016_05_03 01:22
  6. 2(perc) 02:59
  7. makuma 01:40
  8. offscreen 04:32
  9. Sq-1229 01:53
  10. SC_160602_002118 05:01
  11. Sq-1120 03:29
  12. mush space 03:21

• [告知] アルバム CON004 Mush Space リリース予定

  - 2016-07-05

  

  初アルバムとなる Mush Space CON004 が今週の8日にロンドンのCONDITIONALレーベルよりリリース予定です。

  カセットテープとデジタルデータでの配布になります。

  ウェブページにて予約販売開始しています。

  何年も前に撮った掘り出し音源や最近のHaskell musicまで色々な音源計12トラック！

  宜しくお願い致します。

  ---

  My first album will come out in this week.

  Release on cassette tape and digital data.

  Mush Space CON004

  Now we cam pre-order on the site !!

  By all means.

• openFrameworksをサクラVPSで動かす

  - 2016-03-10

  前提条件

  サクラVPS OS Ubuntu 14.04

  下準備

  $ sudo apt-get update
  
  $ sudo apt-get upgrade
  
  $ sudo apt-get install pkg-config
  

  o/Fインストール

  linux版のoFをDLしてきて解凍。

  $ wget http://www.openframeworks.cc/versions/v0.9.2/of_v0.9.2_linux64_release.tar.gz
  

  $ tar zxvf of_v0.9.2_linux64_release.tar.gz
  

  o/Fには各プラットフォームのインストール用のスクリプトが用意されているのでそれを使う。 今回はubuntu環境なのでlinux/ubuntuのスクリプトを使ってインストール。

  $ cd of_v0.8.4_linux64_release/scripts/linux/ubuntu
  
  $ sudo ./install_codeblocks.sh
  $ sudo ./install_dependencies.sh
  

  仮想ディスプレイ

  当たり前ですがサーバマシンにはディスプレイが繋がっていないのでopenglのコンテキストが作れません。oFのコンパイルはできてもランタイムでエラーします。そこで仮想ディスプレイを用意する。

  xvfbで仮想ディスプレイを作成

  $ sudo apt-get install xvfb
  
  $ Xvfb :1 -screen 0 1024x768x24 -nolisten tcp &
  

  これで準備できました、あとはプロジェクトを作ってmakeでビルドしましょう

  実行

  実行する時DISPLAY環境変数を与えます

  $ DISPLAY=:1 <Your App>
  

  リモートで確認

  肉眼で描画されてる様子を見たいならx11xncでvncを立ててリモートから接続しながら実行。

  $ x11vnc -listen 0.0.0.0 -rfbport 5900 -noipv6 -passwd password -display :1 -forever &
  

  以上です。

• the semi-closed system for tide and ferrum 潮位と鉄の半閉鎖的計測

  - 2015-03-31

  ちょっと前の話になりますが、2013年に行われた第5回恵比寿映像祭「パブリック⇄ダイアリー」に出展した "the semi-closed system for tide and ferrum 潮位と鉄の半閉鎖的計測" という作品のwebを公開しました。

  http://fe.gzk.jp

• 描画系プログラミング環境のShaderの違いメモ

  - 2015-01-09

  OpenGLをベースにした描画系プログラミング環境は基本GLSLによるシェーダーをサポートしているしているのでそれぞれの特徴や違いを調べてみた。 いろいろ間違っているところなとあるっともうので、用紙いただきたい＆指摘／修正してほしい。 グラフィックカードによって対応しているGLSLバージョンに違いがあり、それぞれ利用できる型や関数が異なるため注意。##Shaderって？

  各描画のレイヤーに対して、GPUにパイプラインで処理を渡す仕組み。

  主なシェーダーとしては、

  ・vertex shader: 頂点バッファに対して処理するためのシェーダー。

  ・fragmental shader:　ラスタライズ後のピクセルを操作するためのシェーダー、テクスチャーの合成とかもここでやる。

  ・geometry shader: よくわからないけどすごそう。

  などがある。

   

  より詳しく知りたい場合は以下などで解説されているので参考に。

  Introducing Shaders (openframeworks.cc)

  An intro to modern OpenGL. Chapter 2.2: Shaders

  https://processing.org/tutorials/pshader/

  【oFセミナーメモ2】 GLSL（Shader）テクニック

  [Swift SceneKit] SCNShadableでシェーダープログラムメモ(1)

   

  以下それぞれの環境の特徴を挙げ、その後大雑把にShaderプログラミングに共通している処理をプログラミング環境ごとに短いサンプルなどとともにまとめた。  

  ##openFrameworks（以下oF）

  ・GLSL #version 120 #version 150 などversion識別子で指定 （2.0系はどうだったか）

  ・ofShaderクラスでシェーダーファイルのロード

  ##THREE.js

  ・THREE.ShaderMaterialオブジェクトのアトリビュートとして割り当てる

  ・スニペットによるインライン（？）なglsl適応

  ##Processing

  ・PShaderクラスでロード

  ・2.0からP3D描画内ではデフォルトでGPU描画

  ##SceneKit(Swift)

  ・SCNProgram

  ・SCNShadable

  ・mterialのshader modifierとして割り当て

  ・スニペットによるglsl適応

  ・SCNTechnique (テクニック)による複雑なシェーダー（これについては今は触れない）

  ##Max/PSP Jitter

  ・よく知らないが多分サポートしてる

   

  ##シェーダーの読み込み

  oF

  ofShader myShader; myShader.load("YOUR_SHADER"); あとは draw() 内で begin() end() を呼ぶ

  myShader.begin(); ... myShader.end();

  THREE.js

  var myUniforms = { yourUniformsFloat: { type: "f", value: 1.0 }, ... }

  var material = new THREE.ShaderMaterial({ uniforms: myUniforms, attributes: myAttributes, vertexShader: "MY VERTEX SHADER CODE....", fragmentShader: "MY FRAGMENTAL SHADER CODE....", }) あとはマテリアルを割り当てた 3DObject を scene に追加する

  Processing

  PShader myShader; myShader = loadShader("YourFrag.glsl", "YourVert.glsl"); あとは draw() 内でshader()を呼ぶ

  shader(myShader);

  SceneKit SCNProgram で vertex shader をロード

  let program = SCNProgram() let material = SCNMaterial();

  let vertexShaderURL = NSBundle.mainBundle().URLForResource("yourShader", withExtension: "vert") let vertexShader = NSString(contentsOfURL: vertexShaderURL!, encoding: NSUTF8StringEncoding, error: nil)

  program.vertexShader = vertexShader material.program = program; shader modifier の場合

  let surfaceModifire = "YOUR GLSL CODE...."

  material.shaderModifiers = [ SCNShaderModifierEntryPointSurface: surfaceModifire ] あとはマテリアルを割り当てた SceneNode を scene に追加する

   

  ##テクスチャーの読み込み

  oF ofPlanePrimitive に setUniformTexture() というテクスチャーをバインドするメソッドが用意されている。 ofPlanePrimitive は単純な UV プレーンを作ってくれる

  plane.mapTexCoordsFromTexture(img.getTextureReference());

  これに ofTexture をバインドする

  texture.getTextureReference().bind();

  shader.begin(); ... plane.draw(); ... shader.end();

  glsl fragmental shader 内では sampler2DRect tex0 にバインドされる。

  uniform sampler2DRect tex0;

  THREE.js THREE.ShaderMaterial の uniform にセットする。

  var image = new Image(); var myUniforms = { texture1: { type: "t", value: image } }

  var material = new THREE.ShaderMaterial({ uniforms: myUniforms, })

  Processing プリミティブな図形の描画 beginShape() - endShape() の中で、PImage で画像ロードして、 texture() 関数で割り当てる。

  PImage img = loadImage("laDefense.jpg"); beginShape(); texture(img); vertex(10, 20, 0, 0); vertex(80, 5, 100, 0); vertex(95, 90, 100, 100); vertex(40, 95, 0, 100); endShape(); または PShape クラスの beginShape() - endShape() 間でセットする。

  PShape sh = createShape(); sh.beginShape(QUAD_STRIP); sh.texture(tex); ... sh.endShape();

  SceneKit SceneKitの場合 SCNMaterial のプロパティ content に様々な要素が指定できるようになっていて、 画像はテクスチャは NSImage か CGImageRef を渡すとテクスチャとして読み込まれるようになっている。 他にも以下の様なものを content 受け付ける。   ・色 : NSColor / CGColorRef

  ・画像 : NSImage / CGColorRef

  ・NSString / NSURL (画像ファイルの読み込み先）

  ・6画像のArray 上下左右にキューブマップされる

  ・Core Animation の layer

  ・SpriteKit の texture

  ・SpriteKit の シーン   content プロパティはいくつかの方法で適応されそれぞれ効果が違う 例えば diffuse.content なら拡散反射光として適応される。

  let material = SCNMaterial() let diffuseImage = NSImage(named: "myImage") material.diffuse.contents = diffuseImage   content の種類については以下↓

  Configuring a Material’s Visual Properties   また、Texcoord を指定して読み込ませたい場合 SCNProgram でテクスチャをバインドする必要があるが今はちょっとパス。  

  ##Uniformの更新

  当然CPUでの描画処理からGPUのシェーダにユーザーが定義した変数を渡したくなるのでそのためのパイプラインのしくみが用意されている。Uniformはシェーダー内で一意の名前で定義ができる変数。任意のタイミングで更新できるがそれぞれの開発環境によって用法が違っている。

  oF shader.begin(); ~ shader.end();

  内でset用のメソッドを呼ぶ

  setUniform1i(myUniformInt, myValue) setUniform1f(myUniformFloat, myValue) 等、uniformの型によて関数が用意されてる。

  THREE.js window.requestAnimationFrame()

  で呼んでいる animate() 関数内で　THREE.ShaderMaterial　の uniform プロパティに代入する。

  uniforms.yourUniformsFloat.value = myNewValue;

  Processing PShader の set() 関数を使う

  myShader.set("myUniform", myNewValue);

  SceneKit SCNProgramDelegate で行うもしくはマテリアルの handleBindingOfSymbol コールバックで行う。

  material.handleBindingOfSymbol("myUniform") { programID, location, renderedNode, renderer in glUniform1f(GLint(location), myNewValue)) }

   

  ##Attributeの更新

  Uniformとは違って、頂点バッファの頂点毎にシェーダーにパイプラインで値を渡せる、locationで指定したポインタ経由でアクセスする

  oF draw() 関数の中で shader の begin() - end() 間で各頂点にアクセスするためにまず GLint型 の loction を取得する (getAttributeLocation()) 引数には vertex shader 内での atrribute名 を渡す。

  セットする型によって別の glVertexAttrib 関数が用意されている。

  glVertexAttrib~ は頂点バッファの一つの頂点に対してシェーダをセットする、 なのですべての頂点を更新したい場合は頂点の数分コールする。

  myShader.begin(); ... GLint myLocation = myShader.getAttributeLocation("myAttribute");

  for (int i = 0; i < mesh.vertices.size(); i++) { myShader.setAttribute1i(myLocation, myIntegerValue); } ... myShader.end();

  THREE.js Uniform の時のように THREE.ShaderMaterial の attributes プロパティに渡すだけだが、 配列 value を geometry.vertices の lenght と同じサイズの配列で宣言してあげる必要がある。

  var myAttributes = { myAttributesVector3: { type: "v3", value: [] }, ... }

  // シェーダ側の v3 型に対応してる THREE.Vector3 を生成して代入 var displacement = attributes.myAttributesVector3.value;

  for( var i = 0; i < geometry.vertices.length; i++ ) { displacement[i] = new THREE.Vector3( 0, 0, 0 ); }

  var material = new THREE.ShaderMaterial({ uniforms: myUniforms, attributes: myAttributes, vertexShader: "MY VERTEX SHADER CODE....", fragmentShader: "MY FRAGMENTAL SHADER CODE....", }) あとは Uniform の時のように animate() 関数内で更新してあげる。

  needsUpdate = true;

  してあげないと更新されない、たしか。

  for( var i = 0; i <myAttributes.displacement.value.length; i ++ ) { myAttributes.attributes.displacement.value[ i ] = myNewThreeVector3 ; }

  attributes.displacement.needsUpdate = true;

  Processing ProcessingではユーザーのカスタムなAttributeをパイプするのはできなさそう？ PGLで実現している人がいた↓

  http://processing342.rssing.com/chan-5887731/all_p3.html この方法はoFとさほど変わらない感じ。 vertexAttribPointer() の引数は glVertexAttribPointer と同じ？

  FloatBuffer myValueBuffer;

  pgl = beginPGL();

  int myLocation = pgl.getAttribLocation(myShader.glProgram, "myAttribute"); pgl.enableVertexAttribArray(myLocation); pgl.vertexAttribPointer(myLocation, 4, PGL.FLOAT, false, 0, myValueBuffer);

  endPGL();

  SceneKit Geometry Semantic Identifiers が用意されている、

   

  key名

  形

  説明

  SCNGeometrySourceSemanticVertex

  NSString!

  --

  SCNGeometrySourceSemanticNormal

  NSString!

  --

  SCNGeometrySourceSemanticColor

  NSString!

  --

  SCNGeometrySourceSemanticTexcoord

  NSString!

  --

  SCNGeometrySourceSemanticVertexCrease

  NSString!

  --

  SCNGeometrySourceSemanticEdgeCrease

  NSString!

  --

  SCNGeometrySourceSemanticBoneWeights

  NSString!

  --

  SCNGeometrySourceSemanticBoneIndices

  NSString!

  --   ちょっとまとめきれないのでの後程どうにかしたい..。