.katex { display: block; text-align: center; white-space: nowrap; }
.katex-display > .katex > .katex-html { display: block; }
.katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; }
.katex { font: 1.21em/1.2 KaTeX_Main, "Times New Roman", serif; text-indent: 0px; text-rendering: auto; }
.katex * { }
.katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0px; border: 0px; height: 1px; width: 1px; overflow: hidden; }
.katex .katex-html { }
.katex .katex-html > .newline { display: block; }
.katex .base { position: relative; display: inline-block; white-space: nowrap; width: min-content; }
.katex .strut { display: inline-block; }
.katex .textbf { font-weight: bold; }
.katex .textit { font-style: italic; }
.katex .textrm { font-family: KaTeX_Main; }
.katex .textsf { font-family: KaTeX_SansSerif; }
.katex .texttt { font-family: KaTeX_Typewriter; }
.katex .mathit { font-family: KaTeX_Math; font-style: italic; }
.katex .mathrm { font-style: normal; }
.katex .mathbf { font-family: KaTeX_Main; font-weight: bold; }
.katex .boldsymbol { font-family: KaTeX_Math; font-weight: bold; font-style: italic; }
.katex .amsrm { font-family: KaTeX_AMS; }
.katex .mathbb, .katex .textbb { font-family: KaTeX_AMS; }
.katex .mathcal { font-family: KaTeX_Caligraphic; }
.katex .mathfrak, .katex .textfrak { font-family: KaTeX_Fraktur; }
.katex .mathtt { font-family: KaTeX_Typewriter; }
.katex .mathscr, .katex .textscr { font-family: KaTeX_Script; }
.katex .mathsf, .katex .textsf { font-family: KaTeX_SansSerif; }
.katex .mainit { font-family: KaTeX_Main; font-style: italic; }
.katex .mainrm { font-family: KaTeX_Main; font-style: normal; }
.katex .vlist-t { display: inline-table; table-layout: fixed; }
.katex .vlist-r { display: table-row; }
.katex .vlist { display: table-cell; vertical-align: bottom; position: relative; }
.katex .vlist > span { display: block; height: 0px; position: relative; }
.katex .vlist > span > span { display: inline-block; }
.katex .vlist > span > .pstrut { overflow: hidden; width: 0px; }
.katex .vlist-t2 { margin-right: -2px; }
.katex .vlist-s { display: table-cell; vertical-align: bottom; font-size: 1px; width: 2px; min-width: 2px; }
.katex .msupsub { text-align: left; }
.katex .mfrac > span > span { text-align: center; }
.katex .mfrac .frac-line { display: inline-block; width: 100%; border-bottom-style: solid; }
.katex .mspace { display: inline-block; }
.katex .llap, .katex .rlap, .katex .clap { width: 0px; position: relative; }
.katex .llap > .inner, .katex .rlap > .inner, .katex .clap > .inner { position: absolute; }
.katex .llap > .fix, .katex .rlap > .fix, .katex .clap > .fix { display: inline-block; }
.katex .llap > .inner { right: 0px; }
.katex .rlap > .inner, .katex .clap > .inner { left: 0px; }
.katex .clap > .inner > span { margin-left: -50%; margin-right: 50%; }
.katex .rule { display: inline-block; border: 0px solid; position: relative; }
.katex .overline .overline-line, .katex .underline .underline-line, .katex .hline { display: inline-block; width: 100%; border-bottom-style: solid; }
.katex .hdashline { display: inline-block; width: 100%; border-bottom-style: dashed; }
.katex .sqrt > .root { margin-left: 0.277778em; margin-right: -0.555556em; }
.katex .sizing, .katex .fontsize-ensurer { display: inline-block; }
.katex .sizing.reset-size1.size1, .katex .fontsize-ensurer.reset-size1.size1 { font-size: 1em; }
.katex .sizing.reset-size1.size2, .katex .fontsize-ensurer.reset-size1.size2 { font-size: 1.2em; }
.katex .sizing.reset-size1.size3, .katex .fontsize-ensurer.reset-size1.size3 { font-size: 1.4em; }
.katex .sizing.reset-size1.size4, .katex .fontsize-ensurer.reset-size1.size4 { font-size: 1.6em; }
.katex .sizing.reset-size1.size5, .katex .fontsize-ensurer.reset-size1.size5 { font-size: 1.8em; }
.katex .sizing.reset-size1.size6, .katex .fontsize-ensurer.reset-size1.size6 { font-size: 2em; }
.katex .sizing.reset-size1.size7, .katex .fontsize-ensurer.reset-size1.size7 { font-size: 2.4em; }
.katex .sizing.reset-size1.size8, .katex .fontsize-ensurer.reset-size1.size8 { font-size: 2.88em; }
.katex .sizing.reset-size1.size9, .katex .fontsize-ensurer.reset-size1.size9 { font-size: 3.456em; }
.katex .sizing.reset-size1.size10, .katex .fontsize-ensurer.reset-size1.size10 { font-size: 4.148em; }
.katex .sizing.reset-size1.size11, .katex .fontsize-ensurer.reset-size1.size11 { font-size: 4.976em; }
.katex .sizing.reset-size2.size1, .katex .fontsize-ensurer.reset-size2.size1 { font-size: 0.833333em; }
.katex .sizing.reset-size2.size2, .katex .fontsize-ensurer.reset-size2.size2 { font-size: 1em; }
.katex .sizing.reset-size2.size3, .katex .fontsize-ensurer.reset-size2.size3 { font-size: 1.16667em; }
.katex .sizing.reset-size2.size4, .katex .fontsize-ensurer.reset-size2.size4 { font-size: 1.33333em; }
.katex .sizing.reset-size2.size5, .katex .fontsize-ensurer.reset-size2.size5 { font-size: 1.5em; }
.katex .sizing.reset-size2.size6, .katex .fontsize-ensurer.reset-size2.size6 { font-size: 1.66667em; }
.katex .sizing.reset-size2.size7, .katex .fontsize-ensurer.reset-size2.size7 { font-size: 2em; }
.katex .sizing.reset-size2.size8, .katex .fontsize-ensurer.reset-size2.size8 { font-size: 2.4em; }
.katex .sizing.reset-size2.size9, .katex .fontsize-ensurer.reset-size2.size9 { font-size: 2.88em; }
.katex .sizing.reset-size2.size10, .katex .fontsize-ensurer.reset-size2.size10 { font-size: 3.45667em; }
.katex .sizing.reset-size2.size11, .katex .fontsize-ensurer.reset-size2.size11 { font-size: 4.14667em; }
.katex .sizing.reset-size3.size1, .katex .fontsize-ensurer.reset-size3.size1 { font-size: 0.714286em; }
.katex .sizing.reset-size3.size2, .katex .fontsize-ensurer.reset-size3.size2 { font-size: 0.857143em; }
.katex .sizing.reset-size3.size3, .katex .fontsize-ensurer.reset-size3.size3 { font-size: 1em; }
.katex .sizing.reset-size3.size4, .katex .fontsize-ensurer.reset-size3.size4 { font-size: 1.14286em; }
.katex .sizing.reset-size3.size5, .katex .fontsize-ensurer.reset-size3.size5 { font-size: 1.28571em; }
.katex .sizing.reset-size3.size6, .katex .fontsize-ensurer.reset-size3.size6 { font-size: 1.42857em; }
.katex .sizing.reset-size3.size7, .katex .fontsize-ensurer.reset-size3.size7 { font-size: 1.71429em; }
.katex .sizing.reset-size3.size8, .katex .fontsize-ensurer.reset-size3.size8 { font-size: 2.05714em; }
.katex .sizing.reset-size3.size9, .katex .fontsize-ensurer.reset-size3.size9 { font-size: 2.46857em; }
.katex .sizing.reset-size3.size10, .katex .fontsize-ensurer.reset-size3.size10 { font-size: 2.96286em; }
.katex .sizing.reset-size3.size11, .katex .fontsize-ensurer.reset-size3.size11 { font-size: 3.55429em; }
.katex .sizing.reset-size4.size1, .katex .fontsize-ensurer.reset-size4.size1 { font-size: 0.625em; }
.katex .sizing.reset-size4.size2, .katex .fontsize-ensurer.reset-size4.size2 { font-size: 0.75em; }
.katex .sizing.reset-size4.size3, .katex .fontsize-ensurer.reset-size4.size3 { font-size: 0.875em; }
.katex .sizing.reset-size4.size4, .katex .fontsize-ensurer.reset-size4.size4 { font-size: 1em; }
.katex .sizing.reset-size4.size5, .katex .fontsize-ensurer.reset-size4.size5 { font-size: 1.125em; }
.katex .sizing.reset-size4.size6, .katex .fontsize-ensurer.reset-size4.size6 { font-size: 1.25em; }
.katex .sizing.reset-size4.size7, .katex .fontsize-ensurer.reset-size4.size7 { font-size: 1.5em; }
.katex .sizing.reset-size4.size8, .katex .fontsize-ensurer.reset-size4.size8 { font-size: 1.8em; }
.katex .sizing.reset-size4.size9, .katex .fontsize-ensurer.reset-size4.size9 { font-size: 2.16em; }
.katex .sizing.reset-size4.size10, .katex .fontsize-ensurer.reset-size4.size10 { font-size: 2.5925em; }
.katex .sizing.reset-size4.size11, .katex .fontsize-ensurer.reset-size4.size11 { font-size: 3.11em; }
.katex .sizing.reset-size5.size1, .katex .fontsize-ensurer.reset-size5.size1 { font-size: 0.555556em; }
.katex .sizing.reset-size5.size2, .katex .fontsize-ensurer.reset-size5.size2 { font-size: 0.666667em; }
.katex .sizing.reset-size5.size3, .katex .fontsize-ensurer.reset-size5.size3 { font-size: 0.777778em; }
.katex .sizing.reset-size5.size4, .katex .fontsize-ensurer.reset-size5.size4 { font-size: 0.888889em; }
.katex .sizing.reset-size5.size5, .katex .fontsize-ensurer.reset-size5.size5 { font-size: 1em; }
.katex .sizing.reset-size5.size6, .katex .fontsize-ensurer.reset-size5.size6 { font-size: 1.11111em; }
.katex .sizing.reset-size5.size7, .katex .fontsize-ensurer.reset-size5.size7 { font-size: 1.33333em; }
.katex .sizing.reset-size5.size8, .katex .fontsize-ensurer.reset-size5.size8 { font-size: 1.6em; }
.katex .sizing.reset-size5.size9, .katex .fontsize-ensurer.reset-size5.size9 { font-size: 1.92em; }
.katex .sizing.reset-size5.size10, .katex .fontsize-ensurer.reset-size5.size10 { font-size: 2.30444em; }
.katex .sizing.reset-size5.size11, .katex .fontsize-ensurer.reset-size5.size11 { font-size: 2.76444em; }
.katex .sizing.reset-size6.size1, .katex .fontsize-ensurer.reset-size6.size1 { font-size: 0.5em; }
.katex .sizing.reset-size6.size2, .katex .fontsize-ensurer.reset-size6.size2 { font-size: 0.6em; }
.katex .sizing.reset-size6.size3, .katex .fontsize-ensurer.reset-size6.size3 { font-size: 0.7em; }
.katex .sizing.reset-size6.size4, .katex .fontsize-ensurer.reset-size6.size4 { font-size: 0.8em; }
.katex .sizing.reset-size6.size5, .katex .fontsize-ensurer.reset-size6.size5 { font-size: 0.9em; }
.katex .sizing.reset-size6.size6, .katex .fontsize-ensurer.reset-size6.size6 { font-size: 1em; }
.katex .sizing.reset-size6.size7, .katex .fontsize-ensurer.reset-size6.size7 { font-size: 1.2em; }
.katex .sizing.reset-size6.size8, .katex .fontsize-ensurer.reset-size6.size8 { font-size: 1.44em; }
.katex .sizing.reset-size6.size9, .katex .fontsize-ensurer.reset-size6.size9 { font-size: 1.728em; }
.katex .sizing.reset-size6.size10, .katex .fontsize-ensurer.reset-size6.size10 { font-size: 2.074em; }
.katex .sizing.reset-size6.size11, .katex .fontsize-ensurer.reset-size6.size11 { font-size: 2.488em; }
.katex .sizing.reset-size7.size1, .katex .fontsize-ensurer.reset-size7.size1 { font-size: 0.416667em; }
.katex .sizing.reset-size7.size2, .katex .fontsize-ensurer.reset-size7.size2 { font-size: 0.5em; }
.katex .sizing.reset-size7.size3, .katex .fontsize-ensurer.reset-size7.size3 { font-size: 0.583333em; }
.katex .sizing.reset-size7.size4, .katex .fontsize-ensurer.reset-size7.size4 { font-size: 0.666667em; }
.katex .sizing.reset-size7.size5, .katex .fontsize-ensurer.reset-size7.size5 { font-size: 0.75em; }
.katex .sizing.reset-size7.size6, .katex .fontsize-ensurer.reset-size7.size6 { font-size: 0.833333em; }
.katex .sizing.reset-size7.size7, .katex .fontsize-ensurer.reset-size7.size7 { font-size: 1em; }
.katex .sizing.reset-size7.size8, .katex .fontsize-ensurer.reset-size7.size8 { font-size: 1.2em; }
.katex .sizing.reset-size7.size9, .katex .fontsize-ensurer.reset-size7.size9 { font-size: 1.44em; }
.katex .sizing.reset-size7.size10, .katex .fontsize-ensurer.reset-size7.size10 { font-size: 1.72833em; }
.katex .sizing.reset-size7.size11, .katex .fontsize-ensurer.reset-size7.size11 { font-size: 2.07333em; }
.katex .sizing.reset-size8.size1, .katex .fontsize-ensurer.reset-size8.size1 { font-size: 0.347222em; }
.katex .sizing.reset-size8.size2, .katex .fontsize-ensurer.reset-size8.size2 { font-size: 0.416667em; }
.katex .sizing.reset-size8.size3, .katex .fontsize-ensurer.reset-size8.size3 { font-size: 0.486111em; }
.katex .sizing.reset-size8.size4, .katex .fontsize-ensurer.reset-size8.size4 { font-size: 0.555556em; }
.katex .sizing.reset-size8.size5, .katex .fontsize-ensurer.reset-size8.size5 { font-size: 0.625em; }
.katex .sizing.reset-size8.size6, .katex .fontsize-ensurer.reset-size8.size6 { font-size: 0.694444em; }
.katex .sizing.reset-size8.size7, .katex .fontsize-ensurer.reset-size8.size7 { font-size: 0.833333em; }
.katex .sizing.reset-size8.size8, .katex .fontsize-ensurer.reset-size8.size8 { font-size: 1em; }
.katex .sizing.reset-size8.size9, .katex .fontsize-ensurer.reset-size8.size9 { font-size: 1.2em; }
.katex .sizing.reset-size8.size10, .katex .fontsize-ensurer.reset-size8.size10 { font-size: 1.44028em; }
.katex .sizing.reset-size8.size11, .katex .fontsize-ensurer.reset-size8.size11 { font-size: 1.72778em; }
.katex .sizing.reset-size9.size1, .katex .fontsize-ensurer.reset-size9.size1 { font-size: 0.289352em; }
.katex .sizing.reset-size9.size2, .katex .fontsize-ensurer.reset-size9.size2 { font-size: 0.347222em; }
.katex .sizing.reset-size9.size3, .katex .fontsize-ensurer.reset-size9.size3 { font-size: 0.405093em; }
.katex .sizing.reset-size9.size4, .katex .fontsize-ensurer.reset-size9.size4 { font-size: 0.462963em; }
.katex .sizing.reset-size9.size5, .katex .fontsize-ensurer.reset-size9.size5 { font-size: 0.520833em; }
.katex .sizing.reset-size9.size6, .katex .fontsize-ensurer.reset-size9.size6 { font-size: 0.578704em; }
.katex .sizing.reset-size9.size7, .katex .fontsize-ensurer.reset-size9.size7 { font-size: 0.694444em; }
.katex .sizing.reset-size9.size8, .katex .fontsize-ensurer.reset-size9.size8 { font-size: 0.833333em; }
.katex .sizing.reset-size9.size9, .katex .fontsize-ensurer.reset-size9.size9 { font-size: 1em; }
.katex .sizing.reset-size9.size10, .katex .fontsize-ensurer.reset-size9.size10 { font-size: 1.20023em; }
.katex .sizing.reset-size9.size11, .katex .fontsize-ensurer.reset-size9.size11 { font-size: 1.43981em; }
.katex .sizing.reset-size10.size1, .katex .fontsize-ensurer.reset-size10.size1 { font-size: 0.24108em; }
.katex .sizing.reset-size10.size2, .katex .fontsize-ensurer.reset-size10.size2 { font-size: 0.289296em; }
.katex .sizing.reset-size10.size3, .katex .fontsize-ensurer.reset-size10.size3 { font-size: 0.337512em; }
.katex .sizing.reset-size10.size4, .katex .fontsize-ensurer.reset-size10.size4 { font-size: 0.385728em; }
.katex .sizing.reset-size10.size5, .katex .fontsize-ensurer.reset-size10.size5 { font-size: 0.433944em; }
.katex .sizing.reset-size10.size6, .katex .fontsize-ensurer.reset-size10.size6 { font-size: 0.48216em; }
.katex .sizing.reset-size10.size7, .katex .fontsize-ensurer.reset-size10.size7 { font-size: 0.578592em; }
.katex .sizing.reset-size10.size8, .katex .fontsize-ensurer.reset-size10.size8 { font-size: 0.694311em; }
.katex .sizing.reset-size10.size9, .katex .fontsize-ensurer.reset-size10.size9 { font-size: 0.833173em; }
.katex .sizing.reset-size10.size10, .katex .fontsize-ensurer.reset-size10.size10 { font-size: 1em; }
.katex .sizing.reset-size10.size11, .katex .fontsize-ensurer.reset-size10.size11 { font-size: 1.19961em; }
.katex .sizing.reset-size11.size1, .katex .fontsize-ensurer.reset-size11.size1 { font-size: 0.200965em; }
.katex .sizing.reset-size11.size2, .katex .fontsize-ensurer.reset-size11.size2 { font-size: 0.241158em; }
.katex .sizing.reset-size11.size3, .katex .fontsize-ensurer.reset-size11.size3 { font-size: 0.28135em; }
.katex .sizing.reset-size11.size4, .katex .fontsize-ensurer.reset-size11.size4 { font-size: 0.321543em; }
.katex .sizing.reset-size11.size5, .katex .fontsize-ensurer.reset-size11.size5 { font-size: 0.361736em; }
.katex .sizing.reset-size11.size6, .katex .fontsize-ensurer.reset-size11.size6 { font-size: 0.401929em; }
.katex .sizing.reset-size11.size7, .katex .fontsize-ensurer.reset-size11.size7 { font-size: 0.482315em; }
.katex .sizing.reset-size11.size8, .katex .fontsize-ensurer.reset-size11.size8 { font-size: 0.578778em; }
.katex .sizing.reset-size11.size9, .katex .fontsize-ensurer.reset-size11.size9 { font-size: 0.694534em; }
.katex .sizing.reset-size11.size10, .katex .fontsize-ensurer.reset-size11.size10 { font-size: 0.833601em; }
.katex .sizing.reset-size11.size11, .katex .fontsize-ensurer.reset-size11.size11 { font-size: 1em; }
.katex .delimsizing.size1 { font-family: KaTeX_Size1; }
.katex .delimsizing.size2 { font-family: KaTeX_Size2; }
.katex .delimsizing.size3 { font-family: KaTeX_Size3; }
.katex .delimsizing.size4 { font-family: KaTeX_Size4; }
.katex .delimsizing.mult .delim-size1 > span { font-family: KaTeX_Size1; }
.katex .delimsizing.mult .delim-size4 > span { font-family: KaTeX_Size4; }
.katex .nulldelimiter { display: inline-block; width: 0.12em; }
.katex .delimcenter { position: relative; }
.katex .op-symbol { position: relative; }
.katex .op-symbol.small-op { font-family: KaTeX_Size1; }
.katex .op-symbol.large-op { font-family: KaTeX_Size2; }
.katex .op-limits > .vlist-t { text-align: center; }
.katex .accent > .vlist-t { text-align: center; }
.katex .accent .accent-body:not(.accent-full) { width: 0px; }
.katex .accent .accent-body { position: relative; }
.katex .overlay { display: block; }
.katex .mtable .vertical-separator { display: inline-block; margin: 0px -0.025em; border-right: 0.05em solid; }
.katex .mtable .vs-dashed { border-right: 0.05em dashed; }
.katex .mtable .arraycolsep { display: inline-block; }
.katex .mtable .col-align-c > .vlist-t { text-align: center; }
.katex .mtable .col-align-l > .vlist-t { text-align: left; }
.katex .mtable .col-align-r > .vlist-t { text-align: right; }
.katex .svg-align { text-align: left; }
.katex svg, .screenShotTempCanvas { display: block; position: absolute; width: 100%; height: inherit; fill: currentcolor; stroke: currentcolor; fill-rule: nonzero; fill-opacity: 1; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1; }
.katex svg path { stroke: none; }
.katex .stretchy { width: 100%; display: block; position: relative; overflow: hidden; }
.katex .stretchy::before, .katex .stretchy::after { content: ""; }
.katex .hide-tail { width: 100%; position: relative; overflow: hidden; }
.katex .halfarrow-left { position: absolute; left: 0px; width: 50.2%; overflow: hidden; }
.katex .halfarrow-right { position: absolute; right: 0px; width: 50.2%; overflow: hidden; }
.katex .brace-left { position: absolute; left: 0px; width: 25.1%; overflow: hidden; }
.katex .brace-center { position: absolute; left: 25%; width: 50%; overflow: hidden; }
.katex .brace-right { position: absolute; right: 0px; width: 25.1%; overflow: hidden; }
.katex .x-arrow-pad { padding: 0px 0.5em; }
.katex .x-arrow, .katex .mover, .katex .munder { text-align: center; }
.katex .boxpad { padding: 0px 0.3em; }
.katex .fbox { box-sizing: border-box; border: 0.04em solid black; }
.katex .fcolorbox { box-sizing: border-box; border: 0.04em solid; }
.katex .cancel-pad { padding: 0px 0.2em; }
.katex .cancel-lap { margin-left: -0.2em; margin-right: -0.2em; }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em; }
.output_wrapper pre code { display: -webkit-box !important; }
.output_wrapper .hljs{color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 0.5em;}
.output_wrapper .hljs-params{color: rgb(255, 152, 35);}
.output_wrapper .hljs-number,.output_wrapper .hljs-literal,.output_wrapper .hljs-symbol,.output_wrapper .hljs-bullet{color: rgb(174, 135, 250);}
.output_wrapper .hljs-function,.output_wrapper .hljs-built_in,.output_wrapper .hljs-name,.output_wrapper .hljs-keyword,.output_wrapper .hljs-selector-tag,.output_wrapper .hljs-deletion{color: rgb(248, 35, 117);}
.output_wrapper .hljs-variable,.output_wrapper .hljs-template-variable,.output_wrapper .hljs-link{color: rgb(98, 151, 85);}
.output_wrapper .hljs-comment,.output_wrapper .hljs-quote{color: rgb(128, 128, 128);}
.output_wrapper .hljs-meta{color: rgb(91, 218, 237);}
.output_wrapper .hljs-string,.output_wrapper .hljs-attribute,.output_wrapper .hljs-addition{color: rgb(238, 220, 112);}
.output_wrapper .hljs-attr,.output_wrapper .hljs-section,.output_wrapper .hljs-title,.output_wrapper .hljs-type{color: rgb(165, 218, 45);}
.output_wrapper .hljs-selector-class{color: rgb(165, 218, 45);}
.output_wrapper .hljs-emphasis{font-style: italic;}
.output_wrapper .hljs-strong{font-weight: bold;}
.output_wrapper pre code {line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}
.output_wrapper{font-size: 16px; color: rgb(62, 62, 62); line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;}
.output_wrapper *{font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;}
.output_wrapper p{margin: 1.5em 0px;}
.output_wrapper h1,.output_wrapper h2,.output_wrapper h3,.output_wrapper h4,.output_wrapper h5,.output_wrapper h6{margin: 1.5em 0px; font-weight: bold;}
.output_wrapper h1{font-size: 1.6em;}
.output_wrapper h2{font-size: 1.4em;}
.output_wrapper h3{font-size: 1.3em;}
.output_wrapper h4{font-size: 1.2em;}
.output_wrapper h5{font-size: 1em;}
.output_wrapper h6{font-size: 1em;}
.output_wrapper ul,.output_wrapper ol{padding-left: 32px;}
.output_wrapper ul{list-style-type: disc;}
.output_wrapper ol{list-style-type: decimal;}
.output_wrapper li *{}
.output_wrapper li{margin-bottom: 0.5em;}
.output_wrapper .code_size_default{line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}
.output_wrapper .code_size_tight{line-height: 15px; font-size: 11px; font-weight: normal; word-spacing: -3px; letter-spacing: 0px;}
.output_wrapper pre code{font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px;}
.output_wrapper blockquote{display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(129, 145, 152); border-left: 6px solid rgb(220, 230, 240); background: rgb(242, 247, 251); overflow: auto; overflow-wrap: normal; word-break: normal;}
.output_wrapper blockquote p{margin: 0px;}
.output_wrapper a{text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;}
.output_wrapper strong{font-weight: bold;}
.output_wrapper em{font-style: italic;}
.output_wrapper del{font-style: italic;}
.output_wrapper strong em{font-weight: bold;}
.output_wrapper hr{height: 1px; margin: 1.5rem 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px dashed rgb(165, 165, 165);}
.output_wrapper code{overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(233, 105, 0); background: rgb(248, 248, 248);}
.output_wrapper img{display: block; margin: 0px auto; max-width: 100%;}
.output_wrapper figcaption{margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;}
.output_wrapper table{display: table; width: 100%; text-align: left;}
.output_wrapper tbody{border: 0px;}
.output_wrapper table tr{border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: white;}
.output_wrapper table tr th,.output_wrapper table tr td{font-size: 1em; border: 1px solid rgb(204, 204, 204); padding: 0.5em 1em; text-align: left;}
.output_wrapper table tr th{font-weight: bold; background-color: rgb(240, 240, 240);}
.output_wrapper .katex-display{font-size: 1.22em;}
.output_wrapper .katex{padding: 8px 3px;}
.output_wrapper .katex-display > .katex{display: inline-block; text-align: center; padding: 3px;}
.output_wrapper .katex img{display: inline-block; vertical-align: middle;}
.output_wrapper a[href^="#"] sup{vertical-align: super; margin: 0px 2px; padding: 1px 3px; color: rgb(255, 255, 255); background: rgb(102, 102, 102); font-size: 0.7em;}
.output_wrapper .task-list-list{list-style-type: none;}
.output_wrapper .task-list-list.checked{color: rgb(62, 62, 62);}
.output_wrapper .task-list-list.uncheck{color: rgb(191, 193, 191);}
.output_wrapper .task-list-list .icon_uncheck,.output_wrapper .task-list-list .icon_check{display: inline-block; vertical-align: middle; margin-right: 10px;}
.output_wrapper .task-list-list .icon_check::before{content: "√"; border: 2px solid rgb(62, 62, 62); color: red;}
.output_wrapper .task-list-list .icon_uncheck::before{content: "x"; border: 2px solid rgb(191, 193, 191); color: rgb(191, 193, 191);}
.output_wrapper .task-list-list .icon_check::before,.output_wrapper .task-list-list .icon_uncheck::before{padding: 2px 8px 2px 5px; border-radius: 5px;}
.output_wrapper .toc{margin-left: 25px;}
.output_wrapper .toc_item{display: block;}
.output_wrapper .toc_left{margin-left: 25px;}
.output_wrapper pre code{border-radius: 3px; border-width: 1px 1px 1px 6px; border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(33, 152, 99);}
.output_wrapper pre code .linenum{padding-right: 20px; word-spacing: 0px;}
.output_wrapper .hljs{color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 0.5em;}
.output_wrapper .hljs-params{color: rgb(255, 152, 35);}
.output_wrapper .hljs-number,.output_wrapper .hljs-literal,.output_wrapper .hljs-symbol,.output_wrapper .hljs-bullet{color: rgb(174, 135, 250);}
.output_wrapper .hljs-function,.output_wrapper .hljs-built_in,.output_wrapper .hljs-name,.output_wrapper .hljs-keyword,.output_wrapper .hljs-selector-tag,.output_wrapper .hljs-deletion{color: rgb(248, 35, 117);}
.output_wrapper .hljs-variable,.output_wrapper .hljs-template-variable,.output_wrapper .hljs-link{color: rgb(98, 151, 85);}
.output_wrapper .hljs-comment,.output_wrapper .hljs-quote{color: rgb(128, 128, 128);}
.output_wrapper .hljs-meta{color: rgb(91, 218, 237);}
.output_wrapper .hljs-string,.output_wrapper .hljs-attribute,.output_wrapper .hljs-addition{color: rgb(238, 220, 112);}
.output_wrapper .hljs-attr,.output_wrapper .hljs-section,.output_wrapper .hljs-title,.output_wrapper .hljs-type{color: rgb(165, 218, 45);}
.output_wrapper .hljs-selector-class{color: rgb(165, 218, 45);}
.output_wrapper .hljs-emphasis{font-style: italic;}
.output_wrapper .hljs-strong{font-weight: bold;}
.output_wrapper p{margin: 1.5em 0px;}
.output_wrapper h1,.output_wrapper h2,.output_wrapper h3,.output_wrapper h4,.output_wrapper h5,.output_wrapper h6{margin: 1.5em 0px; font-weight: bold;}
.output_wrapper h1{font-size: 1.6em;}
.output_wrapper h2{font-size: 1.4em;}
.output_wrapper h3{font-size: 1.3em;}
.output_wrapper h4{font-size: 1.2em;}
.output_wrapper h5{font-size: 1em;}
.output_wrapper h6{font-size: 1em;}
.output_wrapper h3{border-bottom: 2px solid rgb(62, 62, 62); margin-bottom: 50px;}
.output_wrapper h3 span{display: inline-block; padding: 10px 0px;}
.output_wrapper h3 span::first-letter,.output_wrapper h3 .firstletter{color: rgb(255, 255, 255); padding: 10px 15px; margin-right: 20px; background: rgb(62, 62, 62);}
-->
原文：Unreal Engine 4 Materials Tutorial
作者：Tommy Tran
译者：Shuchang Liu
通过这篇教程，你将学会如何在材质编辑器里修改贴图，创建材质实例，以及在游戏中修改更新材质实例。
一如现实世界，游戏世界也有各种各样的物体，各自拥有独特的外观。在Unreal引擎里，材质决定了物体的外观。物体的颜色？它的光泽度？是否透明？一切都定义在材质里。
在Unreal引擎中，材质被应用在基本所有可视元素里。你可以对网格、粒子、UI元素应用材质。
在本篇教程里，你将学会：
- 操作材质修改亮度和颜色
- 使用材质实例来快速生成变体
- 使用动态材质实例来在游戏收集道具过程中修改模型的颜色
在本篇教程里，你会接触到材质和蓝图编辑器。如果你还不是很熟悉，请阅读入门教程和蓝图教程教程。
注意：本篇教程只是Unreal Engine 4系列教程的其中一篇：
起步入门
下载示例项目并解压。进入项目文件夹，双击BananaCollector.uproject打开项目。
注意：如果你看到了项目是由较早的引擎版本创建的提示，这很正常（因为引擎经常更新版本）。你可以选择以拷贝副本的形式打开，也可以直接转换项目版本打开。
我们可以看到有块铺满香蕉的区域。按下Play，使用W，A，S和D键控制红色方块。你可以通过移动方块方块香蕉。
首先，我们需要修改香蕉材质来改变其亮度。Content Browser进入Materials文件夹双击M_Banana，打开材质编辑器。
为了调整香蕉的亮度，我们需要修改贴图。
修改贴图
贴图本质就是一张图片，而图片是像素点的集合。一张彩色图片，它的像素点颜色是由红（R），绿（G）和蓝（B）三个通道值所确定的。
下面是一张2x2像素的图片，每个像素点的RGB值如文本所示。
注意：在Unreal引擎中，RGB各通道值的范围为0.0～1.0。然而，在很多其他应用中，RGB各通道值为0～255。这仅仅是两种不同的表示方式，并不代表Unreal引擎的颜色范围更小。
我们可以通过对贴图的每个像素值做数值操作从而修改贴图。这种操作可以是简单的增加每个像素点通道值。
下面的例子是将各通道值的范围调整成0.4～1.0。这样各通道的最小值不小于0.4，就使得图片看起来更亮了。
我们可以如下图一样在材质编辑器完成上述操作：
接着，我们会使用Multiply（乘法）节点来调整贴图的亮度。
Multiply节点
顾名思义，Multiply节点对两个数值输入做乘法操作。
使用乘法，我们可以在不影响色相和饱和度情况下，改变像素亮度。下面的例子里，通过对每个像素点通道值乘以0.5，将图片的亮度减半。
通过给每个像素做上述操作，就可以改变整个贴图的亮度。
虽然下面所说并非教程重点，但我们也可以通过使用Multiply节点连接一张遮罩贴图。使用了遮罩贴图，原贴图的某些区域看起来就会更暗了。下面是使用瓷砖纹理来遮罩石头纹理的例子：
其遮罩原理是像素点的灰度范围在0（黑色）到1（白色）之间。
白色像素区域的原图亮度最高，因为其像素点通道值乘以了1，灰色区域的亮度暗淡些，因为通道值乘以了小于1的数值，黑色区域完全无亮度，因为通道值乘以了0。
现在，让我们试试Multiply节点吧。
调整贴图亮度
首先我们需要去掉Texture Sample和Base Color引脚之间的连线。我们可以通过右键点击引脚或者连线去掉连接。同样的，按住Alt键，鼠标左键点击连线也可去掉连接。
接着创建Multiply和Constant节点。你可以通过长按M键（Multiply节点）或者1键（Constant节点）并左键点击空白区域，快捷创建对应节点。随后如下图一样连线：
这样贴图的每个像素值都会与Constant节点值相乘。最后，将修改后的贴图作为Base Color输出。
现在，贴图看起来应该是黑色的，因为乘数为0（Multiply节点默认值为0）。为了修改乘数，选中Constant节点，在Details面板将Value改为5。
点击Apply并返回主编辑器。可以看到香蕉颜色变得更亮了。
我们还可以通过添加一些不同颜色的香蕉来丰富画面效果。虽然我们可以新增不同颜色的材质，创建材质实例是一种更为简便的方法。
关于材质实例
材质实例是材质的一种副本。对于原材质的任何修改都会在连带影响材质实例。
材质实例的好处在于不用重新编译而使得修改生效。你可能注意到了，每次我们修改了材质并点击Apply按钮，面板都会提示shader编译信息。
通常来说这个过程只会持续数秒时间。然而，随着材质变得复杂，编译时间会急剧增加。
下面两种场景很适合使用材质实例：
- 材质非常复杂，而且你希望可以快速进行修改
- 希望根据原材质创建材质变体，比如希望修改颜色，亮度甚至贴图。
以下场景所有物体都使用了材质实例来修改显示颜色，其实这些实例都共用了同一个材质。
在使用材质实例前，你需要为原材质创建参数。这样材质实例才会显示同样的参数，使得我们可以调整材质的参数。
创建材质参数
回到主编辑器，并确保仍然处于编辑M_Banana材质的状态。
首先，我们需要一个节点来修改贴图的色相。HueShift节点就可以胜任。添加节点，并如下图进行连线：
- 按住Alt键并左键点击连线断开Multiply节点与M_Banana节点的连接。
- 右键点击 Blueprint面板，搜索HueShift节点并选中。
- 如上图所示进行连线。
接着，我们需要创建Scalar Parameter节点。这个节点有一个可编辑的字段值。我们可以通过按住S键并左键点击空白区域快速创建，然后连接HueShift节点的Hue Shift Percentage(S)引脚。
这里我们最好重新命名这个参数。选择Scalar Parameter节点，并在Details面板将变量名改为HueShiftPercentage。
我们也可以将Constant节点转换为Scalar Parameters节点。右键点击刚才创建的Constant节点，选择Convert to Parameter选项，然后将变量名改为Brightness。
现在材质参数就算设置好了。点击Apply并关闭材质编辑器。
接着，我们要创建一个材质实例。
创建材质实例
将Content Browser切换到Materials文件夹。右键点击M_Banana，并在弹出菜单中选择Create Material Instance。将新资源重命名为MI_Banana_Green。
双击MI_Banana_Green打开材质实例编辑器。
编辑器由三个主要面板组成：
- Details：展示设置参数及其他通用参数。
- Instance Parents：展示当前实例的父类材质列表。在这个例子里，父类只有M_Banana。
- Viewport：展示当前材质实例的预览球形网格。通过长按左键移动鼠标旋转预览网格，滑动滚轮缩放界面。
为了改成预览香蕉网格，可以在Details面板的Previewing部分，左键点击Preview Mesh下拉框，选择SM_Banana。现在就可以看到预览网格变成了香蕉。
接着，我们需要编辑参数将香蕉颜色改成绿色。为了编辑参数，要先勾选每个参数的勾选框。
将Brightness改为0.5，HueShiftPercentage改为0.2。你会看到如下图的效果：
现在你已经创建好了材质实例，是时候应用在游戏的香蕉上了。关闭材质实例编辑器，回到主编辑器。
应用材质实例
我们可以单独编辑放入场景的每个角色。意思是我们可以修改一个香蕉的材质而不影响其他香蕉。我们可以通过这点将某些香蕉改成绿色的。
选择任意香蕉并在Details面板的组件列表中选中StaticMesh组件。
Details面板会显示出StaticMesh组件的参数，将材质参数改成MI_Banana_Green。
重复如上操作，让场景不同颜色的香蕉分布得更加随机。看你能不能自己创建一个材质实例来制作一些紫色的香蕉吧！
动态变化材质
材质的作用也不仅限于美化画面；我们也可以利用材质来做一些游戏设计。接着，你会学习如何利用材质，伴随方块收集了越来越多的香蕉，动态地将方块颜色由白改成红色。
在我们创建材质实例前，我们需要先设置好方块的材质。
在Materials文件夹双击M_Cube打开材质编辑器。
首先需要创建颜色。你能看到Constant3Vector节点连接了Base Color引脚。这个节点非常适合用于设置颜色，因为它有RGB通道。
既然已经有了红色，那还需要创建白色。我们通过按住数字键3，左键点击空白处快捷创建Constant3Vector节点。
通过双击Constant3Vector节点打开Color picker。
通过滑动条或者在R，G，B通道输入1.0将颜色设为白色，然后点击OK按钮。
为了平滑地将颜色从白色改为红色，最简便的方法就是使用线性插值。
什么是线性插值？
线性插值是一种获得[A，B]范围内某个数值的方法。比如，我们可以通过线性插值查找100和200之间的中间值。
通过控制Alpha值，线性插值的作用就显现出来了。你可以将Alpha当成A到B点的百分比。Alpha为0时返回A，Alpha为1时返回B。
比如，你可以随时间增加Alpha，来将一个物体从A点移动到B点。
在本篇教程中，你将通过收集香蕉数量来逐步增加透明度。
使用LinearInterpolate节点
首先，通过长按L键左键点击空白处快捷添加LinearInterpolate节点。
接着，创建Scalar Parameter节点并将其命名为ColorAlpha。随后如下图进行连线：
小结：LinearInterpolate节点会输出A值。因为Alpha值为0。Alpha值越接近1，输出越接近B值。
材质现已制作好了。后续还有很多东西需要做，但我们可以看看现在的进度，点击Apply并关闭材质编辑器。如果你点击Play，应该可以看到方块现在是白色而不是红色的。
为了让方块改变颜色，你需要编辑ColorAlpha参数。然而还有一个问题，你不能在游戏运行中修改材质实例参数。解决方案是使用动态材质实例。
关于动态材质实例
不同于其他实例，你可以在游戏中通过蓝图或C++编辑动态材质实例。
你可以使用动态实例实现很多功能，比如一点点修改物体不透明度直至完全不可见。或者，你可以在物体沾湿时增加物体高光。
还有一个好处是使用动态材质实例，意味着你可以单独修改每个物体。
下面例子是使用动态修改每个材质实例，实现了物体渐隐。
创建动态材质实例
你只能在游戏中通过蓝图或C++创建动态材质实例。
Content Browser窗口双击进入Blueprints文件夹，双击BP_Player打开蓝图编辑器。
首先要做的就是创建动态材质实例，并将其应用在方块上。在Unreal生成角色的时机，也就是Event BeginPlay节点触发时，做这件事比较合适。
确保在Event Graph上添加了Event BeginPlay节点。
现在，添加 Create Dynamic Material Instance (StaticMesh)节点。这个节点会同步创建并给方块应用动态材质实例。
接着，你需要指定方块应用哪个材质。点击Source Material下拉框选择M_Cube。
为了方便后续引用材质，最好用变量表示这个材质。最简单的方法是在节点的Return Value引脚右键点击，随后点击弹出菜单的Promote to Variable。
观察My Blueprint页签，可以看到出现了新变量。按下F2键将其快捷重命名为CubeMaterial。
最后，连接Event BeginPlay与Create Dynamic Material Instance节点。
小结：一旦Unreal生成BP_Player，就会创建动态材质实例并将其应用到StaticMesh组件上，该实例会储存成变量CubeMaterial。
下一步就该创建计数器用于统计香蕉收集数量了。
创建香蕉计数器
如果把面板往下拖，你能看到如下的节点连接。我们会利用这部分节点来更新香蕉计数器和材质。
On Component Begin Overlap节点会在方块接触其他角色时触发执行。接着，Cast to BP_Banana节点会检查触碰角色是不是香蕉，如果是，则DestroyActor节点会将其销毁并移出游戏。
现在我们要做的第一件事是创建变量存储已搜集香蕉数量。随后我们要在每次方块触碰香蕉时累加该变量。
创建Float变量并将其命名为BananaCounter。将变量拖拽至Event Graph并从弹出菜单中选择Get。
为了让计数器每次自增加一，添加IncrementFloat节点，然后连接BananaCounter节点。
接着，连接DestroyActor节点与IncrementFloat节点。
现在，玩家每收集一个香蕉，BananaCounter变量就会自增加一。
如果你直接使用BananaCounter作为alpha值使用，并不会得到预期结果。因为LinearInterpolation节点的alpha值范围是[0,1]。你可以通过归一化将计数转化为[0,1]之间的值。
我们使用BananaCounter节点值除以一个预设值来进行归一化。这个预设值代表着需要收集多少根香蕉才能让方块彻底变红色。
添加float / float节点并将其左上角引脚与IncrementFloat节点相连。
将float / float节点的底部值设置为6。这意味着玩家需要收集6根香蕉让方块彻底变红色。
这里还有个小问题。当玩家收集了超过6根香蕉，alpha值会超过1，为了修正这点，再使用Clamp (float)节点将输出范围限制在[0,1]。
现在，有了alpha值，是时候用它来更新材质了。
更新材质
将CubeMaterial变量拖拽至Event Graph，从弹出菜单中选中Get。
接着，拖拽CubeMaterial变量引脚到空白处，会弹出该变量类型的可用节点列表菜单。选中任意节点后，该节点都会自动连上变量节点。我们添加Set Scalar Parameter Value节点，该节点用于给参数设值。
现在，你需要指明更新的参数。将Parameter Name字段改为ColorAlpha。这个就是方块材质所用的参数名。
连接Clamp (float)节点的返回值与Set Scalar Parameter Value node节点的Value引脚。
最后，连接IncrementFloat节点与Set Scalar Parameter Value node节点。
以下是蓝图执行的顺序：
- On Component Begin Overlap (StaticMesh)：当方块与其他角色触碰时触发执行
- Cast to BP_Banana：检查触碰角色是否为香蕉
-
DestroyActor：如果触发到了香蕉，销毁移除香蕉
4.IncrementFloat：BananaCounter变量自增加一
5.float / float：计数器除以特定数值进行归一化
6.Clamp(float)：限制上一步的输出值不大于1
7.Set Scalar Parameter Value：将上一步的输出值作为方块材质的ColorAlpha参数值。
至此大功告成，一起来检验成果吧！点击Compile并关闭蓝图编辑器。
点击Play并开始收集香蕉。方块一开始是白色的，随着收集了越来越多的香蕉，方块变得越来越红。一旦收集了超过6根香蕉，它就会彻底变红。
后续学习
你可以在这里下载完整项目。
我喜欢材质，因为它们威力强大，能做很多事情。你可以通过搭配不同材质创建更复杂的材质效果，比如缝隙中覆盖着藓苔的石头。你也可以实现像教程动图里所展现的炫酷的溶解效果。
如果你希望学习更多关于材质的内容，推荐你阅读Unreal引擎文档关于材质输入部分内容。学习了解这些，有助于你创建一些更高级的材质。
我建议你多尝试用不同的节点（还有很多其他节点）实验各种效果。毕竟实践出真知 :)
如果你还想继续学习引擎其他内容，点击下篇教程，将讲解如何在游戏中使用文本，按钮等UI元素。