Upgrade to Pro — share decks privately, control downloads, hide ads and more …

シェーダだけで世界を創る!three.jsによるレイマーチング

がむ
February 14, 2016

 シェーダだけで世界を創る!three.jsによるレイマーチング

シェーダだけで世界を創る!three.jsによるレイマーチング

GPU の熱でチョコも溶けちゃう!?
GLSL シェーダテクニック勉強会
@gam0022

がむ

February 14, 2016
Tweet

More Decks by がむ

Other Decks in Technology

Transcript

  1. ϨΠτϨʔγϯά๏ શϐΫηϧ਺γϛϡϨʔτ  Y  ສ ճ ॲཧ͸ॏ͍ ແݶʹ׈Β͔ɾ
 ෺ཧݱ৅ͷ࠶ݱ͕Մೳ

    19 ʲը૾ग़యʳ https://sites.google.com/site/ rendering1h/ ৄ͘͠͸ ϨΠτϨʔγϯάͷઐ໳Ո IPMFࢯʹฉ͍͍ͯͩ͘͞ eduptʢύετϨʔγϯάϕʔεͷ
 ෺ཧϕʔεϨϯμϥʣͷ࡞ऀ
  2. ϨΠϚʔνϯάͷΞϧΰϦζϜ Ϛʔνϯάϧʔϓͷ࣮૷ྫ 48 float dist, depth = 0.0; p =

    origin; for ( int i = 0; i < 64; i++ ){ dist = sceneDist( p ); depth += dist; p = origin + depth * ray; if ( abs(dist) < EPS ) break; }
  3. ٿମͷڑ཭ؔ਺ ݪ఺͕த৺ͷ൒ܘSͷٿମͷڑ཭ؔ਺ ݪ఺͔Βͷڑ཭൒ܘS ௒γϯϓϧ 53 float sphereDist(vec3 p, float r)

    { return length(p) - r; } ʲը૾ग़యʳ http://resources.esri.com/help/9.3/arcgisengine/java/api/arcobjects/ com/esri/arcgis/geometry/ISphere.html ́
  4. ๏ઢΛٻΊΔ 63 const float EPS = 0.01; vec3 getNormal( vec3

    p ) { return normalize(vec3( sceneDist(p + vec3( EPS, 0.0, 0.0 ) ) - sceneDist(p + vec3( -EPS, 0.0, 0.0 ) ), sceneDist(p + vec3( 0.0, EPS, 0.0 ) ) - sceneDist(p + vec3( 0.0, -EPS, 0.0 ) ), sceneDist(p + vec3( 0.0, 0.0, EPS ) ) - sceneDist(p + vec3( 0.0, 0.0, -EPS ) ) )); } ޯ഑ͷܭࢉ
 YZ[ͦΕͧΕগͣ͠Βͯ͠ɺ
 ڑ཭ؔ਺ͷࠩ෼Λܭࢉ
  5. ๏ઢΛٻΊΔ ਺ֶͰ͸ɺG Y Z [ ͰදͤΔۂ໘
 ͷ๏ઢϕΫτϧO͸
 O G`Y G`Z

    G`[ ͱGͷภඍ෼ʢޯ഑ʣ
 ͱͳΔͱ஌ΒΕ͍ͯΔ ڑ཭ؔ਺͸G Y Z [ ͰදͤΔۂ໘ʹ౳͍͠ ๏ઢOڑ཭ؔ਺ͷޯ഑ͱͯ͠ܭࢉՄೳ 64
  6. ڑ཭ؔ਺ͷແݶͷ܁Γฦ͠ NPEԋࢉͰQΛϧʔϓͤ͞Δ͜ͱͰɺ
 ແݶʹ܁Γฦ͠දࣔͰ͖Δ 71 float distSphere(vec3 p, float r) {

    return length(p) - r; } vec3 onRep(vec3 p, float interval) { return mod(p, interval) - interval * 0.5; } float distScene(vec3 p) { return distSphere(onRep(p, 4.0), 1.0); }
  7. ڑ཭ؔ਺ͷ࣮ફฤ ෯XJEUIͷ࢛֯பͷڑ཭ؔ਺ 73 float barDist(vec2 p, float width) { return

    length(max(abs(p) - width, 0.0)); } float sceneDist(vec3 p) { float bar_x = barDist(p.yz, 0.1); return bar_x; }
  8. ڑ཭ؔ਺ͷ࣮ફฤ Z࣠ͷ࢛֯பΛ࿨ू߹ 74 float sceneDist(vec3 p) { float bar_x =

    barDist(p.yz, 0.1); float bar_y = barDist(p.xz, 0.1); return min(bar_x, bar_y); }
  9. ڑ཭ؔ਺ͷ࣮ફฤ [࣠ͷ࢛֯பΛ࿨ू߹ 75 float sceneDist(vec3 p) { float bar_x =

    barDist(p.yz, 0.1); float bar_y = barDist(p.xz, 0.1); float bar_z = barDist(p.xy, 0.1); return min( min(bar_x, bar_y), bar_z); }
  10. ڑ཭ؔ਺ͷ࣮ફฤ ແݶͷ܁Γฦ͠ 76 vec2 onRep(vec2 p, float interval) { return

    mod(p, interval) - interval * 0.5; } float barDist(vec2 p, float interval, float width) { return length( max(abs(onRep(p, interval)) - width, 0.0)); } Q‎PO3FQ Q JOUFSWBM 
  11. ڑ཭ؔ਺ͷ࣮ફฤ ಉ༷ʹԁபΛແݶʹ܁Γฦ͠ 77 float tubeDist(vec2 p, float interval, float width)

    { return length(onRep(p, interval)) - width; } float sceneDist(vec3 p) { float tube_x = tubeDist(p.yz, 0.5, 0.025); float tube_y = tubeDist(p.xz, 0.5, 0.025); float tube_z = tubeDist(p.xy, 0.5, 0.025); return min(min(tube_x, tube_y),tube_z); }
  12. ڑ཭ؔ਺ͷ࣮ફฤ TDFOF%JTUશମ 80 float sceneDist(vec3 p) { float bar_x =

    barDist(p.yz, 1.0, 0.1); float bar_y = barDist(p.xz, 1.0, 0.1); float bar_z = barDist(p.xy, 1.0, 0.1); float tube_x = tubeDist(p.yz, 0.1, 0.025); float tube_y = tubeDist(p.xz, 0.1, 0.025); float tube_z = tubeDist(p.xy, 0.1, 0.025); return max(max(max(min(min(
 bar_x, bar_y),bar_z), 
 -tube_x), -tube_y), -tube_z); }
  13. three.js ͔ΒγΣʔμΛ࢖͏ ຕͷ൘ͷδΦϝτϦΛ࡞Γɺ
 ௖఺γΣʔμͱϑϥάϝϯτγΣʔμΛ
 ઃఆͨ͠ϚςϦΞϧΛద༻͢Δίʔυ 88 geometry = new THREE.PlaneBufferGeometry(2.0,

    2.0); material = new THREE.ShaderMaterial({ uniforms: { resolution: { type: "v2", value: new THREE.Vector2(512.0, 512.0) }, }, vertexShader: "௖఺γΣʔμ", fragmentShader: "ϑϥάϝϯτγΣʔμ", }); mesh = new THREE.Mesh(geometry, material);
  14. three.js ͔ΒγΣʔμΛ࢖͏ .BUFSJBMͷॳظԽͷ࣌ʹɺγΣʔμͷίʔυΛ౉͚ͩ͢ 89 geometry = new THREE.PlaneBufferGeometry(2.0, 2.0); material

    = new THREE.ShaderMaterial({ uniforms: { resolution: { type: "v2", value: new THREE.Vector2(512.0, 512.0) }, }, vertexShader: "௖఺γΣʔμ", fragmentShader: "ϑϥάϝϯτγΣʔμ", }); mesh = new THREE.Mesh(geometry, material);