System.out.println("Hello, World");

○ 카메라

 - 3차원 게임에서 카메라는 시점을 의미한다. 3D게임의 화면에 보이는 모든 것은 카메라를 통해서 보여지는 것이다.

    3자의 입장에서 바라보면 캐릭터의 눈 위치에 카메라가 위치하여 캐릭터의 움직임에 따라 카메라의 방향과 위치가 변하는 것이다.

○ 변환 파이프 라인

 - 변환파이프라인의 목적은 하나의 이미지를 만들고 게이머의 화면에 그것들을 보여주기 위한 것이다.

    파이프 라인은 기하적인 데이터를 하나의 물체나 장면으로 표현하는 역할을 하며, 그것들로부터 2차원의 이미지를 만들어낸다.

○ 모델 공간(Model Space)

 - 일반적으로 하나의 캐릭터를 표현할 때 모델공간이라 불리는 하나의 좌표계에서 정점의 위치를 저장한다.

 - 로컬 좌표계를 이야기한다.

○ 전역공간(World Space)

 - 3차원 공간상의 최종적인 원점의 좌표계

 - 게이머의 화면에 보여질 모든 물체들을 위한 절대적인 레퍼런스 역항을 수행

 - 게임의 오브젝트들은 월드 공간의 좌표를 가지고 있다.

☆ 월드 변환(World Transform)

- 박스와 실린더가 각각 존재한다.

- 따로 따로 모델링된 실린더와 박스는 각각의 좌표계를 갖는다. 이것이 로컬 좌표계이다.

  이것들은 그냥 3차원 공간상에 배치하게 되면 원점을 공유한다.

- 2개의 물체를 따로따로 출력하기 위해서는 물체가 사용하는 로컬 좌표계가 아닌 월드 좌표계를 도입해야 한다.

- 즉 '실린더의 로컬좌표계 -> 월드 좌표계"와 "박스의 로컬 좌표계 -> 월드 좌표계"라는 2개의 변환이 필요하다.

- 일반적으로 3차원 그래픽에서 변환을 행렬을 사용한다고 해으니 로컬 좌표계->월드 좌표계는 행렬 변환이라는 것을 알 수 있다.

- 이런식으로 로컬 좌표계를 월드 좌표계로 변환하는 행렬을 변환 행렬(Transform Matrix)이라 한다. 

○ 시점공간(Eye Space)

 - 카메라가 바라보는 공간을 시점공간이라고 한다.

 - 시점이 그 공간 좌표계의 원점이 된다.

○ 절단 공간(Clip Space)

 - 어떤 물체가 보여지는 위치에 있는지, 그렇지 않은지를 판단.

 - 시야 절두체를 통해서 이루어진다.

 - 절단 공간상의 시야 절두체를 표현한 축정렬된 육면체의 크기는 동차 좌표계에서 표현된 4번째 좌표와 관련있다.

 - 카메라가 바라보는 정육면체 안에 잘라서 넣는다.

○ 정규화된 장치 좌표계(Normalized Device Coorinates)

 - 절단 공간에서 추 정렬된 육면체의 크기인 W를 1로 놓으면 정규화된 장치 좌표계를 얻을 수 있다.

 - 정규화된 장치 좌표계를 기준으로 표현된(x,y,z) 좌표에서 z값을 0으로 놓아서 좌표(x,y)를 얻는다.

 - 3D에서 2D로 변환하는 과정을 Z버퍼라고도 하며 스테실버퍼(그림자)에도 쓰인다.

○ 윈도우 좌표계

 - 정규화된 장치 좌표계를 실제 모니터상의 x,y 좌표계로 변환해야 하는데 이를 뷰포트 변환이라고 하며 정규화된 장치 

          좌표계에 게이머가 설정한 뷰포트의 크기를 곱하여 실제 윈도우의 x,y좌표를 얻어 낸다.

☆ 시야 절두체

 -시야 절두체란 하나의 3차원 공간상에서 카메라에 의해 보일 수 있는 것들을 담는 범위

 - 피라미드 형태의 육면체로 구성되어 있다.

☆ 투영

 - 투영은 3차원 장면을 2차원 모니터 화면에 그리기 위해, 장면에 표현되는 캐릭터나 물체들의 각 정점을 화면에 그려지는 

    2차원 좌표를 결정하기 위해 사용한다.

○ 원근 투영

 - 가까운 물체는 크게, 먼 물체는 작게 그려진다. 대부분의 게임에서 사용되는 방법

