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
   খࢁాߊߒ
   

   View Slide

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

   View Slide

3. w 1IZTJDBM#BTFE3FOEFSJOH
   

   ෺ཧϕʔεϨϯμϦϯά
   w ʮܦݧଇʯͰ͸ͳ͘ɺ
   

   ʮΤωϧΪʔอଘଇʯʹجͮ͘
   

   .VTUBEIFSFUPUIFFOFSHZDPOTFSWBUJPOQSJODJQMF
   w ͟Β͟Βɺۚଐ࣭ɺͳͲͷύϥϝʔλ
   

   "EKVTUXJUITNPPUIOFTT NFUBMMOFTTFUD
   

   1#3
   

   View Slide

4. ൓ࣹޫͷ૯ྔ͸ೖࣹޫΛ௒͑ͳ͍
   

   0VUHPJOHMJHIUOFWFSCSJHIUFSUIBOJODPNJOH
   

   View Slide

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

   0VUHPJOHMJHIUOFWFSCSJHIUFSUIBOJODPNJOH
   

   View Slide

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

   0VUHPJOHMJHIUOFWFSCSJHIUFSUIBOJODPNJOH
   

   View Slide

7. ޫ୔͕΄͍͠ʜ
   

   1IPOH୯ʹεϖΩϡϥΛ૿΍͢
   

   1#3πϧπϧʹ֦ͯ͠ࢄΛݮΒ͢
   1IPOH.PEFM
   

   View Slide

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

   :PVDBOMFBSO1#3BU1JYBSTFYIJCJUJPO#58
   

   View Slide

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

   :PVDBOMFBSO1#3BU1JYBSTFYIJCJUJPO#58
   

   View Slide

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
    

    View Slide

11. All demos were rendered in three.js
    

    View Slide

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,
    
    
    } )
    

    View Slide

13. https://yomotsu.github.io/examples/2022-10-05-techfeed-experts-night-5/1/
    ͥͻɺ͓खݩͰ͓ࢼ͍ͩ͘͠͞ʂ
    5SZUIJTZPVSTFMG
    

    View Slide

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

    View Slide

15. w HM5'ͷ࢓༷ʹ଍Γͳ͍ػೳ͸֦ு͍͍ͯ͠
    

    HM5'GPSNBUDBOCFFYUFOEFE
    w HM5'ͷओͳ֦ு͸ɺUISFFKT΋αϙʔτ͢Δ
    

    ʢ#BCZMPOKT΍1MBZ$BOWBT΋ಉ༷ʣ
    

    UISFFKTBOEPUIFSMJCTTVQQPSUUIFFYUFOTJPOT
    HM5'༝དྷͷ֦ு
    

    View Slide

16. base color
    
    
    metalness
    
    
    roughness
    
    
    normal
    
    
    occlusion
    
    
    emissive
    
    
    ...
    

    View Slide

17. View Slide

18. https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_ior
    HM5'֦ுͷࡦఆʹ͸
    

    &ίϚʔεͷձࣾ΋ଟ਺ࢀՃ
    

    ʢ"NB[POɺ4IPQJGZɺXBZGBJSɺ5BSHFUɺ*,&"ͳͲʣ
    

    .BOZ&$PNNFSDFDPNQBOJFTBSFBUUFOEJOH
    

    View Slide

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

    View Slide

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

    View Slide

21. View Slide

22. w ϦΞϧλΠϜ%͸ɺ1#3Ͱ͚ͬ͜͏ϦΞϧ
    

    3FBMUJNF8FC%JTBDUVBMMZ RVJUFSFBMXJUI1#3
    w ʮήʔϜʯʮ঎඼ʯͳͲ͍Ζ͍Ζ࢖͑Δ
    

    $BOCFVTFEHBNFT QSPEVDUTBOEPUIFST
    w HM5'ͷ֦ு͸ɺ1#3ͷਐԽ
    

    1#3JTFWPMWJOHXJUIHM5'FYUFOTJPOT
    w ֤ϥΠϒϥϦͷ1#3ਐԽ͍ͯ͠Δ
    

    8FC%MJCTBSFBMTPFWPMWJOH
    $PODMVTJPOT
    

    View Slide

23. w ͨͩ͠1#3͸͢͜͠ॏ͍ʜ
    

    ಛʹUSBOTNJTTJPO
    
    

    BDUVBMMZ TMJHIUMZIFBWZ
    w .FTI4UBOEBSE.BUFSJBM΍
    

    .FTI(PVSBVE.BUFSJBM΋ݕ౼͠Α͏
    

    ʢ.FTI(PVSBVE.BUFSJBM͸QFSWFSUFYͷ-BNCFSUϞσϧʣ
    

    NBZDPOTJEFSVTJOHPUIFST
    $PODMVTJPOT
    

    View Slide

24. ͓ΘΓ
    !ZPNPUTV
    

    View Slide