Update index.html

index.html

@@ -9,7 +9,7 @@
     <div class="bodyobj">
     <header>
         <br>
-        <h2>Three.js 를 활용한 Custom Color Blending제작</h2>
+        <h2>Three.js 를 활용한 Custom Color Blending</h2>
         <br>
         <h3>201820721 이성학(Seonghak Lee)</h3>
     </header>
@@ -23,13 +23,12 @@
     <h2>- Blending Equation</h2>
     <p>기본적인 Blending Equation은 다음과 같습니다</p>
     <br>
-    <p>AddEquation : Blend(Source, Destination) = (Source * 상수1) + (Destination * 상수2)</p>
-    <p>SubtractEquation : Blend(Source, Destination) = (Source * 상수1) - (Destination * 상수2)</p>
-    <p>ReverseSubtractEquation : Blend(Source, Destination) = (Destination * 상수2) - (Source * 상수1)</p>
-    <p>MinEquation : Blend(Source, Destination) = Min((Source * 상수1), (Destination * 상수2))</p>
-    <p>MaxEquation : Blend(Source, Destination) = Max((Source * 상수1), (Destination * 상수2))</p>
+    <p>AddEquation : Blend(Source, Destination) = (Source * Source상수) + (Destination * Destination상수)</p>
+    <p>SubtractEquation : Blend(Source, Destination) = (Source * Source상수) - (Destination * Destination상수)</p>
+    <p>ReverseSubtractEquation : Blend(Source, Destination) = (Destination * Destination상수) - (Source * Source상수)</p>
+    <p>MinEquation : Blend(Source, Destination) = Min((Source * Source상수), (Destination * Destination상수))</p>
+    <p>MaxEquation : Blend(Source, Destination) = Max((Source * Source상수), (Destination * Destination상수))</p>
     <br>
-    <p>source와 destination에 각각 특정한 상수를 곱하고, 그 값들을 Equation 규칙에 따라 연산해줍니다.</p>
     <p>곱할수 있는 상수들은 다음과 같습니다.</p>
     <br>
     <p>Zero : 0</p>
@@ -45,36 +44,28 @@
     <br>
 
     <h2>- Blending Example</h2>
-    <p>자주 쓰이는 몇가지 Color Blending들을 소개해보겠습니다</p>
     <br>
     <h3>Normal</h3>
-    <p>Blend(Source, Destination) = (Source * Srcalpha) + (Destination * OneMinusSrcAlpha)</p>
+    <p>Source상수 : Srcalpha, Destination상수 : OneMinusSrcAlpha, AddEquation</p>
     <p>three.js에서 material을 만들면 기본적으로 적용되어있는 Blending입니다.</p>
-    <P>그릴 대상에 Alpha값을 곱해주고, 배경에는 1-(Source의 Alpha값)을 곱해줍니다.</P>
-    <p>그 다음, 그 두 색상을 더합니다.</p>
     <img src="1.png"></br>
-    <p>위 그림과 같이 Alpha값이 0.5인 빨강 원과 파랑원을 겹치게 되면</p>
-    <p>Alpha0.75의 보라색 원이 그려지게 됩니다.</p>
     <br><br>
     <h3>Add</h3>
-    <p>Blend(Source, Destination) = (Source * One) + (Destination * One)</p>
-    <p>Add blending은 그림에서 빛 표현을 할 때 자주 쓰이는 방식입니다.</p>
-    <p>단순히 Source와 Destination의 색을 더하는 방법으로, 가산 혼합과 같은 결과가 나오게 됩니다.</p>
+    <p>Source상수 : One, Destination상수 : One, AddEquation</p>
+    <p>Add blending은 그림에서 가산 혼합을 할때와 같은 결과가 나오게 됩니다.</p>
     <img src="2.png">
     <br>
     <br>
-    <br>
 
-    <h2>- Blending 에서 Transparent의 역할</h2>
+    <h2>- Transparent의 역할</h2>
     <p>Transparent가 false이고, 먼저 생성된 Material가 다른 것보다 더 앞에 놓여져 있을때,</p>
     <p>뒷쪽의 배경에 대한 연산을 아예 수행하지 않기 때문에, Blending이 제대로 되지 않을 수 있습니다.</p>
     <p>따라서 원활한 Blending을 위해 opacity를 변경하지 않더라도 Transparent는 true로 설정해야 합니다.</p>
     <img src="3.png">
     <br>
     <br>
-    <br>
 
-    <h2>- Custom Color Blending Example</h2>
+    <h1>- Custom Color Blending Example</h1>
     <p>three.js를 활용해서 Color Blending의 예제를 구현하였습니다.</p>
     <p>우측의 메뉴로 Sphere의 Material, Blend Equation, Source, Destination, Color등</p>
     <p>여러가지 값을 변경해보면서 Blending의 이해를 도울 수 있습니다.</p>