764 lines
89 KiB
HTML
764 lines
89 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
|
||
<meta charset="UTF-8" />
|
||
|
||
<meta name="generator" content="Hugo 0.113.0"><meta name="theme-color" content="#fff" />
|
||
<meta name="color-scheme" content="light dark">
|
||
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no" />
|
||
|
||
<meta http-equiv="Cache-Control" content="no-transform" />
|
||
|
||
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
||
|
||
<title>纹理 | 飞鸿踏雪</title>
|
||
|
||
<link rel="stylesheet" href="/css/meme.min.12a3541920a798d49c1bca858f15c53090f14ce9367a34faa2bb51dd38299730.css"/>
|
||
|
||
|
||
|
||
<script src="/js/meme.min.ac2b48f322cff6a9a8036be3baf3e59e300cd9e4191997a8c3765f79de02bf8d.js"></script>
|
||
|
||
|
||
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Noto+Serif+SC:wght@400;500;700&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" media="print" onload="this.media='all'" />
|
||
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Noto+Serif+SC:wght@400;500;700&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" /></noscript>
|
||
|
||
<meta name="author" content="InkSoul" /><meta name="description" content="重心坐标 重心坐标定义 对于一个三角形的三点坐标A,B,C,平面内的一点（x,y）可以写……" />
|
||
|
||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#2a6df4" />
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-title" content="飞鸿踏雪" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<meta name="application-name" content="飞鸿踏雪" />
|
||
<meta name="msapplication-starturl" content="../../" />
|
||
<meta name="msapplication-TileColor" content="#fff" />
|
||
<meta name="msapplication-TileImage" content="../../icons/mstile-150x150.png" />
|
||
<link rel="manifest" href="/manifest.json" />
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="canonical" href="http://www.inksoul.top/computergraphic/%E7%BA%B9%E7%90%86/" />
|
||
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BlogPosting",
|
||
"datePublished": "2022-07-09T21:49:09+08:00",
|
||
"dateModified": "2023-06-18T21:19:01+08:00",
|
||
"url": "http://www.inksoul.top/computergraphic/%E7%BA%B9%E7%90%86/",
|
||
"headline": "纹理",
|
||
"description": "重心坐标 重心坐标定义 对于一个三角形的三点坐标A,B,C,平面内的一点（x,y）可以写……",
|
||
"inLanguage" : "zh-CN",
|
||
"articleSection": "computergraphic",
|
||
"wordCount": 2486 ,
|
||
"image": ["http://www.inksoul.top/../../images/barycentric_coordinates.png","http://www.inksoul.top/../../images/geometric_barycentric.png","http://www.inksoul.top/../../images/barycentric_in_coordinates.jpg","http://www.inksoul.top/../../images/barycentric_coor_interpo.png","http://www.inksoul.top/../../images/bilinear_interpolation.png","http://www.inksoul.top/../../images/moire_and_jaggies.png","http://www.inksoul.top/../../images/point_query_and_range_query.png","http://www.inksoul.top/../../images/mipmap_information.png","http://www.inksoul.top/../../images/mip_hierarchy.png","http://www.inksoul.top/../../images/compute_mip_level_D.png","http://www.inksoul.top/../../images/Trilinear_interpolation.png","http://www.inksoul.top/../../images/Anisotropic_filtering.png","http://www.inksoul.top/../../images/irregular_pixel_footprint.png","http://www.inksoul.top/../../images/Environment_Map.png","http://www.inksoul.top/../../images/Environmental_Lighting.png","http://www.inksoul.top/../../images/Spherical_Environment_Map.png","http://www.inksoul.top/../../images/Spherical_Map_Problem.png","http://www.inksoul.top/../../images/Cube_Map.png","http://www.inksoul.top/../../images/perturb_the_normal.png","http://www.inksoul.top/../../images/Displacement_mapping.png","http://www.inksoul.top/../../images/Procedural_noise_and_Solid.png","http://www.inksoul.top/../../images/Provide_precomputed_shading.png","http://www.inksoul.top/../../images/3D_texture_and_volume.png"],
|
||
"author": {
|
||
"@type": "Person",
|
||
"email": "qingci30@163.com",
|
||
"image": "http://www.inksoul.top/icons/apple-touch-icon.png",
|
||
"url": "http://www.inksoul.top",
|
||
"name": "InkSoul"
|
||
},
|
||
"license": "[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh)",
|
||
"publisher": {
|
||
"@type": "Organization",
|
||
"name": "飞鸿踏雪",
|
||
"logo": {
|
||
"@type": "ImageObject",
|
||
"url": "http://www.inksoul.top/icons/apple-touch-icon.png"
|
||
},
|
||
"url": "http://www.inksoul.top/"
|
||
},
|
||
"mainEntityOfPage": {
|
||
"@type": "WebSite",
|
||
"@id": "http://www.inksoul.top/"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta property="og:title" content="纹理" />
|
||
<meta property="og:description" content="重心坐标 重心坐标定义 对于一个三角形的三点坐标A,B,C,平面内的一点（x,y）可以写……" />
|
||
<meta property="og:url" content="http://www.inksoul.top/computergraphic/%E7%BA%B9%E7%90%86/" />
|
||
<meta property="og:site_name" content="飞鸿踏雪" />
|
||
<meta property="og:locale" content="zh" /><meta property="og:image" content="http://www.inksoul.top/../../images/barycentric_coordinates.png" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="article:published_time" content="2022-07-09T21:49:09+08:00" />
|
||
<meta property="article:modified_time" content="2023-06-18T21:19:01+08:00" />
|
||
|
||
<meta property="article:section" content="computergraphic" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
|
||
<header class="header">
|
||
|
||
<div class="header-wrapper">
|
||
<div class="header-inner single">
|
||
|
||
<div class="site-brand">
|
||
|
||
<a href="/" class="brand">飞鸿踏雪</a>
|
||
|
||
</div>
|
||
|
||
<nav class="nav">
|
||
<ul class="menu" id="menu">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="menu-item active"><a href="/computergraphic/"><svg class="icon computergraphic" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg><span class="menu-item-name">图形学</span></a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-item"><a href="/algorithm/"><svg class="icon algorithm" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg><span class="menu-item-name">算法</span></a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-item"><a href="/mathematics/"><svg class="icon mathematics" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path stroker-linecap="round" stroke-linejoin="round" stroker-width="2" d="M576 32.01c0-17.69-14.33-31.1-32-31.1l-224-.0049c-14.69 0-27.48 10-31.05 24.25L197.9 388.3L124.6 241.7C119.2 230.9 108.1 224 96 224L32 224c-17.67 0-32 14.31-32 31.1s14.33 32 32 32h44.22l103.2 206.3c5.469 10.91 16.6 17.68 28.61 17.68c1.172 0 2.323-.0576 3.495-.1826c13.31-1.469 24.31-11.06 27.56-24.06l105.9-423.8H544C561.7 64.01 576 49.7 576 32.01zM566.6 233.4c-12.5-12.5-32.75-12.5-45.25 0L480 274.8l-41.38-41.37c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l41.38 41.38l-41.38 41.38c-12.5 12.5-12.5 32.75 0 45.25C399.6 412.9 407.8 416 416 416s16.38-3.125 22.62-9.375L480 365.3l41.38 41.38C527.6 412.9 535.8 416 544 416s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25l-41.38-41.38L566.6 278.6C579.1 266.1 579.1 245.9 566.6 233.4z"/></svg><span class="menu-item-name">数学</span></a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-item"><a href="/408/"><svg class="icon 408" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticon 408s, Inc. --><path d="M172.1 40.16L268.1 3.76C280.9-1.089 295.1-1.089 307.9 3.76L403.9 40.16C425.6 48.41 440 69.25 440 92.52V204.7C441.3 205.1 442.6 205.5 443.9 205.1L539.9 242.4C561.6 250.6 576 271.5 576 294.7V413.9C576 436.1 562.9 456.2 542.5 465.1L446.5 507.3C432.2 513.7 415.8 513.7 401.5 507.3L288 457.5L174.5 507.3C160.2 513.7 143.8 513.7 129.5 507.3L33.46 465.1C13.13 456.2 0 436.1 0 413.9V294.7C0 271.5 14.39 250.6 36.15 242.4L132.1 205.1C133.4 205.5 134.7 205.1 136 204.7V92.52C136 69.25 150.4 48.41 172.1 40.16V40.16zM290.8 48.64C289 47.95 286.1 47.95 285.2 48.64L206.8 78.35L287.1 109.5L369.2 78.35L290.8 48.64zM392 210.6V121L309.6 152.6V241.8L392 210.6zM154.8 250.9C153 250.2 150.1 250.2 149.2 250.9L70.81 280.6L152 311.7L233.2 280.6L154.8 250.9zM173.6 455.3L256 419.1V323.2L173.6 354.8V455.3zM342.8 280.6L424 311.7L505.2 280.6L426.8 250.9C425 250.2 422.1 250.2 421.2 250.9L342.8 280.6zM528 413.9V323.2L445.6 354.8V455.3L523.2 421.2C526.1 419.9 528 417.1 528 413.9V413.9z"/></svg><span class="menu-item-name">408</span></a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-item"><a href="/stuff/"><svg class="icon stuff" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticon stuffs, Inc. --><path d="M216 104C202.8 104 192 114.8 192 128s10.75 24 24 24c79.41 0 144 64.59 144 144C360 309.3 370.8 320 384 320s24-10.75 24-24C408 190.1 321.9 104 216 104zM224 0C206.3 0 192 14.31 192 32s14.33 32 32 32c123.5 0 224 100.5 224 224c0 17.69 14.33 32 32 32s32-14.31 32-32C512 129.2 382.8 0 224 0zM188.9 346l27.37-27.37c2.625 .625 5.059 1.506 7.809 1.506c17.75 0 31.99-14.26 31.99-32c0-17.62-14.24-32.01-31.99-32.01c-17.62 0-31.99 14.38-31.99 32.01c0 2.875 .8099 5.25 1.56 7.875L166.2 323.4L49.37 206.5c-7.25-7.25-20.12-6-24.1 3c-41.75 77.88-29.88 176.7 35.75 242.4c65.62 65.62 164.6 77.5 242.4 35.75c9.125-5 10.38-17.75 3-25L188.9 346z"/></svg><span class="menu-item-name">杂物</span></a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-item"><a href="/about/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="icon user-circle"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"/></svg><span class="menu-item-name">关于</span></a>
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="menu-item">
|
||
<a id="theme-switcher" href="#"><span class="icon theme-icon-light">🌞</span><span class="icon theme-icon-dark">🌙</span></a>
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<input type="checkbox" id="nav-toggle" aria-hidden="true" />
|
||
<label for="nav-toggle" class="nav-toggle"></label>
|
||
<label for="nav-toggle" class="nav-curtain"></label>
|
||
|
||
|
||
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<main class="main single" id="main">
|
||
<div class="main-inner">
|
||
|
||
|
||
|
||
<article class="content post h-entry" data-align="justify" data-type="computergraphic" data-toc-num="true">
|
||
|
||
<h1 class="post-title p-name">纹理</h1>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body e-content">
|
||
<h4 id="重心坐标"><a href="#重心坐标" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>重心坐标</h4>
|
||
<h6 id="重心坐标定义"><a href="#重心坐标定义" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>重心坐标定义</h6>
|
||
<p><img src="/../../images/barycentric_coordinates.png" alt=""></p>
|
||
<p>对于一个三角形的三点坐标A,B,C,平面内的一点（x,y）可以写成三点的线性组合式</p>
|
||
<p>$$(x,y)=\alpha A + \beta B + \gamma C = \alpha + \beta + \gamma = 1$$</p>
|
||
<p>此时三个顶点的权重（$\alpha , \beta , \gamma$）为（x,y）的重心坐标</p>
|
||
<p>注意：如果三个坐标值都为非负，则这个重心位于三角形内部</p>
|
||
<h6 id="三角形的几何角度下求解"><a href="#三角形的几何角度下求解" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>三角形的几何角度下求解</h6>
|
||
<p><img src="../../images/geometric_barycentric.png" alt=""></p>
|
||
<p>将点与三个顶点相连，三个三角形的面积分别为$A_A,A_B,A_C$对应的重心坐标的计算式,</p>
|
||
<p>$$\alpha = \frac{A_A}{A_A+A_B+A_C}$$</p>
|
||
<p>$$\beta = \frac{A_B}{A_A+A_B+A_C}$$</p>
|
||
<p>$$\gamma = \frac{A_C}{A_A+A_B+A_C}$$</p>
|
||
<p>在已知四点坐标的情况下则可通过行列式的几何意义求解（任意两个二维向量组合成矩阵的行列式的绝对值为这两条向量所围成平行四边形的面积）</p>
|
||
<p>设任意一点为P(x,y)则</p>
|
||
<p>$$A_B = \lvert AP,AC \rvert $$
|
||
$$A_C = \lvert AB,AP \rvert $$
|
||
$$A_A = \lvert BC,BP \rvert $$</p>
|
||
<p>可得出
|
||
$$\gamma = \frac{(y_a - y_b) + (x_b - x_a)y + x_a y_b - x_b y_a }{(y_a - y_b)x_c + (x_b - x_a)y_c + x_a y_b - x_b y_a}$$</p>
|
||
<p>$$\beta = \frac{(y_a - y_c)x + (x_c - x_a)y + x_a y_c - x_c y_a}{(y_a - y_c)x_b + (x_c - x_a)y_b + x_a y_c - x_c y_a}$$</p>
|
||
<p>$$\alpha = 1 - \beta - \gamma$$</p>
|
||
<h6 id="三角形的坐标系角度下求解"><a href="#三角形的坐标系角度下求解" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>三角形的坐标系角度下求解</h6>
|
||
<p>对于重心坐标系存在另一种等价视角：</p>
|
||
<p>以A点为原点，AB,AC分别为新的坐标系的单位向量构建坐标系，如图</p>
|
||
<p><img src="../../images/barycentric_in_coordinates.jpg" alt=""></p>
|
||
<p>给定的任意点P的坐标可表示为$P(\beta , \gamma)$ ,可推出P点坐标满足以下关系</p>
|
||
<p>$$p = a + \beta(b - a) + \gamma(c - a)$$</p>
|
||
<p>化简后得</p>
|
||
<p>$$p = (1 - \beta - \gamma )a + \beta b + \gamma c $$</p>
|
||
<p>表现为一个线性方程组如下</p>
|
||
<p>$$
|
||
\begin{bmatrix}
|
||
x_b - x_a & x_c - x_a
|
||
\\
|
||
y_b - y_a & y_c - y_a
|
||
\end{bmatrix}
|
||
\begin{bmatrix}
|
||
\beta
|
||
\\
|
||
\gamma
|
||
\end{bmatrix}=
|
||
\begin{bmatrix}
|
||
x_p - x_a
|
||
\\
|
||
y_p - y_a
|
||
\end{bmatrix}
|
||
$$</p>
|
||
<h6 id="重心坐标的用处"><a href="#重心坐标的用处" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>重心坐标的用处</h6>
|
||
<p>对顶点处的值进行线性插值，如下图</p>
|
||
<p><img src="../../images/barycentric_coor_interpo.png" alt=""></p>
|
||
<p>$$V = \alpha V_A + \beta V_B + \gamma V_C$$</p>
|
||
<p>$V_A,V_B,V_C$ 可以对应为：</p>
|
||
<ol>
|
||
<li>位置</li>
|
||
<li>纹理坐标</li>
|
||
<li>颜色</li>
|
||
<li>法线</li>
|
||
<li>深度</li>
|
||
<li>材质属性</li>
|
||
</ol>
|
||
<h6 id="插值部分代码实现"><a href="#插值部分代码实现" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>插值部分代码实现</h6>
|
||
<div class="highlight"><div class="chroma">
|
||
<div class="table-container"><table class="lntable"><tr><td class="lntd">
|
||
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
|
||
</span><span class="lnt"> 2
|
||
</span><span class="lnt"> 3
|
||
</span><span class="lnt"> 4
|
||
</span><span class="lnt"> 5
|
||
</span><span class="lnt"> 6
|
||
</span><span class="lnt"> 7
|
||
</span><span class="lnt"> 8
|
||
</span><span class="lnt"> 9
|
||
</span><span class="lnt">10
|
||
</span><span class="lnt">11
|
||
</span><span class="lnt">12
|
||
</span><span class="lnt">13
|
||
</span><span class="lnt">14
|
||
</span><span class="lnt">15
|
||
</span><span class="lnt">16
|
||
</span><span class="lnt">17
|
||
</span><span class="lnt">18
|
||
</span><span class="lnt">19
|
||
</span><span class="lnt">20
|
||
</span><span class="lnt">21
|
||
</span><span class="lnt">22
|
||
</span><span class="lnt">23
|
||
</span><span class="lnt">24
|
||
</span><span class="lnt">25
|
||
</span><span class="lnt">26
|
||
</span><span class="lnt">27
|
||
</span><span class="lnt">28
|
||
</span><span class="lnt">29
|
||
</span><span class="lnt">30
|
||
</span><span class="lnt">31
|
||
</span><span class="lnt">32
|
||
</span><span class="lnt">33
|
||
</span><span class="lnt">34
|
||
</span><span class="lnt">35
|
||
</span></code></pre></td>
|
||
<td class="lntd">
|
||
<pre tabindex="0" class="chroma"><code class="language-c++" data-lang="c++"><span class="line"><span class="cl"><span class="c1">//三维向量插值
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">static</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span> <span class="n">interpolate</span><span class="p">(</span><span class="kt">float</span> <span class="n">alpha</span><span class="p">,</span> <span class="kt">float</span> <span class="n">beta</span><span class="p">,</span> <span class="kt">float</span> <span class="n">gamma</span><span class="p">,</span> <span class="k">const</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span><span class="o">&</span> <span class="n">vert1</span><span class="p">,</span> <span class="k">const</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span><span class="o">&</span> <span class="n">vert2</span><span class="p">,</span> <span class="k">const</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span><span class="o">&</span> <span class="n">vert3</span><span class="p">,</span> <span class="kt">float</span> <span class="n">weight</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span><span class="n">alpha</span> <span class="o">*</span> <span class="n">vert1</span> <span class="o">+</span> <span class="n">beta</span> <span class="o">*</span> <span class="n">vert2</span> <span class="o">+</span> <span class="n">gamma</span> <span class="o">*</span> <span class="n">vert3</span><span class="p">)</span> <span class="o">/</span> <span class="n">weight</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="c1">// 二维向量插值
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">static</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector2f</span> <span class="n">interpolate</span><span class="p">(</span><span class="kt">float</span> <span class="n">alpha</span><span class="p">,</span> <span class="kt">float</span> <span class="n">beta</span><span class="p">,</span> <span class="kt">float</span> <span class="n">gamma</span><span class="p">,</span> <span class="k">const</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector2f</span><span class="o">&</span> <span class="n">vert1</span><span class="p">,</span> <span class="k">const</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector2f</span><span class="o">&</span> <span class="n">vert2</span><span class="p">,</span> <span class="k">const</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector2f</span><span class="o">&</span> <span class="n">vert3</span><span class="p">,</span> <span class="kt">float</span> <span class="n">weight</span><span class="p">)</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">{</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="k">auto</span> <span class="n">u</span> <span class="o">=</span> <span class="p">(</span><span class="n">alpha</span> <span class="o">*</span> <span class="n">vert1</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">+</span> <span class="n">beta</span> <span class="o">*</span> <span class="n">vert2</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">+</span> <span class="n">gamma</span> <span class="o">*</span> <span class="n">vert3</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="k">auto</span> <span class="n">v</span> <span class="o">=</span> <span class="p">(</span><span class="n">alpha</span> <span class="o">*</span> <span class="n">vert1</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="n">beta</span> <span class="o">*</span> <span class="n">vert2</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="n">gamma</span> <span class="o">*</span> <span class="n">vert3</span><span class="p">[</span><span class="mi">1</span><span class="p">]);</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="n">u</span> <span class="o">/=</span> <span class="n">weight</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">v</span> <span class="o">/=</span> <span class="n">weight</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector2f</span><span class="p">(</span><span class="n">u</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c1">//计算重心
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">static</span> <span class="n">std</span><span class="o">::</span><span class="n">tuple</span><span class="o"><</span><span class="kt">float</span><span class="p">,</span> <span class="kt">float</span><span class="p">,</span> <span class="kt">float</span><span class="o">></span> <span class="n">computeBarycentric2D</span><span class="p">(</span><span class="kt">float</span> <span class="n">x</span><span class="p">,</span> <span class="kt">float</span> <span class="n">y</span><span class="p">,</span> <span class="k">const</span> <span class="n">Vector4f</span><span class="o">*</span> <span class="n">v</span><span class="p">){</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">c1</span> <span class="o">=</span> <span class="p">(</span><span class="n">x</span><span class="o">*</span><span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">+</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">())</span><span class="o">*</span><span class="n">y</span> <span class="o">+</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">/</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">+</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">())</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">+</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">());</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">c2</span> <span class="o">=</span> <span class="p">(</span><span class="n">x</span><span class="o">*</span><span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">+</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">())</span><span class="o">*</span><span class="n">y</span> <span class="o">+</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">/</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">+</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">())</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">+</span> <span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">());</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">c3</span> <span class="o">=</span> <span class="p">(</span><span class="n">x</span><span class="o">*</span><span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">+</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">())</span><span class="o">*</span><span class="n">y</span> <span class="o">+</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">/</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">())</span> <span class="o">+</span> <span class="p">(</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">())</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">+</span> <span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">y</span><span class="p">()</span> <span class="o">-</span> <span class="n">v</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="n">x</span><span class="p">()</span><span class="o">*</span><span class="n">v</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">y</span><span class="p">());</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span><span class="n">c1</span><span class="p">,</span><span class="n">c2</span><span class="p">,</span><span class="n">c3</span><span class="p">};</span>
|
||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="c1">//光栅化时，判断深度之后进行插值计算得出对应的数值
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>
|
||
</span></span><span class="line"><span class="cl"><span class="c1">// auto interpolated_color（颜色）
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">auto</span> <span class="n">interpolated_color</span><span class="o">=</span><span class="n">interpolate</span><span class="p">(</span><span class="n">alpha</span><span class="p">,</span><span class="n">beta</span><span class="p">,</span><span class="n">gamma</span><span class="p">,</span><span class="n">t</span><span class="p">.</span><span class="n">color</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="n">t</span><span class="p">.</span><span class="n">color</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span><span class="n">t</span><span class="p">.</span><span class="n">color</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span><span class="mi">1</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c1">// auto interpolated_normal（法线）
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">auto</span> <span class="n">interpolated_normal</span> <span class="o">=</span> <span class="n">interpolate</span><span class="p">(</span><span class="n">alpha</span><span class="p">,</span><span class="n">beta</span><span class="p">,</span><span class="n">gamma</span><span class="p">,</span><span class="n">t</span><span class="p">.</span><span class="n">normal</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="n">t</span><span class="p">.</span><span class="n">normal</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span><span class="n">t</span><span class="p">.</span><span class="n">normal</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span><span class="mi">1</span><span class="p">).</span><span class="n">normalized</span><span class="p">();</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c1">// auto interpolated_texcoords（纹理坐标）
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">auto</span> <span class="n">interpolated_texcoords</span> <span class="o">=</span> <span class="n">interpolate</span><span class="p">(</span><span class="n">alpha</span><span class="p">,</span><span class="n">beta</span><span class="p">,</span><span class="n">gamma</span><span class="p">,</span><span class="n">t</span><span class="p">.</span><span class="n">tex_coords</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="n">t</span><span class="p">.</span><span class="n">tex_coords</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span><span class="n">t</span><span class="p">.</span><span class="n">tex_coords</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span><span class="mi">1</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"><span class="c1">// auto interpolated_shadingcoords（着色坐标）
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">auto</span> <span class="n">interpolated_shadingcoords</span> <span class="o">=</span> <span class="n">interpolate</span><span class="p">(</span><span class="n">alpha</span><span class="p">,</span><span class="n">beta</span><span class="p">,</span><span class="n">gamma</span><span class="p">,</span><span class="n">view_pos</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="n">view_pos</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span><span class="n">view_pos</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span><span class="mi">1</span><span class="p">);</span>
|
||
</span></span></code></pre></td></tr></table></div>
|
||
</div>
|
||
</div><h4 id="纹理映射处理"><a href="#纹理映射处理" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>纹理映射处理</h4>
|
||
<h6 id="简单的纹理映射--漫反射颜色"><a href="#简单的纹理映射--漫反射颜色" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>简单的纹理映射 ： 漫反射颜色</h6>
|
||
<p>伪代码 ：</p>
|
||
<pre tabindex="0"><code>for each rasterized screen sample (x,y):
|
||
(u,v) = evaluate texture coordinate at (x,y)
|
||
texcolor = texture.sample(u,v);
|
||
set sample's color to texcolor
|
||
</code></pre><p>sample(x,y) : 通常为像素的重心</p>
|
||
<p>texture coordinate at (x,y)：使用重心坐标值</p>
|
||
<p>sample's color : 通常为漫反射率值 kd</p>
|
||
<h6 id="纹理放大处理简单方式"><a href="#纹理放大处理简单方式" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>纹理放大处理（简单方式）</h6>
|
||
<p>前置知识：</p>
|
||
<ol>
|
||
<li>通常不需要进行纹理放大操作，这会导致纹理分辨率不足</li>
|
||
<li>纹理的一个像素通常被称为纹理元素或纹素(texel)</li>
|
||
</ol>
|
||
<p>假设我们需要在红点处纹理采样的值f(x,y),黑点为对应的纹理采样点</p>
|
||
<p>此时我们会选取红点位置周围的四个采样点，同时计算其与周围四个采样点的偏移值(s,t)如下图</p>
|
||
<p><img src="../../images/bilinear_interpolation.png" alt=""></p>
|
||
<p>可得相应的计算过程:</p>
|
||
<ol>
|
||
<li>
|
||
<p>定义线性插值
|
||
$$lerp(x,v_0,v_1) = v_0 + x(v_1 - v_0)$$</p>
|
||
</li>
|
||
<li>
|
||
<p>计算两个辅助值
|
||
$$u_0 = lerp(s,u_{00},u_{10})$$
|
||
$$u_1 = lerp(s,u_{01},u_{11})$$</p>
|
||
</li>
|
||
<li>
|
||
<p>计算顶点插值得出结果
|
||
$$f(x,y) = lerp(t,u_0,u_1)$$</p>
|
||
</li>
|
||
</ol>
|
||
<p>采用线性插值的方式进行纹理放大的计算往往能够获得很好的结果和平衡的性能消耗</p>
|
||
<h6 id="纹理放大至过大的情况"><a href="#纹理放大至过大的情况" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>纹理放大至过大的情况</h6>
|
||
<p>此时在点采样下会产生摩尔纹和锯齿，如下图</p>
|
||
<p><img src="../../images/moire_and_jaggies.png" alt=""></p>
|
||
<p>通常处理是进行超采样，同时也会有几个问题</p>
|
||
<ol>
|
||
<li>超采样能产生质量足够高的结果，带来的性能开销也很高</li>
|
||
<li>当纹理极度缩小时，许多纹素会被压缩在内存(texel footprint)里</li>
|
||
<li>单一像素中的信号序列过大</li>
|
||
<li>需要更高的采样频率</li>
|
||
</ol>
|
||
<p>所以我们更倾向于使用范围序列而非点序列</p>
|
||
<p><img src="../../images/point_query_and_range_query.png" alt=""></p>
|
||
<h6 id="mipmap支持-range-query"><a href="#mipmap支持-range-query" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>Mipmap(支持 Range Query)</h6>
|
||
<p>mipmap 可由下图表示</p>
|
||
<p><img src="../../images/mipmap_information.png" alt=""></p>
|
||
<p>对应产生的mip层次结构也由下图表示</p>
|
||
<p><img src="../../images/mip_hierarchy.png" alt=""></p>
|
||
<p>在计算对应层次的mipmap时，我们需要相邻采样点的纹理坐标来估计纹理内存</p>
|
||
<p><img src="../../images/compute_mip_level_D.png" alt=""></p>
|
||
<p>如上图所示，我们能够得到两个值</p>
|
||
<p>$$L = \max \left( \sqrt{(\frac{d_u}{d_X})^2 + (\frac{d_v}{d_X})^2},\sqrt{(\frac{d_u}{d_y})^2 + (\frac{d_v}{d_y})^2} \right) $$</p>
|
||
<p>$$D = \log_2 L$$</p>
|
||
<p>在使用时往往D值会四舍五入为整数，这会导致纹理的不连续，因此，我们还需要进行下图所示的Trilinear Interpolation 从而得到一个连续的D值</p>
|
||
<p><img src="../../images/Trilinear_interpolation.png" alt=""></p>
|
||
<p>在插值处理后的纹理依旧会存在过度模糊(overblur)的现象，但相比于超采样的高性能开销依旧有很大的提升</p>
|
||
<h6 id="anisotropic-filtering-and-ewa-filtering"><a href="#anisotropic-filtering-and-ewa-filtering" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>Anisotropic Filtering and EWA filtering</h6>
|
||
<p>Anisotropic Filtering</p>
|
||
<ol>
|
||
<li>可以查找轴对齐的矩形区域纹理</li>
|
||
<li>对角线纹理处理依旧存在问题</li>
|
||
</ol>
|
||
<p><img src="../../images/Anisotropic_filtering.png" alt=""></p>
|
||
<p>EWA filtering</p>
|
||
<ol>
|
||
<li>权重均衡</li>
|
||
<li>采用mipmap层次结构</li>
|
||
<li>可以处理纹理中的不规则像素(irregular footprints)</li>
|
||
</ol>
|
||
<p>Irregular Pixel Footprint in Texture的产生情况如下图</p>
|
||
<p><img src="../../images/irregular_pixel_footprint.png" alt=""></p>
|
||
<h4 id="纹理的应用"><a href="#纹理的应用" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>纹理的应用</h4>
|
||
<h5 id="纹理的用途"><a href="#纹理的用途" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>纹理的用途</h5>
|
||
<p>在现代GPU中，纹理贴图 = 内存数据 + 范围序列(reang query)即反走样</p>
|
||
<p>常用的方式是向片元计算中提供相应的数据</p>
|
||
<p>应用的地方:</p>
|
||
<ol>
|
||
<li>环境光</li>
|
||
<li>存储微表面</li>
|
||
<li>程序化纹理生成</li>
|
||
<li>实体建模</li>
|
||
<li>立体渲染（体绘制）</li>
|
||
</ol>
|
||
<h6 id="环境光贴图和立方体贴图environment-and-cube-map"><a href="#环境光贴图和立方体贴图environment-and-cube-map" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>环境光贴图和立方体贴图(Environment and Cube Map)</h6>
|
||
<p>环境光贴图通常指在贴图上绘制模型周围环境光效，实现某些模型反射环境光的效果</p>
|
||
<p><img src="../../images/Environment_Map.png" alt=""></p>
|
||
<p>也用于一些镜面反射的物体实现真实光照</p>
|
||
<p><img src="../../images/Environmental_Lighting.png" alt=""></p>
|
||
<p><img src="../../images/Spherical_Environment_Map.png" alt=""></p>
|
||
<p>在一些球型表面贴图会存在形变问题，如下图的顶部和底部</p>
|
||
<p><img src="../../images/Spherical_Map_Problem.png" alt=""></p>
|
||
<p>立方体贴图则由球体上一个向量沿自身方向映射到立方体上的点获得</p>
|
||
<p><img src="../../images/Cube_Map.png" alt=""></p>
|
||
<p>一个立方体使用6个方形纹理贴图来生成纹理</p>
|
||
<h6 id="bump-mapping"><a href="#bump-mapping" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>Bump Mapping</h6>
|
||
<p>在不提高模型面数的情况下展示表面细节</p>
|
||
<ol>
|
||
<li>对表面的每一条法线进行扰动(仅用于着色计算)</li>
|
||
<li>高度偏移纹理定义的每个纹素</li>
|
||
</ol>
|
||
<p>扰动法线的计算(平面)</p>
|
||
<ol>
|
||
<li>假设原平面法线为$$n(p) = (0,1)$$</li>
|
||
<li>$ p $点处的导数为 $$dp = c * [h(p + 1) - h(p)]$$</li>
|
||
<li>扰动后的法线值为$$n(p) = (-dp,1).normalized()$$</li>
|
||
</ol>
|
||
<p><img src="../../images/perturb_the_normal.png" alt=""></p>
|
||
<p>扰动法线的计算(3D)</p>
|
||
<ol>
|
||
<li>假设原平面法线为$$n(p) = (0,0,1)$$</li>
|
||
<li>$p$点处的导数为
|
||
$$\frac{d_p}{d_u} = c_1 * [h(u + 1) - h(u)]$$
|
||
$$\frac{d_p}{d_v} = c_2 * [h(v + 1) - h(v)]$$</li>
|
||
<li>扰动后的法线为$$n = (\frac{-d_p}{d_u},\frac{-d_p}{d_v},1).normalized()$$</li>
|
||
<li>坐标计算基于本地坐标系</li>
|
||
</ol>
|
||
<p>部份代码实现</p>
|
||
<div class="highlight"><div class="chroma">
|
||
<div class="table-container"><table class="lntable"><tr><td class="lntd">
|
||
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
|
||
</span><span class="lnt"> 2
|
||
</span><span class="lnt"> 3
|
||
</span><span class="lnt"> 4
|
||
</span><span class="lnt"> 5
|
||
</span><span class="lnt"> 6
|
||
</span><span class="lnt"> 7
|
||
</span><span class="lnt"> 8
|
||
</span><span class="lnt"> 9
|
||
</span><span class="lnt">10
|
||
</span><span class="lnt">11
|
||
</span><span class="lnt">12
|
||
</span><span class="lnt">13
|
||
</span><span class="lnt">14
|
||
</span><span class="lnt">15
|
||
</span><span class="lnt">16
|
||
</span><span class="lnt">17
|
||
</span><span class="lnt">18
|
||
</span><span class="lnt">19
|
||
</span><span class="lnt">20
|
||
</span><span class="lnt">21
|
||
</span><span class="lnt">22
|
||
</span><span class="lnt">23
|
||
</span><span class="lnt">24
|
||
</span><span class="lnt">25
|
||
</span><span class="lnt">26
|
||
</span><span class="lnt">27
|
||
</span><span class="lnt">28
|
||
</span><span class="lnt">29
|
||
</span><span class="lnt">30
|
||
</span><span class="lnt">31
|
||
</span><span class="lnt">32
|
||
</span><span class="lnt">33
|
||
</span><span class="lnt">34
|
||
</span></code></pre></td>
|
||
<td class="lntd">
|
||
<pre tabindex="0" class="chroma"><code class="language-c++" data-lang="c++"><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">x</span> <span class="o">=</span> <span class="n">normal</span><span class="p">.</span><span class="n">x</span><span class="p">();</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">y</span> <span class="o">=</span> <span class="n">normal</span><span class="p">.</span><span class="n">y</span><span class="p">();</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">z</span> <span class="o">=</span> <span class="n">normal</span><span class="p">.</span><span class="n">z</span><span class="p">();</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span> <span class="n">t</span> <span class="o">=</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span><span class="p">(</span><span class="n">x</span><span class="o">*</span><span class="n">y</span><span class="o">/</span><span class="n">sqrt</span><span class="p">(</span><span class="n">x</span><span class="o">*</span><span class="n">x</span><span class="o">+</span><span class="n">z</span><span class="o">*</span><span class="n">z</span><span class="p">),</span><span class="n">sqrt</span><span class="p">(</span><span class="n">x</span><span class="o">*</span><span class="n">x</span><span class="o">+</span><span class="n">z</span><span class="o">*</span><span class="n">z</span><span class="p">),</span><span class="n">z</span><span class="o">*</span><span class="n">y</span><span class="o">/</span><span class="n">sqrt</span><span class="p">(</span><span class="n">x</span><span class="o">*</span><span class="n">x</span><span class="o">+</span><span class="n">z</span><span class="o">*</span><span class="n">z</span><span class="p">));</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span> <span class="n">b</span> <span class="o">=</span> <span class="n">normal</span><span class="p">.</span><span class="n">cross</span><span class="p">(</span><span class="n">t</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">Eigen</span><span class="o">::</span><span class="n">Matrix3f</span> <span class="n">TBN</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">TBN</span> <span class="o"><<</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">t</span><span class="p">.</span><span class="n">x</span><span class="p">(),</span><span class="n">b</span><span class="p">.</span><span class="n">y</span><span class="p">(),</span><span class="n">normal</span><span class="p">.</span><span class="n">x</span><span class="p">(),</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">t</span><span class="p">.</span><span class="n">y</span><span class="p">(),</span><span class="n">b</span><span class="p">.</span><span class="n">x</span><span class="p">(),</span><span class="n">normal</span><span class="p">.</span><span class="n">y</span><span class="p">(),</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">t</span><span class="p">.</span><span class="n">z</span><span class="p">(),</span><span class="n">b</span><span class="p">.</span><span class="n">z</span><span class="p">(),</span><span class="n">normal</span><span class="p">.</span><span class="n">z</span><span class="p">();</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">u</span> <span class="o">=</span> <span class="n">payload</span><span class="p">.</span><span class="n">tex_coords</span><span class="p">.</span><span class="n">x</span><span class="p">();</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">v</span> <span class="o">=</span> <span class="n">payload</span><span class="p">.</span><span class="n">tex_coords</span><span class="p">.</span><span class="n">y</span><span class="p">();</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">w</span> <span class="o">=</span> <span class="n">payload</span><span class="p">.</span><span class="n">texture</span><span class="o">-></span><span class="n">width</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">h</span> <span class="o">=</span> <span class="n">payload</span><span class="p">.</span><span class="n">texture</span><span class="o">-></span><span class="n">height</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">dU</span><span class="o">=</span><span class="n">kh</span> <span class="o">*</span> <span class="n">kn</span> <span class="o">*</span> <span class="p">(</span><span class="n">payload</span><span class="p">.</span><span class="n">texture</span><span class="o">-></span><span class="n">getColor</span><span class="p">(</span><span class="n">u</span><span class="o">+</span><span class="mf">1.0f</span><span class="o">/</span><span class="n">w</span><span class="p">,</span><span class="n">v</span><span class="p">).</span><span class="n">norm</span><span class="p">()</span><span class="o">-</span><span class="n">payload</span><span class="p">.</span><span class="n">texture</span><span class="o">-></span><span class="n">getColor</span><span class="p">(</span><span class="n">u</span><span class="p">,</span><span class="n">v</span><span class="p">).</span><span class="n">norm</span><span class="p">());</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="kt">float</span> <span class="n">dV</span><span class="o">=</span><span class="n">kh</span> <span class="o">*</span> <span class="n">kn</span> <span class="o">*</span> <span class="p">(</span><span class="n">payload</span><span class="p">.</span><span class="n">texture</span><span class="o">-></span><span class="n">getColor</span><span class="p">(</span><span class="n">u</span><span class="p">,</span><span class="n">v</span><span class="o">+</span><span class="mf">1.0f</span><span class="o">/</span><span class="n">h</span><span class="p">).</span><span class="n">norm</span><span class="p">()</span><span class="o">-</span><span class="n">payload</span><span class="p">.</span><span class="n">texture</span><span class="o">-></span><span class="n">getColor</span><span class="p">(</span><span class="n">u</span><span class="p">,</span><span class="n">v</span><span class="p">).</span><span class="n">norm</span><span class="p">());</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span> <span class="n">ln</span> <span class="o">=</span> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span><span class="p">(</span><span class="o">-</span><span class="n">dU</span><span class="p">,</span><span class="o">-</span><span class="n">dV</span><span class="p">,</span><span class="mf">1.0f</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">normal</span><span class="o">=</span><span class="n">TBN</span> <span class="o">*</span><span class="n">ln</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="c1">// Let n = normal = (x, y, z)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Vector t = (x*y/sqrt(x*x+z*z),sqrt(x*x+z*z),z*y/sqrt(x*x+z*z))
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Vector b = n cross product t
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Matrix TBN = [t b n]
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// dU = kh * kn * (h(u+1/w,v)-h(u,v))
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// dV = kh * kn * (h(u,v+1/h)-h(u,v))
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Vector ln = (-dU, -dV, 1)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Normal n = normalize(TBN * ln)
|
||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"> <span class="n">Eigen</span><span class="o">::</span><span class="n">Vector3f</span> <span class="n">result_color</span> <span class="o">=</span> <span class="p">{</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">};</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="n">result_color</span> <span class="o">=</span> <span class="n">normal</span><span class="p">;</span>
|
||
</span></span></code></pre></td></tr></table></div>
|
||
</div>
|
||
</div><h6 id="纹理贴图能够影响着色效果"><a href="#纹理贴图能够影响着色效果" class="anchor-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon anchor-icon"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a>纹理贴图能够影响着色效果</h6>
|
||
<p>Displacement mapping</p>
|
||
<ol>
|
||
<li>是Bump mapping的更进一步</li>
|
||
<li>与Bump mapping 使用相同纹理贴图</li>
|
||
<li>会改变模型顶点坐标</li>
|
||
</ol>
|
||
<p><img src="../../images/Displacement_mapping.png" alt=""></p>
|
||
<p>3D程序化噪声和实体建模</p>
|
||
<p><img src="../../images/Procedural_noise_and_Solid.png" alt=""></p>
|
||
<p>将部分着色效果提前绘制到贴图上</p>
|
||
<p><img src="../../images/Provide_precomputed_shading.png" alt=""></p>
|
||
<p>3D图像纹理和体绘制</p>
|
||
<p><img src="../../images/3D_texture_and_volume.png" alt=""></p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
<div class="updated-badge-container">
|
||
<span title="Updated @ 2023-06-18 21:19:01 CST" style="cursor:help">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="130" height="20" class="updated-badge"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="130" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path class="updated-badge-left" d="M0 0h55v20H0z"/><path class="updated-badge-right" d="M55 0h75v20H55z"/><path fill="url(#b)" d="M0 0h130v20H0z"/></g><g fill="#fff" text-anchor="middle" font-size="110"><text x="285" y="150" fill="#010101" fill-opacity=".3" textLength="450" transform="scale(.1)">updated</text><text x="285" y="140" textLength="450" transform="scale(.1)">updated</text><text x="915" y="150" fill="#010101" fill-opacity=".3" textLength="650" transform="scale(.1)">2023-06-18</text><text x="915" y="140" textLength="650" transform="scale(.1)">2023-06-18</text></g></svg>
|
||
</span></div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="post-nav">
|
||
|
||
<li class="post-nav-prev">
|
||
<a href="/computergraphic/%E5%87%A0%E4%BD%95geometry/" rel="prev">< 几何（geometry）</a>
|
||
</li>
|
||
|
||
|
||
<li class="post-nav-next">
|
||
<a href="/computergraphic/%E5%B8%B8%E7%94%A8%E5%85%89%E7%85%A7%E6%A8%A1%E5%9E%8B/" rel="next">常用光照模型 ></a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</main>
|
||
|
||
|
||
|
||
<div id="back-to-top" class="back-to-top">
|
||
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon arrow-up"><path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"/></svg></a>
|
||
</div>
|
||
|
||
|
||
|
||
<footer id="footer" class="footer">
|
||
<div class="footer-inner">
|
||
<div class="site-info">© 2022–2023 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon footer-icon"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg> InkSoul</div><div class="powered-by">Powered by <a href="https://github.com/gohugoio/hugo" target="_blank" rel="noopener">Hugo</a> | Theme is <a href="https://github.com/reuixiy/hugo-theme-meme" target="_blank" rel="noopener">MemE</a></div><div class="site-copyright"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener">CC BY-NC-SA 4.0</a></div><div class="custom-footer"><a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">闽ICP备2022009452号-1</a></div>
|
||
|
||
|
||
|
||
<ul class="socials"><li class="socials-item">
|
||
<a href="mailto:qingci30@163.com" target="_blank" rel="external noopener" title="Email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon social-icon"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg></a>
|
||
</li><li class="socials-item">
|
||
<a href="https://github.com/ink-soul" target="_blank" rel="external noopener" title="GitHub"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon social-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
|
||
</li><li class="socials-item">
|
||
<a href="http://gitea.inksoul.top/inksoul" target="_blank" rel="external noopener" title="gitea"><svg class="icon social-icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z" ></path></svg></a>
|
||
</li><li class="socials-item">
|
||
<a href="https://space.bilibili.com/262369930" target="_blank" rel="external noopener" title="bilibili"><svg class="icon social-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/></svg></a>
|
||
</li></ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
</div>
|
||
<script>
|
||
if ('serviceWorker' in navigator) {
|
||
window.addEventListener('load', function() {
|
||
navigator.serviceWorker.register('\/sw.js');
|
||
});
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.css" integrity="sha256-gPJfuwTULrEAAcI3X4bALVU/2qBU+QY/TpoD3GO+Exw=" crossorigin="anonymous">
|
||
|
||
<script>
|
||
if (typeof renderMathInElement === 'undefined') {
|
||
var getScript = (options) => {
|
||
var script = document.createElement('script');
|
||
script.defer = true;
|
||
script.crossOrigin = 'anonymous';
|
||
Object.keys(options).forEach((key) => {
|
||
script[key] = options[key];
|
||
});
|
||
document.body.appendChild(script);
|
||
};
|
||
getScript({
|
||
src: 'https:\/\/fastly.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.js',
|
||
integrity: 'sha256-YTW9cMncW/ZQMhY69KaUxIa2cPTxV87Uh627Gf5ODUw=',
|
||
onload: () => {
|
||
getScript({
|
||
src: 'https:\/\/fastly.jsdelivr.net/npm/katex@0.13.0/dist/contrib/mhchem.min.js',
|
||
integrity: 'sha256-yzSfYeVsWJ1x+2g8CYHsB/Mn7PcSp8122k5BM4T3Vxw=',
|
||
onload: () => {
|
||
getScript({
|
||
src: 'https:\/\/fastly.jsdelivr.net/npm/katex@0.13.0/dist/contrib/auto-render.min.js',
|
||
integrity: 'sha256-fxJzNV6hpc8tgW8tF0zVobKa71eTCRGTgxFXt1ZpJNM=',
|
||
onload: () => {
|
||
renderKaTex();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
renderKaTex();
|
||
}
|
||
function renderKaTex() {
|
||
renderMathInElement(
|
||
document.body,
|
||
{
|
||
delimiters: [
|
||
{left: "$$", right: "$$", display: true},
|
||
{left: "\\[", right: "\\]", display: true},
|
||
{left: "$", right: "$", display: false},
|
||
{left: "\\(", right: "\\)", display: false}
|
||
]
|
||
}
|
||
);
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script src="https://fastly.jsdelivr.net/npm/medium-zoom@latest/dist/medium-zoom.min.js"></script>
|
||
|
||
<script>
|
||
let imgNodes = document.querySelectorAll('div.post-body img');
|
||
imgNodes = Array.from(imgNodes).filter(node => node.parentNode.tagName !== "A");
|
||
|
||
mediumZoom(imgNodes, {
|
||
background: 'hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.95)'
|
||
})
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script src="https://fastly.jsdelivr.net/npm/instant.page@5.1.0/instantpage.min.js" type="module" defer></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|