[WebGL 입문] 4, 렌 더 링 준비
4588 단어 WebGL
반드시 준비 해 야 할 물건
지난번 에 3D 그래 픽 의 기초 지식 을 소 개 했 습 니 다.
Z 좌표 에 따라 결정 되 는 두 가지 좌표 계 를 말씀 드 렸 습 니 다.좌표 변환 의 종류.이번 에는 실제 WebGL 이 그림 을 그 릴 때 반드시 준비 해 야 할 것들 을 말 해 보 자.
우선 HTML.javascript 에 관 한 기초 지식 은 설명 하지 않 습 니 다.만약 명확 하지 않 은 단어 나 개념 이 있다 면.알 아 보 세 요.
나 는 네가 일정한 HTML 과 javascript 기 초 를 가지 고 있다 고 생각 하 는 전제 에서 해설 을 한 것 이다.
HTML 준비
앞에서 말 한 것 처럼 둘째, WebGL 을 시작 하기 전에 canvas 에 대해 알 아 보 겠 습 니 다..WebGL 은 canvas 의 그래 픽 영역 을 이용 합 니 다.그 러 니까WebGL 웹 페이지 를 사용 하면 HTML 에 canvas 태그 가 들 어 있 을 것 입 니 다.
이 canvas 태그 에 ID 속성 을 추가 합 니 다. javascript 에서 getElement ById 등 함 수 를 사용 하면 이 canvas 대상 을 쉽게 얻 을 수 있 습 니 다.이 canvas 를 가 져 오 면javascript 을 이용 하여 모든 작업 을 완료 할 수 있 습 니 다.
최소한 의 HTML 모델 은 다음 과 같다.
<html>
<head>
<title>WebGL TEST</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>서류canvas 의 크기 는 HTML 에서 설정 할 수 있 으 며, 물론 자바 script 을 사용 하여 동적 으로 만 들 수 있 습 니 다.또한 모든 스 크 립 트 를 HTML 에 쓸 수 있 습 니 다.개인 적 으로 자 바스 크 립 트 코드 를 단독 파일 로 분리 하 는 것 이 좋다 고 생각 합 니 다. 이것 은 필수 가 아 닙 니 다.착색 기 WebGL 에 대해 서 는 고정 렌 더 링 라인 이 존재 하지 않 습 니 다.누가 물 어 볼 것 으로 예상 된다.무엇이 고정 렌 더 링 라인 입 니까?먼저 간단히 설명해 드 리 겠 습 니 다.고정 렌 더 링 라인 은 쉽게 말 하면 3d 렌 더 링 이 진행 하 는 일련의 계산 절차 이다.유수 선 처럼.(말 이 너무 쉬 워 요.) 고정 렌 더 링 라인 에 있어 요.지난번 에 말 한 모형, 보기, 투영 좌표 변환 이 모두 우 리 를 대신 해서 끝 날 것 이다.세부 사항 을 이해 할 필요 가 없다. 단지 모든 좌표 변환 이 안에 포함 되 어 있다 는 것 을 알 아야 한다. 모두 우리 가 계산 하 는 것 을 도와 줄 것 이다.고정 렌 더 링 라인 이 있다 고 가정 하면 코드 를 만 드 는 것 이 비교적 쉬 워 집 니 다. 모든 변환 은 고정 렌 더 링 라인 에 의 해 이 루어 졌 기 때문에 자유 도가 낮은 것 이 단점 입 니 다.고정 렌 더 링 라인 은 가장 중요 한 조작 만 끝 낼 수 있 고 특수 한 처 리 를 하고 싶다 고 가정 합 니 다.좀 귀 찮 을 텐 데.자, 고정 렌 더 링 라인 은 여기까지 입 니 다.앞에서 말 했 잖 아.WebGL 에는 고정 렌 더 링 라인 이 존재 하지 않 습 니 다.그 러 니까좌표 변환 은 반드시 모두 자신 이 해 야 한다.그리고 이 기술 은 좌표 변환 메커니즘 을 착색 기 (Shader) 라 고 한다.이렇게 하면 유인원 이 제어 할 수 있 는 메커니즘 을 편집 가능 렌 더 링 라인 이 라 고 한다.착색 기 는 기하학 적 도형 의 정점 을 처리 하 는 정점 착색 기와 픽 셀 을 처리 하 는 세 션 착색 기 두 가지 유형 이 있다.WebGL 에는 고정 파이프라인 이 없 기 때문에 정점 착색 기와 세 션 착색 기 를 준비 해 야 합 니 다.착색 기의 처리 방법 은 정점 착색 기와 세 션 착색 기 를 어떻게 준비 해 야 합 니까?실은착색 기의 가입 은 여러 가지 방법 이 있 을 수 있다.착색 기 는 프로그램 원숭이 가 직접 작 성 했 고 착색 기의 코드 는 간단 한 문자열 일 뿐이다.그래서 어떤 방법 으로 든 이 착색 기 문자열 을 프로그램 에 전달 하면 된다.가장 쉬 운 방법 은 착색 기 를 HTML 에 기록 하 는 것 이다.이런 방법 을 사용 하면 HTML 의 script 라벨 을 이용 하여 만 든 것 입 니 다.다음은 간단 한 사례 다.
<script id="vshader" type="x-shader/x-vertex">
※
</script>
<script id="fshader" type="x-shader/x-fragment">
※
</script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Photon×WebGL(4) Cube를 직장인에게하고 싶은 일 2020으로 버전 업하여 매번 발생하는 사람 · 네트워크 객체가 생성되지 않음 · DefaultPool failed to load,,, => 네트워크 객체 오른쪽 클릭 → Reimport로 회피 이번에...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
