$30 off During Our Annual Pro Sale. View Details »

PBR in three.js

yomotsu
October 05, 2022

PBR in three.js

yomotsu

October 05, 2022
Tweet

More Decks by yomotsu

Other Decks in Technology

Transcript

  1. UISFFKTͷ1#3 5FDI'FFE&YQFSUT/JHIU খࢁాߊߒ

  2. גࣜձࣾϐΫηϧάϦου খࢁాߊߒ @yomotsu

  3. w 1IZTJDBM#BTFE3FOEFSJOH 
 ෺ཧϕʔεϨϯμϦϯά w ʮܦݧଇʯͰ͸ͳ͘ɺ 
 ʮΤωϧΪʔอଘଇʯʹجͮ͘ 
 .VTUBEIFSFUPUIFFOFSHZDPOTFSWBUJPOQSJODJQMF

    w ͟Β͟Βɺۚଐ࣭ɺͳͲͷύϥϝʔλ 
 "EKVTUXJUITNPPUIOFTT NFUBMMOFTTFUD 
 1#3
  4. ൓ࣹޫͷ૯ྔ͸ೖࣹޫΛ௒͑ͳ͍ 
 0VUHPJOHMJHIUOFWFSCSJHIUFSUIBOJODPNJOH

  5. ൓ࣹޫͷ૯ྔ͸ೖࣹޫΛ௒͑ͳ͍ 
 0VUHPJOHMJHIUOFWFSCSJHIUFSUIBOJODPNJOH

  6. ൓ࣹޫͷ૯ྔ͸ೖࣹޫΛ௒͑ͳ͍ 
 0VUHPJOHMJHIUOFWFSCSJHIUFSUIBOJODPNJOH

  7. ޫ୔͕΄͍͠ʜ 
 1IPOH୯ʹεϖΩϡϥΛ૿΍͢ 
 1#3πϧπϧʹ֦ͯ͠ࢄΛݮΒ͢ 1IPOH.PEFM

  8. 1JYBSͷలࣔʹߦ͘ͱ1#3 %JTOFZ1SJODJQMFE#3%' Λֶ΂·͢ 
 :PVDBOMFBSO1#3BU1JYBSTFYIJCJUJPO#58

  9. 1JYBSͷలࣔʹߦ͘ͱ1#3 %JTOFZ1SJODJQMFE#3%' Λֶ΂·͢ 
 :PVDBOMFBSO1#3BU1JYBSTFYIJCJUJPO#58

  10. w S  Ͱ.FTI4UBOEBSE.BUFSJBM௥Ճ w S  Ͱ.FTI1IZTJDBM.BUFSJBM௥Ճ w .FTI1IZTJDBM/PEF.BUFSJBMͱ.FTI4UBOEBSE/PEF.BUFSJBM

    w ͍·΋ɺHM5'ͷ֦ுʹ൐ͬͯ 
 .FTI1IZTJDBM.BUFSJBM͸֦ு͞Εଓ͚Δ 
 ʢUSBOTNJTTJPOɺTIFFOɺJSJEFTDFODFͳͲʣ UISFFKTͰͷ1#3
  11. All demos were rendered in three.js

  12. new THREE.MeshPhysicalMaterial( { color: new THREE.Color( 0xffffff ), emissive: new

    THREE.Color( 0x000000 ), roughness: 0.2, metalness: 0, normalMap: null, attenuationColor: new THREE.Color( 0xffffff ), iridescence: 0, clearcoat: 0.3, clearcoatRoughness: 0.25, transmission: 0, ior: 1.5, thickness: 10.0, sheen: 0, sheenColor: new THREE.Color( 0xffffff ), ior: 1.2, } )
  13. https://yomotsu.github.io/examples/2022-10-05-techfeed-experts-night-5/1/ ͥͻɺ͓खݩͰ͓ࢼ͍ͩ͘͠͞ʂ 5SZUIJTZPVSTFMG

  14. https://yomotsu.github.io/examples/2022-10-05-techfeed-experts-night-5/2/

  15. w HM5'ͷ࢓༷ʹ଍Γͳ͍ػೳ͸֦ு͍͍ͯ͠ 
 HM5'GPSNBUDBOCFFYUFOEFE w HM5'ͷओͳ֦ு͸ɺUISFFKT΋αϙʔτ͢Δ 
 ʢ#BCZMPOKT΍1MBZ$BOWBT΋ಉ༷ʣ 
 UISFFKTBOEPUIFSMJCTTVQQPSUUIFFYUFOTJPOT

    HM5'༝དྷͷ֦ு
  16. base color metalness roughness normal occlusion emissive ...

  17. None
  18. https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_ior HM5'֦ுͷࡦఆʹ͸ 
 &ίϚʔεͷձࣾ΋ଟ਺ࢀՃ 
 ʢ"NB[POɺ4IPQJGZɺXBZGBJSɺ5BSHFUɺ*,&"ͳͲʣ 
 .BOZ&$PNNFSDFDPNQBOJFTBSFBUUFOEJOH

  19. https://help.shopify.com/ja/partners/resources/creating-media/3d-models/creating-3d-models/

  20. https://webgi.pixotronics.com/

  21. None
  22. w ϦΞϧλΠϜ%͸ɺ1#3Ͱ͚ͬ͜͏ϦΞϧ 
 3FBMUJNF8FC%JTBDUVBMMZ RVJUFSFBMXJUI1#3 w ʮήʔϜʯʮ঎඼ʯͳͲ͍Ζ͍Ζ࢖͑Δ 
 $BOCFVTFEHBNFT QSPEVDUTBOEPUIFST

    w HM5'ͷ֦ு͸ɺ1#3ͷਐԽ 
 1#3JTFWPMWJOHXJUIHM5'FYUFOTJPOT w ֤ϥΠϒϥϦͷ1#3ਐԽ͍ͯ͠Δ 
 8FC%MJCTBSFBMTPFWPMWJOH $PODMVTJPOT
  23. w ͨͩ͠1#3͸͢͜͠ॏ͍ʜ 
 ಛʹUSBOTNJTTJPO 
 BDUVBMMZ TMJHIUMZIFBWZ w .FTI4UBOEBSE.BUFSJBM΍ 


    .FTI(PVSBVE.BUFSJBM΋ݕ౼͠Α͏ 
 ʢ.FTI(PVSBVE.BUFSJBM͸QFSWFSUFYͷ-BNCFSUϞσϧʣ 
 NBZDPOTJEFSVTJOHPUIFST $PODMVTJPOT
  24. ͓ΘΓ !ZPNPUTV