○ 직교 투영

 - 원금감을 갖지 않는 투영 방법으로 화면에 어떤 물체가 그려질때 원근에 의한 왜곡이 발생하지 않는 방법

 - 캐드 같은 설계 분야에 적용되며, 유명한 디아블로2가 직교 투영 방법을 사용한다.

☆ 일인칭 시점 카메라

 - 카메라의 위치는 위치벡터로 표현한다.

 - 시선 방향은 카메라가 바라보는 방향을 나타내는 방향벡터이며 

 - 상향 벡터는 카메라의 위쪽 벡터이다.

○ 카메라 변환(Camera Transform)

- 카메라 변환이란 3차원 월드 좌표계를 카메라를 기준으로 한 카메라 좌표계로 변환하는 것을 의미한다.

- 월드 좌표계를 카메라를 기준점으로 한 좌표계로 변환하는 과정이 카메라 변환이다. 

☆ 3인칭 시점 카메라

 - 3인칭 시점 카메라는 제 3자의 입장에서 내려다보는 시점을 제공한다.

 - 카메라는 게임 내의 캐릭터의 움직임과 무관하게 게이머의 명령에 따라 이동한다.

○ 개요

 - ID, 패스워드, 이름 입력하는 텍스트창을 구현한다. 

 - 성별을 선택할 수 있게 라디오버튼을 구현한다.

 - 생일에서 년도는 텍스트로 입력받고, 월과 일은 select로 구현한다. 

 - 관심있는 항목은 checkbox로 받으면서 여러개 선택가능하니 배열로 받아서 구현한다.

 - 자기소개는 textarea로 구현한다.

 - 가입버튼과 초기화 버튼을 구현한다.

1. LoginServlet를 생성한다.

2. login.html를 구현한다.

3. RegisterServlet은 다음과 같이 코딩한다.

사용자 관심항목에서 여러개를 선택하고 넘겨야 하니까 배열로 받은후 넘겨야 한다.

4. register.html은 다음과 같이 코딩한다.

5. web.xml은 다음과 같이 코딩해준다.

6. 다음과 같이 화면에 출력되어야 정상적으로 된 것이다.

7. 다음과 같이 항목에다가 적당한 값을 입력하고 회원가입을 하면 화면에 출력되어야 한다.

8. 다음과 같이 회원가입할때 입력한 값들이 정상적으로 출력되면

완성한것이다.

○ 개요

 - 로그인창과 패스워드창,가입하기 버튼과 초기화 버튼을 구현한다. 

 - 아직 DB를 연동안하기 떄문에 ID와 PASSWORD를 각각 'java'와 'servlet'로 정한후 이 아이디와 패스워드로만 접속하게 만든다.

1. 우선 LoginServlet을 만들어준다.

2. 그리고 login.html을 만들어준다.

3. LoginServlet을 다음과 같이 코딩해준다.

4. login.html을 다음과 같이 코딩한다.

5. web.xml도 다음과 같이 묶어준다.

6. 다음과 같이 로그인 form이 꾸며지고 아까 말한 java와 servlet으로 접속을 한다.

7. 다음은 아이디와 패스워드에 따라 변하는 화면이다.

-로그인 성공했을때

-로그인시 ID가 다를때

-로그인시 PASSWORD가 다를때

○ 개요

 - 두개의 숫자를 연산하기 위해서 숫자가 들어가는 텍스트창을 2개 구현한다.

 - Radio버튼이나 Select를 이용하여 연산자(+,-, X, /)를 구현한다.

 - 계산버튼을 눌러서 계산이 되게 해야 한다.

1. 우선 Calculator 클래스 파일을 만들어준다.

2. 작업하기 쉽게 WebContent쪽에 form폴더를 만들어준후 calculator.html파일을 생성한다.

3. 우선 Calculator.java를 코딩한다.

4. 그리고 아까 form폴더에 만들어둔 calculator를 코딩한다.

5. 그다음 역시 Web.xml에 가서 연결한다.

6. 결과

String value = getParameter(String name)

String[] values = getParameter(String name)

만약 name을 모를 경우 

Ennameration names = getParameterName()을 쓰면 된다.

○ <, >

 - 꺽쇠의 의미. 

&lt -> "<"

&gt -> ">"

○ type = "text"

