2023-11-06 16:05:27 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >
Unity Shader入门精要
< / title >
< meta name = "description" content = "" >
< meta name = "keywords" content = "" >
< meta name = "author" content = "Mozzie" >
2024-03-15 15:38:52 +08:00
< link rel = "canonical" href = "https://maxshader.com/posts/12643/" >
2023-11-06 16:05:27 +08:00
< link rel = "icon" type = "image/svg" href = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>' >
2023-12-28 11:27:53 +08:00
< link rel = "stylesheet" href = "/css/b4c95347.css" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< script > window . i18n = { "tip-status-done" : "完成" , "tip-status-default" : "全部" , "tip-status-todo" : "计划" , "tip-status-doing" : "进行" , "tip-status-other" : "其他" , "text-select" : "选择" , "text-move" : "移动" , "text-esc" : "退出" , "January" : "一月" , "February" : "二月" , "March" : "三月" , "April" : "四月" , "May" : "五月" , "June" : "六月" , "July" : "七月" , "August" : "八月" , "September" : "九月" , "October" : "十月" , "November" : "十一月" , "December" : "十二月" } < / script >
< meta name = "generator" content = "Hexo 7.0.0" > < / head >
2023-11-06 16:05:27 +08:00
< body id = "app" >
2023-12-25 16:39:03 +08:00
< aside id = "aside-box" class = "left-aside" >
< div class = "header" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< link rel = "stylesheet" href = "/css/61875ce9.css" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< div class = "profile" >
< a class = "badge" href = "/" >
< span > Hi< / span >
2023-11-06 16:05:27 +08:00
< span > Mozzie< / span >
< / a >
2023-12-25 16:39:03 +08:00
< cosy-tooltip id = "left-aside-button" placement = "right" >
< span slot = "content" >
< span > 显示 / 隐藏 左侧导航< / span >
< cosy-short-key > [< / cosy-short-key >
< / span >
< cosy-icon >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path d = "M16 4c1.104-.019 2 .896 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm1 2a1 1 0 0 0-1-1h-2.995v10H16a1 1 0 0 0 1-1V6zm-4.995 9V5H4.001a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8.004z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
2023-11-06 16:05:27 +08:00
< / div >
2023-12-28 11:27:53 +08:00
< script src = "/js/e0a67917.js" > < / script >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< cosy-search id = "post-search" placeholder = "搜索" >
< div slot = "short-key" >
< cosy-short-key > ⌘< / cosy-short-key >
< cosy-short-key > K< / cosy-short-key >
2023-11-06 16:05:27 +08:00
< / div >
2023-12-25 16:39:03 +08:00
< / cosy-search >
2023-11-06 16:05:27 +08:00
< script >
window.algolia = {
appId: "5DTW808BZ8",
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
}
< / script >
2023-12-28 11:27:53 +08:00
< script src = "/js/62d6af47.js" > < / script >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< / div >
< div class = "aside-category" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< link rel = "stylesheet" href = "/css/db04a759.css" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< nav class = "category-nav cosy-scrollbar" >
< ul > < li data-path = "archives" >
2023-11-10 13:44:10 +08:00
< a href = "/archives" >
2023-12-25 16:39:03 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M3.5 3A1.5 1.5 0 0 0 2 4.5v4A1.5 1.5 0 0 0 3.5 10h9A1.5 1.5 0 0 0 14 8.5v-4A1.5 1.5 0 0 0 12.5 3h-9zM3 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm.5 6.5A1.5 1.5 0 0 0 2 12.5v4A1.5 1.5 0 0 0 3.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-4a1.5 1.5 0 0 0-1.5-1.5h-9zM3 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm14-.063a2.003 2.003 0 0 1-2.5-1.937A2 2 0 0 1 16 8.563a2.005 2.005 0 0 1 1 0a2 2 0 0 1 0 3.874zM16.5 3a.5.5 0 0 1 .5.5v4.041a3.02 3.02 0 0 0-1 0V3.5a.5.5 0 0 1 .5-.5zm0 10.5c-.17 0-.337-.014-.5-.041V17.5a.5.5 0 0 0 1 0v-4.041c-.163.027-.33.041-.5.041z" fill = "currentColor" > < / path > < / g > < / svg >
< div class = "ellipsis" > 归档< / div >
< / a >
< / li > < li data-path = "cosy-roadmap" >
< a href = "/cosy-roadmap" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M9.384 2a1 1 0 0 0-.966.742L4.616 17H2.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-2.116L11.582 2.742A1 1 0 0 0 10.616 2H9.384zM5.651 17l.8-3H11.5a.5.5 0 0 0 0-1H6.717l.534-2H10.5a.5.5 0 0 0 0-1H7.517l1.867-7h1.232l3.733 14H5.651z" fill = "currentColor" > < / path > < / g > < / svg >
< div class = "ellipsis" > 路线图< / div >
< / a >
< / li > < li data-path = "cosy-resume" >
< a href = "/cosy-resume" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M8.5 4.498a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0zm1.5-2.5a2.5 2.5 0 0 0-2.43 3.086L5.471 4.15a1.761 1.761 0 0 0-2.317.88c-.4.882-.008 1.917.877 2.31L7 8.662v2.287l-1.877 4.645a1.75 1.75 0 0 0 3.245 1.311l1.556-3.849a.073.073 0 0 1 .028-.038a.086.086 0 0 1 .046-.012c.02 0 .035.005.046.012a.074.074 0 0 1 .028.038l1.555 3.849a1.75 1.75 0 0 0 3.245-1.311L13 10.96V8.662l2.968-1.322a1.74 1.74 0 0 0 .877-2.31a1.761 1.761 0 0 0-2.317-.88l-2.097.934a2.5 2.5 0 0 0-2.43-3.086zM4.065 5.444a.761.761 0 0 1 1-.38l3.918 1.744a2.5 2.5 0 0 0 2.034 0l3.918-1.744a.761.761 0 0 1 1 .38a.739.739 0 0 1-.373.983l-2.969 1.321a1 1 0 0 0-.593.914v2.298a1 1 0 0 0 .073.375l1.872 4.633a.75.75 0 0 1-1.39.562l-1.556-3.849c-.364-.9-1.639-.9-2.003 0l-1.555 3.85a.75.75 0 1 1-1.39-.562l1.876-4.646A1 1 0 0 0 8 10.95V8.662a1 1 0 0 0-.593-.914L4.438 6.427a.739.739 0 0 1-.373-.983z" fill = "currentColor" > < / path > < / g > < / svg >
< div class = "ellipsis" > 简历< / div >
< / a >
2023-11-10 13:44:10 +08:00
< / li > < / ul >
2023-12-26 10:59:02 +08:00
< ul > < li class = "active" >
< a href = "/categories/CS/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M20 4l-2 14.5l-6 2l-6-2L4 4z" > < / path > < path d = "M7.5 8h3v8l-2-1" > < / path > < path d = "M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5" > < / path > < / g > < / svg >
2023-11-10 13:51:34 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > CS< / span >
2023-11-10 13:51:34 +08:00
< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li class = "" >
2023-12-26 10:59:02 +08:00
< a href = "/categories/EQ/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z" > < / path > < circle cx = "11.5" cy = "7.5" r = "1" fill = "currentColor" > < / circle > < / g > < / svg >
2023-11-10 13:51:34 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > EQ< / span >
2023-11-10 13:51:34 +08:00
< / div >
2023-11-10 13:44:10 +08:00
< / a >
< / li > < li class = "" >
< a href = "/categories/Hexo/" >
2023-11-10 13:51:34 +08:00
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1" > < / path > < path d = "M8 16h8" > < / path > < path d = "M8.322 12.582l7.956.836" > < / path > < path d = "M8.787 9.168l7.826 1.664" > < / path > < path d = "M10.096 5.764l7.608 2.472" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > Hexo< / span >
< / div >
2023-11-10 13:44:10 +08:00
< / a >
2023-11-21 13:49:17 +08:00
< / li > < li class = "" >
2023-12-26 10:59:02 +08:00
< a href = "/categories/%E8%87%AA%E5%AA%92%E4%BD%93/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < path d = "M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < / path > < / svg >
2023-11-21 13:49:17 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > 自媒体< / span >
2023-11-21 13:49:17 +08:00
< / div >
< / a >
2023-11-11 18:48:29 +08:00
< / li > < li class = "" >
2023-12-26 10:59:02 +08:00
< a href = "/categories/%E8%AF%BB%E4%B9%A6/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" > < g fill = "none" > < path d = "M4 16V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v11a1 1 0 0 1-1 1H5a1 1 0 0 0 1 1h9.5a.5.5 0 0 1 0 1H6a2 2 0 0 1-2-2zM15 4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v11h10V4zM7.041 8h.973c.045-.773.192-1.485.42-2.059A3.002 3.002 0 0 0 7.04 8zM6 8.5a4 4 0 1 1 8 0a4 4 0 0 1-8 0zm6.959-.5a3.002 3.002 0 0 0-1.392-2.059c.227.574.374 1.286.419 2.059h.973zm-.973 1c-.045.773-.192 1.486-.42 2.059A3.002 3.002 0 0 0 12.96 9h-.973zm-1.002-1c-.046-.707-.189-1.324-.383-1.778c-.12-.28-.25-.474-.368-.591c-.117-.115-.195-.131-.233-.131c-.038 0-.116.016-.233.13c-.118.118-.248.312-.368.592c-.194.454-.337 1.07-.383 1.778h1.968zM9.016 9c.046.707.189 1.324.383 1.778c.12.28.25.474.368.591c.117.115.195.131.233.131c.038 0 .116-.016.233-.13c.118-.118.248-.313.368-.592c.194-.454.336-1.07.383-1.778H9.016zM8.014 9h-.973c.147.87.668 1.614 1.392 2.059c-.227-.573-.374-1.286-.419-2.059z" fill = "currentColor" > < / path > < / g > < / svg >
2023-11-11 18:48:29 +08:00
< div class = "ellipsis" >
2023-12-26 10:59:02 +08:00
< span > 读书< / span >
< / div >
< / a >
< / li > < li class = "" >
< a href = "/categories/%E8%B4%A2%E7%BB%8F/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" > < g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "12" r = "9" > < / circle > < path d = "M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1" > < / path > < path d = "M12 6v2m0 8v2" > < / path > < / g > < / svg >
< div class = "ellipsis" >
< span > 财经< / span >
2023-11-11 18:48:29 +08:00
< / div >
< / a >
2023-11-10 13:44:10 +08:00
< / li > < / ul >
2023-12-25 16:39:03 +08:00
< / nav >
2023-11-06 16:05:27 +08:00
2023-12-28 11:27:53 +08:00
< script src = "/js/da8f6845.js" > < / script >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< / div >
< div class = "bottom" >
< cosy-tooltip id = "button-preference" placement = "right" >
< span slot = "content" >
< span > 偏好< / span >
< cosy-short-key > ⌘< / cosy-short-key >
< cosy-short-key > p< / cosy-short-key >
< / span >
< cosy-icon bordered id = "button-about-cosy-theme" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 16 16" >
< g fill = "none" >
< path d = "M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4zM7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0zm3.618-3.602a.708.708 0 0 1-.824-.567l-.26-1.416a.354.354 0 0 0-.275-.282a6.072 6.072 0 0 0-2.519 0a.354.354 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.355.355 0 0 0-.382.095c-.569.627-1 1.367-1.262 2.173a.352.352 0 0 0 .108.378l1.102.931a.704.704 0 0 1 0 1.076l-1.102.931a.352.352 0 0 0-.108.378A5.986 5.986 0 0 0 3.53 12.02a.355.355 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.075 6.075 0 0 0 2.52 0a.353.353 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095c.569-.627 1-1.367 1.262-2.173a.352.352 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.352.352 0 0 0 .108-.378A5.985 5.985 0 0 0 12.47 3.98a.355.355 0 0 0-.382-.095l-1.36.484a.71.71 0 0 1-.111.03zm-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5.105 5.105 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977c.255.334.467.698.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a4.99 4.99 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5.099 5.099 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a4.987 4.987 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637c.164-.386.376-.75.63-1.084z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
2023-11-06 16:05:27 +08:00
< / div >
< / aside >
< main >
2023-12-26 10:56:25 +08:00
< link rel = "stylesheet" href = "/css/9bb9a539.css" >
2023-11-06 16:05:27 +08:00
< div class = "post-container" >
2023-12-25 16:39:03 +08:00
< header >
< div class = "left" >
2023-11-06 16:05:27 +08:00
2023-12-25 16:39:03 +08:00
< link rel = "stylesheet" href = "/css/7d333f9e.css" >
2023-11-06 16:05:27 +08:00
< nav class = "breadcrumb" >
2023-12-25 16:39:03 +08:00
< section >
< cosy-tooltip placement = "bottom-left" >
< span slot = "content" > < span > 首页< / span >
< cosy-short-key > ⌘< / cosy-short-key >
< cosy-short-key > H< / cosy-short-key >
< / span >
< cosy-icon href = "/" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path d = "M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115l5.5-4.942zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371l-5.5-4.942z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
< svg class = "arrow" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
2023-11-06 16:05:27 +08:00
< g fill = "none" >
< path d = "M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill = "currentColor" > < / path >
< / g >
< / svg >
2023-12-26 10:59:02 +08:00
< a class = "ellipsis" href = "/categories/CS/" >
CS
2023-12-25 16:39:03 +08:00
< / a >
< svg class = "arrow" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
2023-11-06 16:05:27 +08:00
< g fill = "none" >
< path d = "M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill = "currentColor" > < / path >
< / g >
< / svg >
2023-12-25 16:39:03 +08:00
< span class = "ellipsis" >
Unity Shader入门精要
< / span >
< / section >
2023-11-06 16:05:27 +08:00
< / nav >
< script src = "/js/31d6cfe0.js" > < / script >
2023-12-25 16:39:03 +08:00
< / div >
< div class = "right" >
< cosy-tooltip id = "toc-show-button" placement = "left" >
< span slot = "content" >
< span > 显示 / 隐藏 文章目录< / span >
< cosy-short-key > ]< / cosy-short-key >
< / span >
< cosy-icon >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20" >
< g fill = "none" >
< path d = "M4 4c-1.104-.019-2 .896-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4zM3 6a1 1 0 0 1 1-1h2.995v10H4a1 1 0 0 1-1-1V6zm4.995 9V5h8.004a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7.995z" fill = "currentColor" > < / path >
< / g >
< / svg >
< / cosy-icon >
< / cosy-tooltip >
< / div >
< / header >
< div class = "content" >
< main class = "cosy-scrollbar" >
2023-11-06 16:05:27 +08:00
< div class = "article-container" >
<!-- 渲染文章内容 -->
2023-11-08 13:45:34 +08:00
< article >
2023-12-25 16:39:03 +08:00
<!-- 文章标题 -->
< h1 class = "post-title" > Unity Shader入门精要< / h1 >
< div class = "last-updated" >
2024-03-15 23:26:32 +08:00
上次更新: 2024-03-15 23:14:48
2023-12-25 16:39:03 +08:00
< / div >
<!-- 文章 -->
2023-11-08 13:45:34 +08:00
< p > 代码基于< code > c#< / code > ，书籍 < code > Unity Shader< / code > 入门精要< / p >
2023-11-06 16:05:27 +08:00
< h1 id = "什么是-OpenGL、DirectX" > < a href = "#什么是-OpenGL、DirectX" class = "headerlink" title = "什么是 OpenGL、DirectX" > < / a > 什么是 OpenGL、DirectX< / h1 > < p > 用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发送渲染命令， （ ） ， < / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_7.png" alt = "shader_7" > < / p >
2023-11-06 16:05:27 +08:00
< h1 id = "什么是-HLSL、GLSL、CG" > < a href = "#什么是-HLSL、GLSL、CG" class = "headerlink" title = "什么是 HLSL、GLSL、CG" > < / a > 什么是 HLSL、GLSL、CG< / h1 > < p > 如顶点着色器、片元着色器等。这些着色器的可编程性在于，我们可以使用一种特定的语言来编写程序，就好比我们可以用 C#来写游戏逻辑一样。< / p >
< p > 着色语言是专门用于编写着色器的，常见的着色语言有< / p >
< ul >
< li > < p > DirectX 的 HLSL（ ） < / p >
< / li >
< li > < p > OpenGL 的 GLSL（ ） < / p >
< / li >
< li > < p > NVIDIA 的 CG（ ） < / p >
< / li >
< / ul >
< p > HLSL、GLSL、CG 都是“高级（ ） ， ， ， （ ） ， < / p >
< h1 id = "GPU-流水线" > < a href = "#GPU-流水线" class = "headerlink" title = "GPU 流水线" > < / a > GPU 流水线< / h1 > < p > 当 GPU 从 CPU 那里得到渲染命令后，就会进行一系列流水线操作，最终把图元渲染到屏幕上。< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_1.png" alt = "shader_1" > < / p >
2023-11-06 16:05:27 +08:00
< ul >
< li > < p > 顶点着色器（ ） ， < / p >
< / li >
< li > < p > 曲面细分着色器（ ） ， < / p >
< / li >
< li > < p > 几何着色器（ ） ， （ ） ， < / p >
< / li >
< li > < p > 裁剪（ ） ， ， ， ， < / p >
< / li >
< li > < p > 片元着色器（ ） ， ， （ ） < / p >
< / li >
< / ul >
< h2 id = "顶点着色器-Vertex-Shader" > < a href = "#顶点着色器-Vertex-Shader" class = "headerlink" title = "顶点着色器 Vertex Shader" > < / a > 顶点着色器 Vertex Shader< / h2 > < p > CPU 输入进来的每个顶点都会调用一次顶点着色器。顶点着色器本身不可以创建或者销毁任何顶点， ， ， < / p >
< p > 顶点着色器需要完成的工作主要有：< / p >
< ul >
< li > 坐标变换：把顶点坐标转换到齐次裁剪坐标系下，接着通常再由硬件做透视除法后，最终得到归一化的设备坐标(NDC)< / li >
< / ul >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_2.png" alt = "shader_2" > < / p >
2023-11-06 16:05:27 +08:00
< blockquote >
< p > 在 DirectX 中， ， < / p >
< / blockquote >
< ul >
< li > 逐顶点光照< / li >
< / ul >
< h2 id = "裁剪" > < a href = "#裁剪" class = "headerlink" title = "裁剪" > < / a > 裁剪< / h2 > < p > 只有在单位立方体的图元才需要被继续处< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_3.png" alt = "shader_3" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "屏幕映射" > < a href = "#屏幕映射" class = "headerlink" title = "屏幕映射" > < / a > 屏幕映射< / h2 > < p > OpenGL 和 DirectX 之间的差异问题。OpenGL 把屏幕的左下角当成最小的窗口坐标值，而 DirectX 则定义了屏幕的左上角为最小的窗口坐标值< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_4.png" alt = "shader_4" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "光栅阶段" > < a href = "#光栅阶段" class = "headerlink" title = "光栅阶段" > < / a > 光栅阶段< / h2 > < p > 从上一个阶段输出的信息： ， （ < / p >
< h3 id = "三角形设置" > < a href = "#三角形设置" class = "headerlink" title = "三角形设置" > < / a > 三角形设置< / h3 > < p > 如果要得到整个三角网格对像素的覆盖情况，我们就必须计算每条边上的像素坐标。为了能够计算边界像素的坐标信息，我们就需要得到三角形边界的表示方式。< / p >
< h3 id = "三角形遍历" > < a href = "#三角形遍历" class = "headerlink" title = "三角形遍历()" > < / a > 三角形遍历()< / h3 > < ol >
< li > < p > 扫描变换： （ ） ， （ ） < / p >
< / li >
< li > < p > 使用三角网格 3 个顶点的顶点信息对整个覆盖区域的像素进行插值< / p >
< / li >
< / ol >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_5.png" alt = "shader_5" > < / p >
2023-11-06 16:05:27 +08:00
< p > 这一步的输出就是得到一个片元序列。需要注意的是，一个片元并不是真正意义上的像素，而是包含了很多状态的集合，这些状态用于计算每个像素的最终颜色。这些状态包括了（但不限于）它的屏幕坐标、深度信息，以及其他从几何阶段输出的顶点信息，例如法线、纹理坐标等。< / p >
< h2 id = "片元着色器-Fragment-Shader" > < a href = "#片元着色器-Fragment-Shader" class = "headerlink" title = "片元着色器 Fragment Shader" > < / a > 片元着色器 Fragment Shader< / h2 > < p > 前面的光栅化阶段实际上并不会影响屏幕上每个像素的颜色值，而是会产生一系列的数据信息，用来表述一个三角网格是怎样覆盖每个像素的。而每个片元就负责存储这样一系列数据。真正会对像素产生影响的阶段是下一个流水线阶段——逐片元操作< / p >
< blockquote >
< p > 在 DirectX 中， （ ） ， < / p >
< / blockquote >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_6.png" alt = "shader_6" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "逐片元操作" > < a href = "#逐片元操作" class = "headerlink" title = "逐片元操作" > < / a > 逐片元操作< / h2 > < p > 这一阶段有几个主要任务:< / p >
< ul >
< li > < p > 决定每个片元的可见性。这涉及了很多测试工作，例如深度测试、模板测试等。< / p >
< / li >
< li > < p > 如果一个片元通过了所有的测试，就需要把这个片元的颜色值和已经存储在颜色缓冲区中的颜色进行合并，或者说是混合。< / p >
< / li >
< / ul >
< blockquote >
< p > !! 对于不透明物体， （ ） ， < / p >
< / blockquote >
< h2 id = "Draw-Call" > < a href = "#Draw-Call" class = "headerlink" title = "Draw Call" > < / a > Draw Call< / h2 > < p > CPU 调用图像编程接口，如 OpenGL 中的 < code > glDrawElements< / code > 命令或者 DirectX 中的 < code > DrawIndexedPrimitive< / code > 命令，以命令 GPU 进行渲染的操作。< / p >
< h3 id = "CPU-和-GPU-是如何实现并行工作的？" > < a href = "#CPU-和-GPU-是如何实现并行工作的？" class = "headerlink" title = "CPU 和 GPU 是如何实现并行工作的？" > < / a > CPU 和 GPU 是如何实现并行工作的？< / h3 > < p > 如果没有流水线化，那么 CPU 需要等到 GPU 完成上一个渲染任务才能再次发送渲染命令。但这种方法显然会造成效率低下。解决方法就是使用一个命令缓冲区（ ） < / p >
< p > 由 CPU 向其中添加命令，而由 GPU 从中读取命令，添加和读取的过程是互相独立的。< / p >
< h3 id = "为什么-Draw-Call-多了会影响帧率？" > < a href = "#为什么-Draw-Call-多了会影响帧率？" class = "headerlink" title = "为什么 Draw Call 多了会影响帧率？" > < / a > 为什么 Draw Call 多了会影响帧率？< / h3 > < p > 每一个复制动作需要很多额外的操作，例如分配内存、创建各种元数据等。如你所见，这些操作将造成很多额外的性能开销，如果我们复制了很多小文件，那么这个开销将会很大< / p >
< h3 id = "如何减少-Draw-Call？ > < a href = "#如何减少-Draw-Call？ class = "headerlink" title = "如何减少 Draw Call？ > < / a > 如何减少 Draw Call？ < / h3 > < p > 尽管减少 Draw Call 的方法有很多， （ ） ， ， < / p >
< p > 在游戏开发过程中，为了减少 Draw Call 的开销，有两点需要注意。< / p >
< ul >
< li > < p > 避免使用大量很小的网格。当不可避免地需要使用很小的网格结构时，考虑是否可以合并它们。< / p >
< / li >
< li > < p > 避免使用过多的材质。尽量在不同的网格之间共用同一个材质。< / p >
< / li >
< / ul >
< h1 id = "你明白什么是-Shader" > < a href = "#你明白什么是-Shader" class = "headerlink" title = "你明白什么是 Shader" > < / a > 你明白什么是 Shader< / h1 > < ul >
< li > < p > GPU 流水线上一些可高度编程的阶段，而由着色器编译出来的最终代码是会在 GPU 上运行的（对于固定管线的渲染来说，着色器有时等同于一些特定的渲染设置）< / p >
< / li >
< li > < p > 有一些特定类型的着色器，如顶点着色器、片元着色器等< / p >
< / li >
< li > < p > 依靠着色器我们可以控制流水线中的渲染细节，例如用顶点着色器来进行顶点变换以及传递数据，用片元着色器来进行逐像素的渲染。< / p >
< / li >
< / ul >
< h1 id = "Unity-Shader" > < a href = "#Unity-Shader" class = "headerlink" title = "Unity Shader" > < / a > Unity Shader< / h1 > < blockquote >
< p > !! Unity Shader ! = 真正的 Shader< / p >
< / blockquote >
< p > Unity Shader 实际上指的就是一个 ShaderLab 文件——硬盘上以． < / p >
< p > 作为开发者而言，我们绝大部分时候只需要和 Unity Shader 打交道，而不需要关心渲染引擎底层的实现细节< / p >
< p > Unity 编辑器会把这些 CG 片段编译成低级语言， ， < / p >
< h2 id = "基础" > < a href = "#基础" class = "headerlink" title = "基础" > < / a > 基础< / h2 > < p > 在没有 Unity 这类编辑器的情况下，如果我们想要对某个模型设置渲染状态，可能需要类似下面的代码：< / p >
< p > 上述伪代码仅仅是简化后的版本, 当渲染的模型数目、需要调整的着色器属性不断增多时，上述过程将变得更加复杂和冗长。< / p >
< p > 而且，当涉及透明物体等多物体的渲染时，如果没有编辑器的帮助，我们要非常小心如渲染顺序等问题。< / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token comment" > // 初始化渲染设置< / span >
< span class = "token keyword" > void< / span > < span class = "token function" > Initialization< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 从硬盘上加载顶点着色器的代码< / span >
string vertexShaderCode < span class = "token operator" > =< / span > < span class = "token function" > LoadShaderFromFile< / span > < span class = "token punctuation" > (< / span > VertexShader< span class = "token punctuation" > .< / span > shader< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 从硬盘上加载片元着色器的代码< / span >
string fragmentShaderCode < span class = "token operator" > =< / span > < span class = "token function" > LoadShaderFromFile< / span > < span class = "token punctuation" > (< / span > FragmentShader< span class = "token punctuation" > .< / span > shader< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 把顶点着色器加载到GPU中< / span >
< span class = "token function" > LoadVertexShaderFromString< / span > < span class = "token punctuation" > (< / span > vertexShaderCode< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 把片元着色器加载到GPU中< / span >
< span class = "token function" > LoadFragmentShaderFromString< / span > < span class = "token punctuation" > (< / span > fragmentShaderCode< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 设置名为"vertexPosition"的属性的输入，即模型顶点坐标< / span >
< span class = "token function" > SetVertexShaderProperty< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "vertexPosition"< / span > < span class = "token punctuation" > ,< / span > vertices< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 设置名为"MainTex"的属性的输入， < / span >
< span class = "token function" > SetVertexShaderProperty< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "MainTex"< / span > < span class = "token punctuation" > ,< / span > someTexture< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 设置名为"MVP"的属性的输入， < / span >
< span class = "token function" > SetVertexShaderProperty< / span > < span class = "token punctuation" > (< / span > < span class = "token string" > "MVP"< / span > < span class = "token punctuation" > ,< / span > < span class = "token constant" > MVP< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 关闭混合< / span >
< span class = "token function" > Disable< / span > < span class = "token punctuation" > (< / span > Blend< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 设置深度测试< / span >
< span class = "token function" > Enable< / span > < span class = "token punctuation" > (< / span > ZText< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token function" > SetZTestFunction< / span > < span class = "token punctuation" > (< / span > LessOrEqual< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 其他设置< / span >
…
< span class = "token punctuation" > } < / span >
< span class = "token comment" > // 每一帧迚行渲染< / span >
< span class = "token keyword" > void< / span > < span class = "token function" > OnRendering< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 调用渲染命令< / span >
< span class = "token function" > DrawCall< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 当涉及多种渲染设置时，我们可能还需要在这里改变各种渲染设置< / span >
< span class = "token operator" > ...< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > VertexShader.shader： < / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token comment" > // 输入： < / span >
< span class = "token keyword" > in< / span > float3 vertexPosition< span class = "token punctuation" > ;< / span >
< span class = "token keyword" > in< / span > sampler2D MainTex< span class = "token punctuation" > ;< / span >
< span class = "token keyword" > in< / span > Matrix4x4 < span class = "token constant" > MVP< / span > < span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 输出： < / span >
out float4 position< span class = "token punctuation" > ;< / span >
< span class = "token keyword" > void< / span > < span class = "token function" > main< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 使用MVP对模型顶点坐标迚行变换< / span >
position < span class = "token operator" > =< / span > < span class = "token constant" > MVP< / span > ＊ < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< p > FragmentShader.shader： < / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > < span class = "token comment" > // 输入： < / span >
< span class = "token keyword" > in< / span > float4 position< span class = "token punctuation" > ;< / span >
< span class = "token comment" > // 输出：该片元的颜色值< / span >
out float4 fragColor< span class = "token punctuation" > ;< / span >
< span class = "token keyword" > void< / span > < span class = "token function" > main< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
< span class = "token comment" > // 将片元颜色设为白色< / span >
fragColor < span class = "token operator" > =< / span > < span class = "token function" > float4< / span > < span class = "token punctuation" > (< / span > < span class = "token number" > 1.0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 1.0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 1.0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 1.0< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h2 id = "材质和-Unity-Shader" > < a href = "#材质和-Unity-Shader" class = "headerlink" title = "材质和 Unity Shader" > < / a > 材质和 Unity Shader< / h2 > < p > 总体来说，在 Unity 中我们需要配合使用材质（ ） < / p >
< ul >
< li > < p > 创建一个材质< / p >
< / li >
< li > < p > 创建一个 Unity Shader， < / p >
< / li >
< li > < p > 把材质赋给要渲染的对象< / p >
< / li >
< li > < p > 在材质面板中调整 Unity Shader 的属性，如使用的纹理、漫反射系数< / p >
< / li >
< / ul >
< h2 id = "Unity-表面着色器" > < a href = "#Unity-表面着色器" class = "headerlink" title = "Unity 表面着色器" > < / a > Unity 表面着色器< / h2 > < p > 表面着色器（ ） ， / 片元着色器是一样的。也就是说，当给 Unity 提供一个表面着色器的时候，它在背后仍旧把它转换成对应的顶点/ 片元着色器。我们可以理解成，表面着色器是 Unity 对顶点/ 片元着色器的更高一层的抽象。它存在的价值在于， < / p >
< pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > Shader < span class = "token string" > "Custom/Simple Surface Shader"< / span > < span class = "token punctuation" > { < / span >
SubShader < span class = "token punctuation" > { < / span >
Tags < span class = "token punctuation" > { < / span > < span class = "token string" > "RenderType"< / span > < span class = "token operator" > =< / span > < span class = "token string" > "Opaque"< / span > < span class = "token punctuation" > } < / span >
< span class = "token constant" > CGPROGRAM< / span >
#pragma surface surf Lambert
struct Input < span class = "token punctuation" > { < / span >
float4 color < span class = "token operator" > :< / span > < span class = "token constant" > COLOR< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span > < span class = "token punctuation" > ;< / span >
< span class = "token keyword" > void< / span > < span class = "token function" > surf< / span > < span class = "token punctuation" > (< / span > < span class = "token parameter" > Input < span class = "token constant" > IN< / span > < span class = "token punctuation" > ,< / span > inout SurfaceOutput o< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > { < / span >
o< span class = "token punctuation" > .< / span > Albedo < span class = "token operator" > =< / span > < span class = "token number" > 1< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token constant" > ENDCG< / span >
< span class = "token punctuation" > } < / span >
Fallback < span class = "token string" > "Diffuse"< / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
2024-01-04 23:11:27 +08:00
< h2 id = "顶点-片元着色器" > < a href = "#顶点-片元着色器" class = "headerlink" title = "顶点/片元着色器" > < / a > 顶点/ 片元着色器< / h2 > < pre class = "line-numbers language-javascript" data-language = "javascript" > < code class = "language-javascript" > Shader < span class = "token string" > "Custom/Simple VertexFragment Shader"< / span > < span class = "token punctuation" > { < / span >
2023-11-06 16:05:27 +08:00
SubShader < span class = "token punctuation" > { < / span >
Pass < span class = "token punctuation" > { < / span >
< span class = "token constant" > CGPROGRAM< / span >
#pragma vertex vert
#pragma fragment frag
float4 < span class = "token function" > vert< / span > < span class = "token punctuation" > (< / span > float4 v < span class = "token operator" > :< / span > < span class = "token constant" > POSITION< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > :< / span > < span class = "token constant" > SV_POSITION< / span > < span class = "token punctuation" > { < / span >
< span class = "token keyword" > return< / span > < span class = "token function" > mul< / span > < span class = "token punctuation" > (< / span > < span class = "token constant" > UNITY_MATRIX_MVP< / span > < span class = "token punctuation" > ,< / span > v< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
fixed4 < span class = "token function" > frag< / span > < span class = "token punctuation" > (< / span > < span class = "token punctuation" > )< / span > < span class = "token operator" > :< / span > SV_Target < span class = "token punctuation" > { < / span >
< span class = "token keyword" > return< / span > < span class = "token function" > fixed4< / span > < span class = "token punctuation" > (< / span > < span class = "token number" > 1.0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 0.0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 0.0< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 1.0< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token punctuation" > } < / span >
< span class = "token constant" > ENDCG< / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span >
< span class = "token punctuation" > } < / span > < span aria-hidden = "true" class = "line-numbers-rows" > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < span > < / span > < / span > < / code > < / pre >
< h1 id = "坐标系" > < a href = "#坐标系" class = "headerlink" title = "坐标系" > < / a > 坐标系< / h1 > < p > Unity 使用的是左手坐标系< / p >
2023-11-06 16:08:26 +08:00
< h2 id = "左右手" > < a href = "#左右手" class = "headerlink" title = "左右手" > < / a > 左右手< / h2 > < p > < img src = "/img/shader_8.png" alt = "shader_8" > < / p >
< p > < img src = "/img/shader_9.png" alt = "shader_9" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "向量-矢量" > < a href = "#向量-矢量" class = "headerlink" title = "向量(矢量)" > < / a > 向量(矢量)< / h2 > < h3 id = "模" > < a href = "#模" class = "headerlink" title = "模" > < / a > 模< / h3 > < p > 矢量的模是一个标量，可以理解为是矢量在空间中的长度。它的表示符号通常是在矢量两旁分别加上一条垂直线< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_10.png" alt = "shader_10" > < / p >
2023-11-06 16:05:27 +08:00
< h3 id = "单位矢量" > < a href = "#单位矢量" class = "headerlink" title = "单位矢量" > < / a > 单位矢量< / h3 > < p > 在很多情况下， ， ， ， ， （ ） < / p >
< p > 单位矢量指的是那些模为 1 的矢量。单位矢量也被称为被归一化的矢量（ ） ， < / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_11.png" alt = "shader_11" > < / p >
2023-11-06 16:05:27 +08:00
< h3 id = "点积" > < a href = "#点积" class = "headerlink" title = "点积" > < / a > 点积< / h3 > < p > 一个向量在另一个向量方向上投影的长度，是一个标量< / p >
< p > 公式：< code > a·b = |a||b|cosθ< / code > < / p >
< h3 id = "向量积-∧-× > < a href = "#向量积-∧-× class = "headerlink" title = "向量积 ∧ × > < / a > 向量积 ∧ × < / h3 > < blockquote >
< p > 向量积，数学中又称外积、叉积，物理中称矢积、叉乘< / p >
< / blockquote >
< p > 几何意义，一个和已有两个向量都垂直的向量，法向量< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_16.png" alt = "shader_16" > < / p >
2023-11-06 16:05:27 +08:00
< p > 向量 a 和向量 b： < / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_12.png" alt = "shader_12" > < / p >
2023-11-06 16:05:27 +08:00
< p > 叉乘公式为：< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_13.png" alt = "shader_13" > < / p >
2023-11-06 16:05:27 +08:00
< p > 其中：< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_14.png" alt = "shader_14" > < / p >
2023-11-06 16:05:27 +08:00
< p > 根据 i、j、k 间关系，有：< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_15.png" alt = "shader_15" > < / p >
2023-11-06 16:05:27 +08:00
< p > 例如< / p >
< p > (1,2,3)× = (2 × × × × × × = (11,10,3)< / p >
< h1 id = "矩阵变换-Vec4" > < a href = "#矩阵变换-Vec4" class = "headerlink" title = "矩阵变换 Vec4" > < / a > 矩阵变换 Vec4< / h1 > < p > 由于 3× × < / p >
< h2 id = "平移矩阵" > < a href = "#平移矩阵" class = "headerlink" title = "平移矩阵" > < / a > 平移矩阵< / h2 > < p > 点的 x、y、z 分量分别增加了一个位置偏移。在 3D 中的可视化效果是，把点(x, y, z)在空间中平移了(tx, ty, tz)个单位< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_17.png" alt = "shader_17" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "缩放矩阵" > < a href = "#缩放矩阵" class = "headerlink" title = "缩放矩阵" > < / a > 缩放矩阵< / h2 > < h2 id = "旋转矩阵" > < a href = "#旋转矩阵" class = "headerlink" title = "旋转矩阵" > < / a > 旋转矩阵< / h2 > < p > 旋转操作需要指定一个旋转轴，这个旋转轴不一定是空间中的坐标轴，但本节所讲的旋转就是指绕着空间中的 x 轴、y 轴或 z 轴进行旋转< / p >
< p > 如果我们需要把点绕着 x 轴旋转 θ 度< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_18.png" alt = "shader_18" > < / p >
2023-11-06 16:05:27 +08:00
< p > 绕 y 轴的旋转< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_19.png" alt = "shader_19" > < / p >
2023-11-06 16:05:27 +08:00
< p > 绕 z 轴的旋转< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_20.png" alt = "shader_20" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "复合变换" > < a href = "#复合变换" class = "headerlink" title = "复合变换" > < / a > 复合变换< / h2 > < p > 先进行大小为(2, 2, 2)的缩放，再绕 y 轴旋转 30°， < / p >
< blockquote >
< p > 矩阵乘法注意顺序< / p >
< / blockquote >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_21.png" alt = "shader_21" > < / p >
2023-11-06 16:05:27 +08:00
< blockquote >
< p > ?? 如果我们需要同时绕着 3 个轴进行旋转，是先绕 x 轴、再绕 y 轴最后绕 z 轴旋转还是按其他的旋转顺序呢？< / p >
< / blockquote >
< p > 根据坐标系，需要调整轴的顺序< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_22.png" alt = "shader_22" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "法线变换" > < a href = "#法线变换" class = "headerlink" title = "法线变换" > < / a > 法线变换< / h2 > < p > 在游戏中，模型的一个顶点往往会携带额外的信息，而顶点法线就是其中一种信息。当我们变换一个模型的时候，不仅需要变换它的顶点，还需要变换顶点法线，以便在后续处理（如片元着色器）中计算光照等。< / p >
< h1 id = "坐标空间" > < a href = "#坐标空间" class = "headerlink" title = "坐标空间" > < / a > 坐标空间< / h1 > < p > 事实上，在我们的生活中，我们也总是使用不同的坐标空间来交流。现在正在读这本书的你，很可能正坐在办公室或书房中。如果问你：“办公室的饮水机在哪里？”你大概会回答：“在办公室门的左方 3 米处。”这里，你很自然地使用了以门为原点的坐标空间。< / p >
< p > 要想定义一个坐标空间，必须指明其原点位置和 3 个坐标轴的方向。而这些数值实际上是相对于另一个坐标空间的（ ， ） ， ， ， （ ） < / p >
< h2 id = "模型空间" > < a href = "#模型空间" class = "headerlink" title = "模型空间" > < / a > 模型空间< / h2 > < p > 每个模型都有自己独立的坐标空间，当它移动或旋转的时候，模型空间也会跟着它移动和旋转。< / p >
< blockquote >
< p > Unity 在模型空间中使用的是左手坐标系，因此在模型空间中，+x 轴、+y 轴、+z 轴分别对应的是模型的右、上和前向。< / p >
< / blockquote >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_24.png" alt = "shader_24" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "世界空间" > < a href = "#世界空间" class = "headerlink" title = "世界空间" > < / a > 世界空间< / h2 > < p > 世界空间（ ） ， ， ， ？ ， < code > 最外层< / code > 的坐标空间。< / p >
< h2 id = "摄像机空间" > < a href = "#摄像机空间" class = "headerlink" title = "摄像机空间" > < / a > 摄像机空间< / h2 > < p > 摄像机决定了我们渲染游戏所使用的视角。在观察空间中，摄像机位于原点< / p >
< blockquote >
< p > Unity 中观察空间的坐标轴选择是：+x 轴指向右方，+y 轴指向上方，而+z 轴指向的是摄像机的后方< / p >
< / blockquote >
< p > Q： < / p >
< p > A： < / p >
< h2 id = "裁剪空间" > < a href = "#裁剪空间" class = "headerlink" title = "裁剪空间" > < / a > 裁剪空间< / h2 > < p > 用于变换的矩阵叫做裁剪矩阵（ ） ， （ ） ， （ ） < / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_26.png" alt = "shader_26" > < / p >
2023-11-06 16:05:27 +08:00
< p > 视锥体： ， ， （ ） ， ： < / p >
< ul >
< li > 正交投影（ ） ： ， < / li >
< li > 透视投影（ ） ： ， ， < / li >
< / ul >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_25.png" alt = "shader_25" > < / p >
2023-11-06 16:05:27 +08:00
< blockquote >
< p > 追求真实感的 3D 游戏中我们往往会使用透视投影，而在一些 2D 游戏或渲染小地图等其他 HUD 元素时，我们会使用正交投影< / p >
< / blockquote >
< h3 id = "透视摄像机视锥体模型" > < a href = "#透视摄像机视锥体模型" class = "headerlink" title = "透视摄像机视锥体模型" > < / a > 透视摄像机视锥体模型< / h3 > < p > 在 Unity 中，一个摄像机的横纵比由 Game 视图的横纵比和 Viewport Rect 中的 < code > W< / code > 和 < code > H< / code > 属性共同决定（ ， < code > Camera.aspect< / code > 进行更改，但这里不做讨论）< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_27.png" alt = "shader_27" > < / p >
2023-11-06 16:05:27 +08:00
< h3 id = "正交摄像机视锥体模型" > < a href = "#正交摄像机视锥体模型" class = "headerlink" title = "正交摄像机视锥体模型" > < / a > 正交摄像机视锥体模型< / h3 > < p > 通过 Camera 组件的 < code > Size< / code > 属性来改变视锥体竖直方向上高度的一半，而 Clipping Planes 中的 Near 和 Far 参数可以控制视锥体的近裁剪平面和远裁剪平面距离摄像机的远近。< / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_28.png" alt = "shader_28" > < / p >
2023-11-06 16:05:27 +08:00
< h2 id = "屏幕空间" > < a href = "#屏幕空间" class = "headerlink" title = "屏幕空间" > < / a > 屏幕空间< / h2 > < blockquote >
< p > 在 Unity 中，从裁剪空间到屏幕空间的转换是由 Unity 帮我们完成的。< / p >
< / blockquote >
< p > 屏幕空间是一个二维空间，因此，我们必须把顶点从裁剪空间投影到屏幕空间中，来生成对应的 2D 坐标。这个过程可以理解成有两个步骤:< / p >
< ol >
< li > 标准齐次除法（透视除法）：用齐次坐标系的 w 分量去除以 x、y、z 分量，在 OpenGL 中， （ ） < / li >
< / ol >
< p > 经过透视投影变换后的裁剪空间，经过齐次除法后会变换到一个立方体内。按照 OpenGL 的传统，这个立方体的 x、y、z 分量的范围都是[-1, 1]。但在 DirectX 这样的 API 中， < / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_29.png" alt = "shader_29" > < / p >
2023-11-06 16:05:27 +08:00
< p > 而对于正交投影来说，它的裁剪空间实际已经是一个立方体了，而且由于经过正交投影矩阵变换后的顶点的 w 分量是 1， < / p >
2023-11-06 16:08:26 +08:00
< p > < img src = "/img/shader_30.png" alt = "shader_30" > < / p >
2023-11-06 16:05:27 +08:00
< ol start = "2" >
< li > 映射输出窗口的对应像素坐标< / li >
< / ol >
< h2 id = "Unity-内置变换矩阵" > < a href = "#Unity-内置变换矩阵" class = "headerlink" title = "Unity 内置变换矩阵" > < / a > Unity 内置变换矩阵< / h2 > < table >
< thead >
< tr >
< th > 变量名< / th >
< th > 描述< / th >
< / tr >
< / thead >
< tbody > < tr >
< td > UNITY MATRIX MVP< / td >
< td > 当前的模型·观察·投影矩阵，用于将顶点/ 方向矢量从模型空间变换到裁剪空间< / td >
< / tr >
< tr >
< td > UNITY MATRIX MV< / td >
< td > 当前的模型·观察矩阵，用于将顶点/ 方向矢量从模型空间变换到观察空间< / td >
< / tr >
< tr >
< td > UNITY MATRIX V< / td >
< td > 当前的观察矩阵，用于将顶点/ 方向矢量从世界空间变换到观察空间< / td >
< / tr >
< tr >
< td > UNITY MATRIX P< / td >
< td > 当前的投影矩阵，用于将顶点/ 方向矢量从观察空间变换到裁剪空间< / td >
< / tr >
< tr >
< td > UNITY MATRIX VP< / td >
< td > 当前的观察投影矩阵，用于将顶点/ 方向矢量从世界空间变换到裁剪空间< / td >
< / tr >
< tr >
< td > UNITY MATRIX T MV< / td >
< td > UNITYMATRIX MV 的转置矩阵< / td >
< / tr >
< tr >
< td > UNITY MATRIX IT MV< / td >
< td > UNITYMATRIX MV 的逆转置矩阵，用于将法线从模型空间变换到观察空间，也可用于得到 UNITYMATRIXMV 的逆矩阵< / td >
< / tr >
< tr >
< td > Object2World< / td >
< td > 当前的模型矩阵，用于将顶点/ 方向矢量从模型空间变换到世界空间< / td >
< / tr >
< tr >
< td > World2Object< / td >
< td > Object2World 的逆矩阵，用于将顶点/ 方向矢量从世界空间变换到模型空间< / td >
< / tr >
< / tbody > < / table >
2023-11-08 13:45:34 +08:00
2023-12-25 16:39:03 +08:00
< div class = "post-tags" >
<!-- 文章tags -->
< / div >
< p class = "motto" > 重拾纯粹的写作< / p >
2023-11-08 13:45:34 +08:00
< / article >
2023-11-06 16:05:27 +08:00
<!-- 评论 -->
< div id = "vcomments" > < / div >
< / div >
< / main >
2023-12-25 16:39:03 +08:00
<!-- toc -->
< cosy-drag-box id = "toc-drag-box" trigger = "left" min-width = "220" uid = "toc-box" >
< div class = "meta-container" >
< div class = "toc-wrapper cosy-scrollbar" >
2023-12-26 10:56:25 +08:00
< p class = "catalog" >
< svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 24 24" >
< g fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< path d = "M4 6h16" > < / path >
< path d = "M4 12h16" > < / path >
< path d = "M4 18h12" > < / path >
< / g >
< / svg >
< span > 目录< / span >
< / p >
2023-12-25 16:39:03 +08:00
<!-- 文章toc -->
2024-01-04 23:11:27 +08:00
< ol class = "toc" > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E4%BB%80%E4%B9%88%E6%98%AF-OpenGL%E3%80%81DirectX" > < span class = "toc-number" > 1.< / span > < span class = "toc-text" > 什么是 OpenGL、DirectX< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E4%BB%80%E4%B9%88%E6%98%AF-HLSL%E3%80%81GLSL%E3%80%81CG" > < span class = "toc-number" > 2.< / span > < span class = "toc-text" > 什么是 HLSL、GLSL、CG< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#GPU-%E6%B5%81%E6%B0%B4%E7%BA%BF" > < span class = "toc-number" > 3.< / span > < span class = "toc-text" > GPU 流水线< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E9%A1%B6%E7%82%B9%E7%9D%80%E8%89%B2%E5%99%A8-Vertex-Shader" > < span class = "toc-number" > 3.1.< / span > < span class = "toc-text" > 顶点着色器 Vertex Shader< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E8%A3%81%E5%89%AA" > < span class = "toc-number" > 3.2.< / span > < span class = "toc-text" > 裁剪< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E5%B1%8F%E5%B9%95%E6%98%A0%E5%B0%84" > < span class = "toc-number" > 3.3.< / span > < span class = "toc-text" > 屏幕映射< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E5%85%89%E6%A0%85%E9%98%B6%E6%AE%B5" > < span class = "toc-number" > 3.4.< / span > < span class = "toc-text" > 光栅阶段< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-3" > < a class = "toc-link" href = "#%E4%B8%89%E8%A7%92%E5%BD%A2%E8%AE%BE%E7%BD%AE" > < span class = "toc-number" > 3.4.1.< / span > < span class = "toc-text" > 三角形设置< / span > < / a > < / li > < li class = "toc-item toc-level-3" > < a class = "toc-link" href = "#%E4%B8%89%E8%A7%92%E5%BD%A2%E9%81%8D%E5%8E%86" > < span class = "toc-number" > 3.4.2.< / span > < span class = "toc-text" > 三角形遍历()< / span > < / a > < / li > < / ol > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8-Fragment-Shader" > < span class = "toc-number" > 3.5.< / span > < span class = "toc-text" > 片元着色器 Fragment Shader< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E9%80%90%E7%89%87%E5%85%83%E6%93%8D%E4%BD%9C" > < span class = "toc-number" > 3.6.< / span > < span class = "toc-text" > 逐片元操作< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#Draw-Call" > < span class = "toc-number" > 3.7.< / span > < span class = "toc-text" > Draw Call< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-3" > < a class = "toc-link" href = "#CPU-%E5%92%8C-GPU-%E6%98%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%B9%B6%E8%A1%8C%E5%B7%A5%E4%BD%9C%E7%9A%84%EF%BC%9F" > < span class = "toc-number" > 3.7.1.< / span > < span class = "toc-text" > CPU 和 GPU 是如何实现并行工作的？< / span > < / a > < / li > < li class = "toc-item toc-level-3" > < a class = "toc-link" href = "#%E4%B8%BA%E4%BB%80%E4%B9%88-Draw-Call-%E5%A4%9A%E4%BA%86%E4%BC%9A%E5%BD%B1%E5%93%8D%E5%B8%A7%E7%8E%87%EF%BC%9F" > < span class = "toc-number" > 3.7.2.< / span > < span class = "toc-text" > 为什么 Draw Call 多了会影响帧率？< / span > < / a > < / li > < li class = "toc-item toc-level-3" > < a class = "toc-link" href = "#%E5%A6%82%E4%BD%95%E5%87%8F%E5%B0%91-Draw-Call%EF%BC%9F" > < span class = "toc-number" > 3.7.3.< / span > < span class = "toc-text" > 如何减少 Draw Call？ < / span > < / a > < / li > < / ol > < / li > < / ol > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#%E4%BD%A0%E6%98%8E%E7%99%BD%E4%BB%80%E4%B9%88%E6%98%AF-Shader" > < span class = "toc-number" > 4.< / span > < span class = "toc-text" > 你明白什么是 Shader< / span > < / a > < / li > < li class = "toc-item toc-level-1" > < a class = "toc-link" href = "#Unity-Shader" > < span class = "toc-number" > 5.< / span > < span class = "toc-text" > Unity Shader< / span > < / a > < ol class = "toc-child" > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E5%9F%BA%E7%A1%80" > < span class = "toc-number" > 5.1.< / span > < span class = "toc-text" > 基础< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" href = "#%E6%9D%90%E8%B4%A8%E5%92%8C-Unity-Shader" > < span class = "toc-number" > 5.2.< / span > < span class = "toc-text" > 材质和 Unity Shader< / span > < / a > < / li > < li class = "toc-item toc-level-2" > < a class = "toc-link" hr
2023-12-25 16:39:03 +08:00
< / div >
< / div >
< / cosy-drag-box >
2023-11-06 16:05:27 +08:00
< / div >
2023-12-25 16:39:03 +08:00
2023-11-06 16:05:27 +08:00
< / div >
< script >
2023-11-08 10:11:56 +08:00
window.page = {
use: ''
}
2023-11-06 16:05:27 +08:00
window.katex = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-06 16:05:27 +08:00
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
}
window.mermaid = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-15 10:21:41 +08:00
theme: "",
2023-11-06 16:05:27 +08:00
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
}
window.valine = {
2023-11-08 10:11:56 +08:00
enable: "",
2023-11-06 16:05:27 +08:00
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
avatar: 'monsterid',
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
serverURLs: '//tismit6u.api.lncldglobal.com'
};
< / script >
2023-12-28 11:27:53 +08:00
< script src = "/js/5bf38c1b.js" > < / script >
2023-11-06 16:05:27 +08:00
< / main >
< / body >
2023-12-25 16:39:03 +08:00
2023-11-06 16:05:27 +08:00
< script >
2023-12-25 16:39:03 +08:00
window.theme = {
color: 'hsl(238,50%,56%)'
2023-11-06 16:05:27 +08:00
}
< / script >
2023-12-25 16:39:03 +08:00
2023-12-28 11:27:53 +08:00
< script src = "/js/82a967e8.js" > < / script >
2023-11-06 16:05:27 +08:00
< / html >
