blog

  • New release CON004 MUSH SPACE now on sale

    02

    04

    01

    05

    03

    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 リリース予定

    02

    初アルバムとなる 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で動かす

    前提条件

    サクラ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 潮位と鉄の半閉鎖的計測

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

    http://fe.gzk.jp

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

    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++ ) { displacementi = 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!

    --

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