value는 텍스트창에 기본값으로 넣는 용도로 쓰이며, size는 화면에 길이가 X인 텍스트창을 표시하며 maxlength는 최대 입력 길이 제한을 의미한다.

○ type = "password"

패스워드 입력을 할 수 있는 입력폼이 생성된다. 텍스틑 입력할때에는 안보이게 표시된다.

○ type = "checkbox"

위 그림과 같이 체크박스가 생긴다.

○ type = "checkbox" label 연결하기

하루동안 안보이기를 선택해도 체크박스에 체크가 된다. 

라벨 연결은 다음과 같이 연결해도 되지만 전자처럼하는 방법이 정석이니 참고만 한다.

○ type = "radio"

○ type = "radio" 그룹묶기

○ type = "hidden"

화면에서는 아무것도 표시가 안된다. 

○ type = "button"

type="button"은 단독으로 쓰이지 않고 자바 스크립트랑 같이 연동해서 쓰인다. 뒤에 있는 onclick은 자바스크립트다.

value는 버튼에 쓰여질 문구로 쓰인다.

○ type = "reset"

위와 같이 체크박스와 버튼 등을 선택한 다음 [초기화버튼]을 누르게 되면

위와 같이 선택된것이 모두 초기화 된다. 

○ type = "button"

전송버튼을 누르게 되면 input에 입력된 모든 값들이 넘어가게 된다. 

변환

 - 변환이란 어떠한 점 또는 벡터를 사용자가 원하는 점이나 벡터로 이동시키거나 회전 시키는 것.

 - 캐릭터의 이동, 캐릭터의 회전

 - 카메라의 이동, 카메라의 회전

 - 스케일(scale)

○ 좌표계

 - 좌표계는 하나의 기준. 한 점을 측정하기 위한 하나의 기준과 방법일 뿐이며 물리적으로 점 자체가 이동하는 것은 아니다.

종류로는 직죠좌표계, 원기둥 좌표계, 구면 좌표계가 있다.

○ 직교 좌표계

 - 3차원 공간에서 어떠한 점이나 벡터의 위치를 지정할때 가장 일반적으로 사용하는 좌표계(Direct3D, OpenGL에서 사용된다.)

○ 이동 변환

 - 하나의 좌표를 이동 시키는 것.

 - 모든 물체는 하나 이상의 좌표로 표현 할 수 있으며 하나의 이동 변환ㅇ르 통해서 물체를 구성하는 여러 개의 좌표에 같은 이동변환을 수행.

 - 2차원 직교 좌표계에서 이동변환

○ 회전 변환

 - 주어진 크기 만큼 회전축을 기준으로 회전하는 변환

◎ 2차원 평면 회전

 - 회전점 또는 고정점 기준으로 좌표를 회전하는 것.

 - 4개의 모서리 좌표가 모여서 하나의 사각형을 이루므로 4개의 좌표를 회전변환하면 사각형의 회전변환을 수행 할 수 있음.

 - 회전점은 원점(0,0)이다. 원점이 아닐 경우 좌표들을 원점으로 이동 변환한 우에 회전변환을 수행하고 다시 원래의 위치로 이동변환 해야 한다.

◎ 2차원 평면 회전의 3차원 확장

 - 3차원 회전변환은 x,y,z축 각각을 기준으로 회전하여 회전변환을 수행 할 수 있다.

ex) 3차원 좌표P를 x축을 기준으로 30 회전시킨 후, y축을 기준으로 60 회전시키기

○ 오일러 변환

 - x,y,z축을 각각 회전축으로 했을때 각 회전축에 대한 회전각으로 3차원 공간 회전 변환 행렬을 정의

 - 회전 행렬이나 좌표축 자세를 표현하는 직관적인 방법

 - z-y-x 오일러 변환

○ 동차 좌표계

 - 3차원 좌표를 세개의 요소로 표현할 경우 점인지, 벡터인지 혼동 될수 있기 때문에 4개의 요소로 표현한 동차 좌표를 이용한다.

○ 동차 좌표계에서의 이동변환

X' = x + dx

Y' = y + dy

Z' = z + dz

○ 동차 좌표계에서의 크기변환 행렬

X' = X x a

Y' = Y x a

Z' = Z x a

 - 한개체를 x,y,z방향으로 Sx, Sy, Sz배 확대, 축소한다.

○ 동차 좌표계에서의 회전 행렬

- X축 중심으로 θ 회전 Rx

- Y축 중심으로 θ 회전 Ry

