OM3D - TP1 - HackMD

# OM3D - TP1 [toc] ## Découverte du code donné Nous vous fournissons un moteur très basique pour démarrer directement dans le vif du sujet. Il est important de bien comprendre l'architecture du code pour avancer de manière fluide par la suite. Le code source est disponible ici : https://github.com/AlexandreLamure/OM3D --- Les dossiers sont organisés de la manière suivante : |- `data/` ---------- modèles 3D, textures, etc. |- `external/` ----- bibliothèques externes |- `shaders/` ------ shaders OpenGL |- `src/` ----------- code c++ --- Nous utilisons les bibliothèques externes suivantes : - [glad](https://github.com/Dav1dde/glad) : [Loader d'OpenGL](https://www.khronos.org/opengl/wiki/OpenGL_Loading_Library#glad_.28Multi-Language_GL.2FGLES.2FEGL.2FGLX.2FWGL_Loader-Generator.29) - [glfw](https://github.com/glfw/glfw) : Gestionnaire de fenêtres - [glm](https://github.com/g-truc/glm) : Lib de maths - [imgui](https://github.com/ocornut/imgui) : UI - [stb](https://github.com/nothings/stb) : Image loader/writer - [tinygltf](https://github.com/syoyo/tinygltf) : Loader de glTF --- Voici un diagramme non exhaustif du code. Les flèches ne représentent pas de l'héritage mais plutôt des liens logiques. Vous pouvez aussi le visionner en plein écran [ici](https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1&title=OM3D_TP.drawio#R7R1rc6O29td47t7OxMPDgPkYJ83uncnO9ja57e2njAyyrS4GKiCJ%2B%2BsrCQkDkm1IwOvYbDu7RoCQdN5H5xyNzJv162cM4tXXyIfByND815F5OzIMw7VN8g9t2eQtujXV8pYlRn7eVmp4QH9D%2FqBozZAPE96WN6VRFKQorjZ6URhCL620AYyjl%2BpjiyjwKw0xWEKp4cEDgdz6O%2FLTVd46NZxt%2BxeIlivxZd128ztz4H1f4igL%2BfdGhnnH%2FuS310D0xSearIAfvZSazJ9H5g2OojT%2FtX69gQFd3Oqy3e24W4wbwzBt8gL4%2Fnh%2F62Tzvzb%2Fxe5T9Jv39J%2FrKyvv5RkEGV%2BPb1%2F5bLQk3YhFSl7QOgAhuZotMfAR%2BeRNFESY3A0j1iyeuEf08lYvNd2hINjx9BcI%2FNrTs4ihEm1aRRj9HYUpCHjDotSTDxcgC8jMZ%2FJC8LV5hjiFr6UmvjCfYbSGKd6QR8Rdl7%2ByqSLnyxYjdEfjqL6qoMOEowPgeLgsOt%2FCgvzg4GgBGncqwUaCC%2FQJLvPLCKeraBmFIPh52zpjCArpdzRytX3mPopivqp%2FwjTdcMIEWRrRlU%2FXxZoTANyBNQro0nyBwTNMkQf4Df6WQfuGryj9P%2F3O2LH45R%2B8D%2Fr79pWPgV1s%2BIUMu31omkQZ9uCe5yYcRCnAS7ivQ5f3SBdwL4JgGIAUPVeZhQrW%2FNVfIkRmUiDWpIpXBF%2BqPeQz4i%2FVEKYYxdtxaPJxcEg3ukcHY9IQHSado8O7SF%2BMuwS2Bw8SzrmHL5d5IxFFC4v%2Bx5e41J7%2Fofw2xdF3WLpjsz8VcOtqxr4MQJJwbAijezCHAb%2FyKLcmD%2BLiOghAnKB5IN6lwxTYxhGlHdCbM3XDrNCeaUk83TRcBUt37L7AKkvbkWEzGbYiU7GXuTTLWyjcKsC2%2F8oiceMqYURzTR7Qjfg1f43fp0oQ8KrvbGmu9Fj%2BvVuYeBjFKYpC8Wkyufzr1RGRZnmY8Y5xtxnCDXmFqhTktYwiueaB9ejGHF27mDx9Q7VLoiEaWjQnbIb%2BgGnRFlDAJWPx9TkWnf4CM%2FoU6%2Bc6xbRbFKIUgQAleee06RkB9lWqiAaPd%2BPDS1CacI0YCVqmVb4n05g3hfOFTK0%2BgNOFR9%2BIgYfCJWm1tlePjM1eMSn7skIpfIjz1X0hOjnlyIQmFgHTLVfI92Eo8ewyxSoosMKf7zMP%2BXRVCFiSiAmAMpvWm1Nswcaa62HTSYVmhTwv62FCM6%2FQrNYXKxYjUNBsFijpMyD870oMjlHoeFoj0CpSBWgX7QtjSbyp7%2B5kF9lJ0JR6eCZWVUTJBqwpMrHemLT5RsjNS4sbdULYQR87muVJnuC0mR52zyCnnPWWu5zVOpj0Y1n45CNMFqWRIPiAs%2FMYuz2bmd2ANaTisbP5kEbK0d4o3Lhhv5BtfSJwl0Qi3QZwkUMEUy0guObNayKxmJBRSbZWUqx7qSSstonCG2ArpJBl9CWFdIUUOmE7busL%2BGGuAFs4Ew%2FZfqZ7HFeArVd9AbbjHNUXIOZZwqHfchI4S6syIYAv%2FFNma%2FxqrrNahj22KpB1xFKXGYatUlt7MzUnxqmqre%2BQ4nGUoGbqSWfS%2Bh2jDSO8BsHHGGv2fPrjnDBmHi6Zo6C9Pv6jh0%2BXuaEKerm6WSGjmutmRkNWa5k9sVpLxWpPWDfrWM8SrvPDPvbO9az3gc0ewNYEbIJuTgRsE9mHXnFWnaMq25vm6joVvVW1Q2JqR1VbVUQ57JDM%2Fkc3KNj2B%2Fn3U75JkgKKNGx7hO1fxBAnURjScJdt4zrD4%2FH434fHPWxrNKazSWtC050qoam2Nczjbms4p2ofduUfXYOUWQwYhMmCmGLn4%2Fl9SImc9b7CZPXT%2BUzqK0ghRiDockqXYjW1YEh7PNq2pbKa%2BvJoO3KIy0Wp325D9dvRT0r9di47oKw52E4roGwi%2B%2F4Fwx1Mpjaa3NSuBpUZU122mUTk7nFsJksbbCbVEH6FMc4DvRKCBNRionoHjcvnsWUIZOTa%2F1dWMq6o4RQA9iX2lEPHr%2Fn51xHTjNmuO6Hb0M%2BGcLFO7armzt8iwlOr2lUKtUZoMMexqyzVRv1Z2VW%2F4GiJwfqMTA9VJFgMUK0lM42cPTwSus0w%2FGlUDxE7yzC5WUAYHU37Op8p3cI4XT3CJO14WhdjbrbfpJP5cpEWdxxz01YpSSdstxAI4E0pgope%2FsG%2Fyy62MVTsqqcgKqtpPpXlnJS9Y1%2B2d6Ex2OzT8i5YcrD91tk5GKptVOOJ0cBQFU64IxmqKqIcDNXZZ2ZpTnFuotKkpnm2WEBMf32LYfj5XjJTB6uzM6uz4DnNrU5hZu7ZzdNU4eFaX6ni1u7Ewg8Y7fm4iaE%2FYyRQNcFEuHI7S%2BuHBv7tnAszJ6sT0RAhhtenuXh6MEDeT7J7DBBlZEtvBsj0BDdODjDRPhRTp6FiOrVPSzGVwyUqlD1opm2CYarZEhNX1kwN46jpVZaKOAfNdHY9J%2BgIeEqoUEGFfNLSTZzvpAz6aJf6qNOWoAyzln%2BkUkin%2BlgR3yGkUvcOGHkfhNrwtyAFA7dsZcdbeh26Cn5p6qroQdvpC7rGwC8PFDJhm8g%2BQ%2FfBdu%2BLVxZcpkWhN6NKTDItFZvDx7Hd7ZMtMNLVXuoHNNtV09hhsSOPuuwGY70DGm1rrE%2F6SumTHdWsKiYhNvP6YQX8%2FSZfb4aTaVUdj47wMlYSdhTcayI2W%2FdUK%2FiVoDwIlyxGin%2BwFl1jKYpi6opQN6O2gQCCFOIQpHBG0SuRoNNBbQNd3t69w2ANL17fbF2BqwZzw1YA3VUSo9UTMeqyKfGBBWRetifHS1rnrlENnx8tC0sFoj7OYN%2BcbH%2FE4WZ5hZiY1nx5YqUMybCzsIGVcLkKRcHrmysUcl6rmofpvfEw2WAuM4JBQL1ZQBVOjkoqkwK40z0q0Ptge1YGHE%2BbfEbw5SnG0Z8DJ2pA1e%2FiRBMFsvamTMn59aJKGS97ObCiN7MiVdUvFXD7EzNylteJcKIOQ%2FXNwgkTzpM453PNC4N9lBj1HRM9sxqmiyAC9FV6pEjWwIs2SKAd7LxzAeT2pi0NW%2B3KITykOPNoXlHC3MpekCXspw9CVuaelcVn%2BSoaWfgZ%2B18T35vXB5CJhsqGU1Z6rMZZimeKrooP078T5vRMhnzHTvMd2%2Bobukgs3qNw6KoqDr2lOzqyb47nB160JtnetW%2B4dgW0yqCoqeoAqt7C9Z1hk79BUNSBUbyhfx4tkPB9Ji0WBKV9CiATEaMipGCBvBWiT90w8bCOEY2GpAOjDXMU%2BqIWGKI1kPKzU7yhHlinfNxpvsMpDMdqJXBF2rpx3FNOpipar8H9jPPlRETq4bIup1XDdKrK%2BxjAJq%2FTadUwdWSw8aICg9bUho26RgOlSagxR1KahgKmDZSmBOJnwPpgAeREidKWvCgPU3m6V6p4yVRBZdu8yk8eLxKk1JvWKF4T9B7Upj7UpvYHOh5Wm1TRTz2av7LDnYUdzYe0oPaV1bTDh6gUm7jVtKC%2BkhimclTZwMwlZs5N0e559qJMStqnLVeeB4iXahu4cudcuX0RNuMwV1ZEibq9GUVyPAbXri8%2B2Ka9X1KvHWCuPNrKUvmce1OxxRGxA1duknzEuOQrYdco3Z53vGOISTpHA9d8C9ecti8iclCX1XVlDZHe2KZsuc42KRwy3N%2BS4V4NDFKqsuZRM9ynu897uGimqVJlu9ZjR7Xd9kKlFU6IQX3tjhE3j4hpkz3vHjd73pUdxOK454EPt3ApVAGrKoGnDtDsTXd1T%2FbYnXfEir81TPzHRLW%2FZaSXEk7oNiexPQfJCG3nOJqNSOjftwearEBMfy4C%2BHqNMRVbMxj6%2FOetRxcPeVUYVte3bd0ssR6GtU%2Fy7pTVZHC%2Fix7M8YRwMkcXfzv5ffE1d6xPS7fVJ103LfNaAqOlYIyi7Z0noetWdd9O1%2BxauOmOo9AP9iR8A6KffGe4tyPV3d2pP011aAKnd%2BnQXwiFk1dCAg16nMUO3qaICeBSu4zygh159LwMvI8hYUhmAHKhTsmDJTCyNbdmI%2BtWQRCHCAhHab4DR7ROt0Ul64L86yyLxkOFIU1qn4tpa3u1hSttrFtOzSzvBN%2BvaokiVxOzlgESLRYJ7AdFd3vLjoWiM5AMGPqxMNSsd%2FEWBCWXOKKYsH2cqC4reuoCfeIf). <iframe frameborder="0" style="width:180%;height:900px;" src="https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1&title=OM3D_TP.drawio#R7R1rc6O29td47t7OxMPDgPkYJ83uncnO9ja57e2njAyyrS4GKiCJ%2B%2BsrCQkDkm1IwOvYbDu7RoCQdN5H5xyNzJv162cM4tXXyIfByND815F5OzIMw7VN8g9t2eQtujXV8pYlRn7eVmp4QH9D%2FqBozZAPE96WN6VRFKQorjZ6URhCL620AYyjl%2BpjiyjwKw0xWEKp4cEDgdz6O%2FLTVd46NZxt%2BxeIlivxZd128ztz4H1f4igL%2BfdGhnnH%2FuS310D0xSearIAfvZSazJ9H5g2OojT%2FtX69gQFd3Oqy3e24W4wbwzBt8gL4%2Fnh%2F62Tzvzb%2Fxe5T9Jv39J%2FrKyvv5RkEGV%2BPb1%2F5bLQk3YhFSl7QOgAhuZotMfAR%2BeRNFESY3A0j1iyeuEf08lYvNd2hINjx9BcI%2FNrTs4ihEm1aRRj9HYUpCHjDotSTDxcgC8jMZ%2FJC8LV5hjiFr6UmvjCfYbSGKd6QR8Rdl7%2ByqSLnyxYjdEfjqL6qoMOEowPgeLgsOt%2FCgvzg4GgBGncqwUaCC%2FQJLvPLCKeraBmFIPh52zpjCArpdzRytX3mPopivqp%2FwjTdcMIEWRrRlU%2FXxZoTANyBNQro0nyBwTNMkQf4Df6WQfuGryj9P%2F3O2LH45R%2B8D%2Fr79pWPgV1s%2BIUMu31omkQZ9uCe5yYcRCnAS7ivQ5f3SBdwL4JgGIAUPVeZhQrW%2FNVfIkRmUiDWpIpXBF%2BqPeQz4i%2FVEKYYxdtxaPJxcEg3ukcHY9IQHSado8O7SF%2BMuwS2Bw8SzrmHL5d5IxFFC4v%2Bx5e41J7%2Fofw2xdF3WLpjsz8VcOtqxr4MQJJwbAijezCHAb%2FyKLcmD%2BLiOghAnKB5IN6lwxTYxhGlHdCbM3XDrNCeaUk83TRcBUt37L7AKkvbkWEzGbYiU7GXuTTLWyjcKsC2%2F8oiceMqYURzTR7Qjfg1f43fp0oQ8KrvbGmu9Fj%2BvVuYeBjFKYpC8Wkyufzr1RGRZnmY8Y5xtxnCDXmFqhTktYwiueaB9ejGHF27mDx9Q7VLoiEaWjQnbIb%2BgGnRFlDAJWPx9TkWnf4CM%2FoU6%2Bc6xbRbFKIUgQAleee06RkB9lWqiAaPd%2BPDS1CacI0YCVqmVb4n05g3hfOFTK0%2BgNOFR9%2BIgYfCJWm1tlePjM1eMSn7skIpfIjz1X0hOjnlyIQmFgHTLVfI92Eo8ewyxSoosMKf7zMP%2BXRVCFiSiAmAMpvWm1Nswcaa62HTSYVmhTwv62FCM6%2FQrNYXKxYjUNBsFijpMyD870oMjlHoeFoj0CpSBWgX7QtjSbyp7%2B5kF9lJ0JR6eCZWVUTJBqwpMrHemLT5RsjNS4sbdULYQR87muVJnuC0mR52zyCnnPWWu5zVOpj0Y1n45CNMFqWRIPiAs%2FMYuz2bmd2ANaTisbP5kEbK0d4o3Lhhv5BtfSJwl0Qi3QZwkUMEUy0guObNayKxmJBRSbZWUqx7qSSstonCG2ArpJBl9CWFdIUUOmE7busL%2BGGuAFs4Ew%2FZfqZ7HFeArVd9AbbjHNUXIOZZwqHfchI4S6syIYAv%2FFNma%2FxqrrNahj22KpB1xFKXGYatUlt7MzUnxqmqre%2BQ4nGUoGbqSWfS%2Bh2jDSO8BsHHGGv2fPrjnDBmHi6Zo6C9Pv6jh0%2BXuaEKerm6WSGjmutmRkNWa5k9sVpLxWpPWDfrWM8SrvPDPvbO9az3gc0ewNYEbIJuTgRsE9mHXnFWnaMq25vm6joVvVW1Q2JqR1VbVUQ57JDM%2Fkc3KNj2B%2Fn3U75JkgKKNGx7hO1fxBAnURjScJdt4zrD4%2FH434fHPWxrNKazSWtC050qoam2Nczjbms4p2ofduUfXYOUWQwYhMmCmGLn4%2Fl9SImc9b7CZPXT%2BUzqK0ghRiDockqXYjW1YEh7PNq2pbKa%2BvJoO3KIy0Wp325D9dvRT0r9di47oKw52E4roGwi%2B%2F4Fwx1Mpjaa3NSuBpUZU122mUTk7nFsJksbbCbVEH6FMc4DvRKCBNRionoHjcvnsWUIZOTa%2F1dWMq6o4RQA9iX2lEPHr%2Fn51xHTjNmuO6Hb0M%2BGcLFO7armzt8iwlOr2lUKtUZoMMexqyzVRv1Z2VW%2F4GiJwfqMTA9VJFgMUK0lM42cPTwSus0w%2FGlUDxE7yzC5WUAYHU37Op8p3cI4XT3CJO14WhdjbrbfpJP5cpEWdxxz01YpSSdstxAI4E0pgope%2FsG%2Fyy62MVTsqqcgKqtpPpXlnJS9Y1%2B2d6Ex2OzT8i5YcrD91tk5GKptVOOJ0cBQFU64IxmqKqIcDNXZZ2ZpTnFuotKkpnm2WEBMf32LYfj5XjJTB6uzM6uz4DnNrU5hZu7ZzdNU4eFaX6ni1u7Ewg8Y7fm4iaE%2FYyRQNcFEuHI7S%2BuHBv7tnAszJ6sT0RAhhtenuXh6MEDeT7J7DBBlZEtvBsj0BDdODjDRPhRTp6FiOrVPSzGVwyUqlD1opm2CYarZEhNX1kwN46jpVZaKOAfNdHY9J%2BgIeEqoUEGFfNLSTZzvpAz6aJf6qNOWoAyzln%2BkUkin%2BlgR3yGkUvcOGHkfhNrwtyAFA7dsZcdbeh26Cn5p6qroQdvpC7rGwC8PFDJhm8g%2BQ%2FfBdu%2BLVxZcpkWhN6NKTDItFZvDx7Hd7ZMtMNLVXuoHNNtV09hhsSOPuuwGY70DGm1rrE%2F6SumTHdWsKiYhNvP6YQX8%2FSZfb4aTaVUdj47wMlYSdhTcayI2W%2FdUK%2FiVoDwIlyxGin%2BwFl1jKYpi6opQN6O2gQCCFOIQpHBG0SuRoNNBbQNd3t69w2ANL17fbF2BqwZzw1YA3VUSo9UTMeqyKfGBBWRetifHS1rnrlENnx8tC0sFoj7OYN%2BcbH%2FE4WZ5hZiY1nx5YqUMybCzsIGVcLkKRcHrmysUcl6rmofpvfEw2WAuM4JBQL1ZQBVOjkoqkwK40z0q0Ptge1YGHE%2BbfEbw5SnG0Z8DJ2pA1e%2FiRBMFsvamTMn59aJKGS97ObCiN7MiVdUvFXD7EzNylteJcKIOQ%2FXNwgkTzpM453PNC4N9lBj1HRM9sxqmiyAC9FV6pEjWwIs2SKAd7LxzAeT2pi0NW%2B3KITykOPNoXlHC3MpekCXspw9CVuaelcVn%2BSoaWfgZ%2B18T35vXB5CJhsqGU1Z6rMZZimeKrooP078T5vRMhnzHTvMd2%2Bobukgs3qNw6KoqDr2lOzqyb47nB160JtnetW%2B4dgW0yqCoqeoAqt7C9Z1hk79BUNSBUbyhfx4tkPB9Ji0WBKV9CiATEaMipGCBvBWiT90w8bCOEY2GpAOjDXMU%2BqIWGKI1kPKzU7yhHlinfNxpvsMpDMdqJXBF2rpx3FNOpipar8H9jPPlRETq4bIup1XDdKrK%2BxjAJq%2FTadUwdWSw8aICg9bUho26RgOlSagxR1KahgKmDZSmBOJnwPpgAeREidKWvCgPU3m6V6p4yVRBZdu8yk8eLxKk1JvWKF4T9B7Upj7UpvYHOh5Wm1TRTz2av7LDnYUdzYe0oPaV1bTDh6gUm7jVtKC%2BkhimclTZwMwlZs5N0e559qJMStqnLVeeB4iXahu4cudcuX0RNuMwV1ZEibq9GUVyPAbXri8%2B2Ka9X1KvHWCuPNrKUvmce1OxxRGxA1duknzEuOQrYdco3Z53vGOISTpHA9d8C9ecti8iclCX1XVlDZHe2KZsuc42KRwy3N%2BS4V4NDFKqsuZRM9ynu897uGimqVJlu9ZjR7Xd9kKlFU6IQX3tjhE3j4hpkz3vHjd73pUdxOK454EPt3ApVAGrKoGnDtDsTXd1T%2FbYnXfEir81TPzHRLW%2FZaSXEk7oNiexPQfJCG3nOJqNSOjftwearEBMfy4C%2BHqNMRVbMxj6%2FOetRxcPeVUYVte3bd0ssR6GtU%2Fy7pTVZHC%2Fix7M8YRwMkcXfzv5ffE1d6xPS7fVJ103LfNaAqOlYIyi7Z0noetWdd9O1%2BxauOmOo9AP9iR8A6KffGe4tyPV3d2pP011aAKnd%2BnQXwiFk1dCAg16nMUO3qaICeBSu4zygh159LwMvI8hYUhmAHKhTsmDJTCyNbdmI%2BtWQRCHCAhHab4DR7ROt0Ul64L86yyLxkOFIU1qn4tpa3u1hSttrFtOzSzvBN%2BvaokiVxOzlgESLRYJ7AdFd3vLjoWiM5AMGPqxMNSsd%2FEWBCWXOKKYsH2cqC4reuoCfeIf"></iframe> --- Nous utilisons le format glTF pour load des scènes et des objets. Il peut contenir des vertices, des textures, des matériaux PBR, des lights, des caméra, des animations, etc. L'extension `.gltf` correspond à la version ASCII du format (donc lisible). Généralement nous utilisons plutôt l'extension `.glb`, la version binaire (plus compact). Si vous souhaitez tester vos propres scènes, Blender permet d'exporter au format glTF. --- Pour la coding style, il n'y a rien de surprenant. Nous respectons les règles classiques, notamment que les membres de classes ont le préfixe `_` : ```cpp class MyClass { float _myVar; std::string _myString; } ``` Vous êtes libres de coder comme bon vous semble, rappelez-vous simplement que nous devrons lire et noter votre code au rendu du projet. ### How to build Vous aurez besoin de supporter cmake 3.20 minimum, C++17, et OpenGL 4.5. ```bash # At the project root mkdir -p build/debug cd build/debug cmake -DCMAKE_BUILD_TYPE=Debug ../.. # use -DCMAKE_BUILD_TYPE=Release alternatively make ``` ## RenderDoc ### Installation Vous pouvez télécharger l'installeur ici https://renderdoc.org/. ### Capture RenderDoc permet de capturer une (ou plusieurs) frame(s). On peut ensuite analyser en détail les shaders, les textures, les temps d'éxecution, etc. La manoeuvre à suivre est détaillée ici : https://renderdoc.org/docs/getting_started/quick_start.html#capturing-a-frame Il faut donc lancer votre exécutable depuis RenderDoc, et capturer avec `F12`. ### Analyse d'une frame Nous allons expliquer succintement comment utiliser RenderDoc. Pour mieux comprendre l'interface, je vous renvoie vers la doc : https://renderdoc.org/docs/getting_started/quick_start.html#renderdoc-layout --- Prenons pour exemple la scène par défaut du TP. Une fois la frame capturée, vous pouvez voir chaque étape du rendu dans l'"Event Browser". On y trouve les draw, dispatch, clear, etc. (Les calls CPU tels que les state change sont quand à eux visibles dans la fenêtre "API Inspector".) <div style="text-align: center;"> <img src="https://hackmd.io/_uploads/HJFMQ7Zl-x.png"><p></p></div> Ici, notre frame : - EID 8 : Clear le framebuffer - EID 51 : Draw le casque (46356 vertices) - EID 69 : Effectue un tonemapping (post-process appliqué sur 1 triangle recouvrant tout l'écran, d'où les 3 vertices) - EID 75 : Blit le résultat du tonemap dans le framebuffer principal - EID 101 et 112 : Draw la GUI - EID 116 : Swap des front et back buffers :::info Pour obtenir les infos de durée de chaque action, cliquez sur l'icône d'horloge ![](https://i.imgur.com/K608sqI.png). ::: En sélectionnant un event, on peut l'analyser plus en détail dans "Pipeline State" : ![image](https://hackmd.io/_uploads/B1S4EXZebe.png) À chaque étape de la pipeline, on peut regarder les paramètres, le shader et la data. Vous trouverez généralement votre bonheur ici. --- Il y a beaucoup d'autres outils intéressants, comme le texture viewer et le mesh viewer. Le texture viewer permet de visionner des textures et des render targets, ce qui est très pratique par exemple pour voir que les normales sont inversées, ou que l'on a bind la mauvaise texture. Les options permettent d'inspecter les mip maps, le format, les dimensions, et même faire du color picking. ![image](https://hackmd.io/_uploads/B1JeHQ-lZg.png) Le mesh viewer permet non seulement de voir le modèle 3D, mais aussi les valeurs de ses vertices, normales, uv, etc. ![image](https://hackmd.io/_uploads/HyFLUQ-lWx.png) --- Enfin, la "Timeline Bar" offre une alternative à la vue de l'Event Browser, très utile pour surveiller le budget temps de notre frame. La notre est par défaut très vide : ![image](https://hackmd.io/_uploads/B1XVDQWxbg.png) Pour enrichir et clarifier l'analyse, il est possible d'ajouter des marqueurs via l'API graphique. OpenGL propose plusieurs outils, à commencer par les sections, qui suivent le principe d'une simple pile : ```cpp glPushDebugGroup(GL_DEBUG_SOURCE_APPLICATION, 0, -1, "My super section"); // contents of section here glPopDebugGroup(); ``` OpenGL permet aussi de nommer les ressources, plutôt que de laisser RenderDoc générer des noms : ```cpp // Creating an example resource - a 2D Texture. GLuint tex2d = 0; glGenTextures(1, &tex2d); glBindTexture(GL_TEXTURE_2D, tex2d); // apply the name, -1 means NULL terminated glObjectLabel(GL_TEXTURE, tex2d, -1, "My awesome texture"); ``` Moins souvent utile, mais toujours bon à connaître, vous pouvez aussi rajouter des events de message : ```cpp glDebugMessageInsert(GL_DEBUG_SOURCE_APPLICATION, GL_DEBUG_TYPE_MARKER, 0, GL_DEBUG_SEVERITY_NOTIFICATION, -1, "My amazing event"); ``` Avec ces outils, on obtient une Timeline Bar et un Event Browser bien plus intéressants : <div style="text-align: center;"> <img src="https://hackmd.io/_uploads/SJIurNbx-x.png"> </div> ## Culling ### Backface culling Votre première optimisation consiste à rajouter du backface culling dans le moteur. Vous pouvez utiliser les fonctions OpenGL montrées en cours : ```cpp glEnable(GL_CULL_FACE); glCullFace(GL_BACK); glFrontFace(GL_CCW); ``` N'hésitez pas à consulter la documentation pour mieux comprendre en quoi elles consistent : https://registry.khronos.org/OpenGL-Refpages/gl2.1/xhtml/glCullFace.xml :::warning Attention, seuls les matériaux opaques et single-sided peuvent utiliser le backface culling. Aidez-vous des infos contenues dans la classe `Material` pour faire cette distinction. ::: :::info Si vous voulez vérifier que votre backface culling est actif, essayez simplement de rentrer la caméra à l'intérieur du casque... ::: ### Frustum culling Comme expliqué en cours, vous pouvez pousser l'optimisation plus loin en évitant de dessiner les objets se trouvant en dehors du frustum. Pour cela, nous vous demandons d'implémenter la méthode naïve : 1. Calculer une Bounding Sphere au loading de chaque objet. Vous pouvez par exemple le faire dans le constructeur de `StaticMesh`. 2. A chaque draw d'un objet, tester la Bounding Sphere contre le frustum. La méthode pour calculer le frustum à partir de la caméra courante est déjà donnée dans `Camera.h`: ```cpp Frustum build_frustum() const; ``` :::warning Attention, vous devez prendre en compte le transform de l'objet au moment du culling (scale et translation). ::: Une fois terminé, vous devez utiliser RenderDoc pour vous assurer que le discard est bien effectué, et vérifier le gain de performance. Utilisez les scènes `forest.glb` et `bistro.glb` fournies dans [le drive des ressources](https://drive.google.com/drive/folders/1GxC4MsGg8U3jF6NP3U4BVBIct6fK7S61?usp=sharing). ## Z-prepass En troisième optimisation, vous devez réduire l'overdraw en implémentant une Z-prepass. Procédez par étapes : 1. Rajoutez une passe qui dessine tous les objets opaques dans un framebuffer contenant uniquement la texture de depth. Cette passe doit utiliser un nouveau fragment shader, qui n'effectue aucun calcul d'éclairage. 2. La texture de depth est ensuite réutilisée par le framebuffer de la main pass. Pensez à utiliser `DepthTestMode::Equal` afin de ne pas dessiner les fragments inutiles. Utilisez RenderDoc pour vérifier l'ajout de la Z-prepass. <div style="text-align: center;"> <img src="https://hackmd.io/_uploads/By-NQnix-e.png"><p></p></div> Pour vérifier son utilisation, sélectionnez le drawcall d'un objet opaque dans la main pass. Dans le texture viewer, l'overlay "Depth Test" affiche en rouge les fragments ayant raté le test de profondeur. ![image](https://hackmd.io/_uploads/rkdC9jog-x.png) Vous pouvez également vérifier la diminution de l'overdraw. Sélectionnez le dernier drawcall des opaques dans la main pass et activez l'overlay "Quad Overdraw (Pass)" : ![image](https://hackmd.io/_uploads/ByHT-hsl-l.png)