PBR in three.js

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

Transcript

1. UISFFKT
   ͷ
   1#3 5FDI'FFE
   &YQFSUT
   /JHIU 
   খࢁా
   ߊߒ
2. גࣜձࣾϐΫηϧάϦου খࢁా
   ߊߒ @yomotsu
3. w 1IZTJDBM
   #BTFE
   3FOEFSJOH 
 ෺ཧϕʔεϨϯμϦϯά
   w ʮܦݧଇʯͰ͸ͳ͘ɺ 
 ʮΤωϧΪʔอଘଇʯʹجͮ͘ 
 .VTU
   BEIFSF
   UP
   UIF
   FOFSHZ
   DPOTFSWBUJPO
   QSJODJQMF
   w ͟Β͟Βɺۚଐ࣭ɺͳͲͷύϥϝʔλ 
 "EKVTU
   XJUI
   TNPPUIOFTT
   NFUBMMOFTT
   FUD 
 1#3
4. ൓ࣹޫͷ૯ྔ͸ೖࣹޫΛ௒͑ͳ͍ 
 0VUHPJOH
   MJHIU
   OFWFS
   CSJHIUFS
   UIBO
   JODPNJOH
5. ൓ࣹޫͷ૯ྔ͸ೖࣹޫΛ௒͑ͳ͍ 
 0VUHPJOH
   MJHIU
   OFWFS
   CSJHIUFS
   UIBO
   JODPNJOH
6. ൓ࣹޫͷ૯ྔ͸ೖࣹޫΛ௒͑ͳ͍ 
 0VUHPJOH
   MJHIU
   OFWFS
   CSJHIUFS
   UIBO
   JODPNJOH
7. ޫ୔͕΄͍͠ʜ 
 1IPOH
   ୯ʹεϖΩϡϥΛ૿΍͢ 
 1#3
   πϧπϧʹ֦ͯ͠ࢄΛݮΒ͢ 1IPOH
   .PEFM
8. 1JYBS
   ͷలࣔʹߦ͘ͱ
   1#3
   %JTOFZ
   1SJODJQMFE
   #3%'
   Λֶ΂·͢ 
 :PV
   DBO
   MFBSO
   1#3
   BU
   1JYBST
   FYIJCJUJPO
   #58
9. 1JYBS
   ͷలࣔʹߦ͘ͱ
   1#3
   %JTOFZ
   1SJODJQMFE
   #3%'
   Λֶ΂·͢ 
 :PV
   DBO
   MFBSO
   1#3
   BU
   1JYBST
   FYIJCJUJPO
   #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/ ͥͻɺ͓खݩͰ͓ࢼ͍ͩ͘͠͞ʂ
    5SZ
    UIJT
    ZPVSTFMG
14. https://yomotsu.github.io/examples/2022-10-05-techfeed-experts-night-5/2/
15. w HM5'
    ͷ࢓༷ʹ଍Γͳ͍ػೳ͸֦ு͍͍ͯ͠ 
 HM5'
    GPSNBU
    DBO
    CF
    FYUFOEFE
    w HM5'
    ͷओͳ֦ு͸ɺUISFFKT΋αϙʔτ͢Δ 
 ʢ#BCZMPOKT
    ΍
    1MBZ
    $BOWBT
    ΋ಉ༷ʣ 
 UISFFKT
    BOE
    PUIFS
    MJCT
    TVQQPSU
    UIF
    FYUFOTJPOT HM5'
    ༝དྷͷ֦ு
16. base color metalness roughness normal occlusion emissive ...
18. https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_ior HM5'
    ֦ுͷࡦఆʹ͸ 
 &
    ίϚʔεͷձࣾ΋ଟ਺ࢀՃ 
 ʢ"NB[POɺ4IPQJGZɺXBZGBJSɺ5BSHFUɺ*,&"
    ͳͲʣ 
 .BOZ
    &$PNNFSDF
    DPNQBOJFT
    BSF
    BUUFOEJOH
19. https://help.shopify.com/ja/partners/resources/creating-media/3d-models/creating-3d-models/
20. https://webgi.pixotronics.com/
22. w ϦΞϧλΠϜ
    %
    ͸ɺ1#3
    Ͱ͚ͬ͜͏ϦΞϧ 
 3FBMUJNF
    8FC
    %
    JT
    BDUVBMMZ
    RVJUF
    SFBM
    XJUI
    1#3
    w ʮήʔϜʯʮ঎඼ʯͳͲ͍Ζ͍Ζ࢖͑Δ 
 $BO
    CF
    VTFE
    HBNFT
    QSPEVDUT
    BOE
    PUIFST
    w HM5'
    ͷ֦ு͸ɺ1#3
    ͷਐԽ 
 1#3
    JT
    FWPMWJOH
    XJUI
    HM5'
    FYUFOTJPOT
    w ֤ϥΠϒϥϦͷ
    1#3
    ਐԽ͍ͯ͠Δ 
 8FC
    %
    MJCT
    BSF
    BMTP
    FWPMWJOH $PODMVTJPOT
23. w ͨͩ͠
    1#3
    ͸͢͜͠ॏ͍ʜ 
 ಛʹUSBOTNJTTJPO 
 BDUVBMMZ
    TMJHIUMZ
    IFBWZ
    w .FTI4UBOEBSE.BUFSJBM
    ΍ 
 .FTI(PVSBVE.BUFSJBM
    ΋ݕ౼͠Α͏ 
 ʢ.FTI(PVSBVE.BUFSJBM
    ͸
    QFSWFSUFY
    ͷ
    -BNCFSU
    Ϟσϧʣ 
 NBZ
    DPOTJEFS
    VTJOH
    PUIFST $PODMVTJPOT
24. ͓ΘΓ
    !ZPNPUTV