- Z축 중심으로 θ 회전 Rz

 - 개체를 i축 주위로 라디안만큼 회전 i축상에 있는 모든 점들은 변하지 않는다.

○ 변환의 결합

 - 행렬들을 하나로 결합하는 이유는 효율을 높이기 위해서다.

[예]수천개의 정점을 가진 물체가 있다. 이 물체가 크기 조정, 회전 후에 마지막으로 평행 되어야 한다고 하면 모든 정점을 세 형랠과 각각 곱하는 대신

세 행렬을 하나로 결합한 후 그 행렬들을 모든 정점들에 적용한다. 

이동행렬 =T, 회전행렬 R, 크기변형 = S

C=TRS이다.

 [변환의 결합은 순서가 중요하다. 왜냐하면 행렬의 곱셈에서 교환법칙은 적용되지 않기 때문이다. AB ≠ BA]

행렬(Matrix)

-행렬이란 2차원으로 배열된 순서쌍.

 - 가로로된 숫자 나열을 행(row)

 - 세로로 된 숫자 나열을 열(columm).

 - m과 n이 같은 행렬을 정방행렬이라고 한다.

○ 대각행렬(diagonal matrix)

 - 행렬의 기본 Aij에서 i와 j가 같은 원소를 대각선 성분이라고 함.

 - 대각선 성분을 제외한 모든 성분이 0인 특별한 형태의 행렬이 가능

○ 단위행렬(identity matrix)

 - 단위 행렬은 실수의 곱에서 1과 같은 역할을 한다.

 - AI = IA = A

○ 전치행렬(transpose matrix)

 - 행을 열로 자리바꿈하거나, 열을 행으로 자리바꿈한 행렬

○ 행렬의 덧셈

○ 행렬의 뺄셈

○ 행렬의 곱셈

 - AB = C

○ 행렬과 스칼라의 곱

KA = AK

○ 행렬의 연산 법칙

 - 덧셈법칙

A + B = B + A

(A+B)+C = A+(B+C)

A + 0 = 0 + A

A + (-A) = 0

-곱셈법칙

AB ≠ BA ( 교환법칙)

A(BC) = (AB)C (결합법칙)

A(B±C) = AB ± AC

AI = IA = A

k(AB) = (kA)B = A(kB)

-스칼라의 곱 법칙

(K+I)A = kA + IA

K(A+B) = kA + kB

(KI)A = K(IA)

(-I)A = -A

0A = 0

-정방행렬 A에 대하여

  - A0 = I

 - A1 = A

 - An+1 = AnA

 - AmAn = Am+n

○ 역행렬

 - 역행렬이란 정방행렬에서만 존재

 - 다음 조건을 만족시키는 행렬의 이미

AA-1 = A-1A = I

 - 정방행렬 이라고 해서 모두 역행렬이 존재하는 것은 아니다. 역행렬이 존재하는 행렬을 가역(inverible)행렬이라고 하고 

    존재하지 않는 행렬을 특이(singular)행렬이라 함.

벡터 Vector

[스칼라]

크기만으로 정해지는 양을 스칼라(scalar)라 한다.

[벡터]

○ 개요

 - 힘, 속도, 도형의 평행이동과 같이 크기와 방향을 함꼐 가지는 양을 벡터라고 한다.

 - 벡터란 크기와 방향을 나타내는 수학적인 도구

 - 일반적으로 벡터를 시각화할때에는 화살표로 표시한다.

시점 A의 위치에는 관계없이 크기와 방향만을 생각하여 로 나타낸다.

○ 동등벡터

 - 벡터는 크기와 방향을 나타내기 때문에 벡터의 시작점은 의미가 없다.

 - 크기와 방향이 같은 벡터를 동등 벡터라고 한다.

○ 성분

 - 벡터의 성분이란 벡터 V의 괄호안의 V1, V2, Vn을 말한다.(말 그대로 벡터의 성분을 의미한다.)

 - 벡터의 성분은 하나의 좌표계로 표현한다.

○ 평행이동

 시점 A의 위치에 관계없이 크기와 방향만을 생각하는 이유

 - 시점 A가 어떤 점에 위치하더라도 도형의 각 점 P에서 AB와 같은 방향이면서 평행이고 또 길이가 

    같은 선분 PP'를 그어 점 P가 옮겨지는 점 P'를 구할 수 있음

○ 단위 벡터

 - 벡터의 크기는 1이며 방향만을 나타낸다.

 - 크기가 1이 아닌 벡터를 단위 벡터로 만들어 주는 것을 벡터의 정규화(Normalization)라고 한다.

○ 주의점!

<HTML 입력 관련 태그들>

-form 태그

 ○ 입력태그들을 묶어주는 태그

 ○ 속성

- action : 요청할 URL - 요청 파라미터를 전송할 CGI의 URL 지정

- method : 요청방식(기본 : GET)

- 기본속성

- name : 전송할 값에 name 값

- 입력태그 : <select>, <textarea>, <input>

- <select> 태그

         ○ 목록 리스트중 선택하도록 하는 태그

         ○ 속성 : multiple : 다중 선택

         ○ 하위태그

-<option> : 선택한 item 등록

-<textarea> 태그

 ○ 여러줄 입력폼

 ○ 속성

- cols : 열수

- rows : 행수

-<input> 태그

○ 다양한 입력폼을 만드는 태그

○ 입력폼의 모양은 Type 속성을 이용하여 지정한다.

○ type

º text : 한줄짜리 text 입력 폼

º password : 패스워드 입력 폼

º checkbox : yes/no를 선택하기 위한 선택 폼

º radio : 여러개중 하나만을 선택하기 위한 선택 폼(여러개중 한개만 선택할 경우 쓰이게 된다)

º file : 전송할 파일을 선택하기 위한 폼

º hidden : 클라이언트에게 보이지 않고 전송할 값을 지정하는 폼

º submit : 전송 버튼

º reset : 초기화 버튼

º button : 그냥버튼(버튼 모양) .javascript와 연동하여 사용한다.

º image : 이미지 전송 버튼

ex)<input type="text">

<직접 HTML구현>

1. WebContent 밑에 form폴더를 만들어준다.

2. 그리고 form폴더에 basic.html을 만들어준다.

3. form 태그를 이용하여 입력태그들을 묶어주게 코딩한다.

4. http://127.0.0.1:8088/myweb/form/basic.html에 들어가면 빈 화면으로 나온다면 성공한 것이다.

5. Select태그를 구현해 볼 것이다. 다음과 같이 구현해본다.

값이 넘어가는 과정은 name="select"로 지정되었기 때문에 select=010과 같이 적용된다.

6. 웹페이지를 실행했을때 다음과 같이 익숙해보이는 화면이 나온다면 성공한 것이다.

7. 만약 사용자가 011을 선택했을때 다른값(SKT)를 보내고 싶다면 <option value="SKT">로 작성하면 된다.

8. 값을 여러개 선택하고 싶다면 select쪽에 multiple을 추가해주면 된다.

9. 다음과 같이 출력된다. 동시에 여러개를 선택하고 싶다면 드래그를 이용하여 지정해주고, 순서적이지 않은 값을 선택하고 싶다면 

ctrl을 이용하여 선택하면 된다.

이렇게 여러 선택된 값들이 넘어갈때에는 select=010&select=017&select=019로 &으로 묶여서 넘어간다.

10. 이번에는 TextArea태그를 이용해보도록 하겠다. 

TextArea코드는 위와 같이 코딩하면 된다.

11. 위 사진과 같이 웹페이지에서 많이 봐오던 텍스트 영역이 나오면 성공한 것이다.

12. 이번에는 TextArea에다가 행과 열 수를 지정해보겠다.

앞에서 언급한것처럼 cols : 열수, rows : 행수를 의미한다. 위와 같은 상황이라면 한줄에 80자를 입력할 수 있으며 

10줄이 늘어난다는 뜻이다.

13. 밑과 같은 그림처럼 텍스트영역이 늘어난것을 확인할 수 있다.

14. 참고로 <TextArea>와 </TextArea> 사이에 문자열을 입력하면 웹페이지에 출력된다. 이게 TextArea의 Default 값이다.

사이에다가 Default값 : 자기소개라고 넣고 돌려보기로 한다.

돌려보았더니 텍스트영역에 Default값 : 자기소개가 Default값으로 같이 출력된다.

15. 참고로 <textarea>와 </textarea>사이는 엔터와 스페이스바를 모두 인식하기 때문에 작성할떄 유의해야 한다. 

다음 그림과 같이 엔터와 스페이스바를 많이 입력해보겠다.

17. 엔터와 스페이스바를 인식하기 때문에 다음과 같이 출력된다. 이에 유의하고 코딩을 해야 한다.