HTML5의 WebGL 3D 개요(1부) - WebGL 기본 개발은 웹 페이지 3D 렌더링의 새로운 시대를 엽니다._html5 튜토리얼 기술

WebGL은 웹페이지에서 3D 렌더링의 새로운 시대를 열었습니다. 이를 통해 플러그인 없이 캔버스에서 3D 콘텐츠를 직접 렌더링할 수 있습니다. WebGL은 캔버스 2D API와 동일하므로 스크립트를 통해 개체를 조작하므로 작업 컨텍스트 준비, 데이터 준비, 캔버스에 개체 그리기 및 렌더링 단계가 기본적으로 유사합니다. 2D와의 차이점은 3D에는 세계, 빛, 질감, 카메라, 매트릭스 및 기타 전문 지식과 같은 더 많은 지식이 포함된다는 것입니다. 아래 사용법 참조의 첫 번째 링크인 WebGL에 대한 좋은 중국어 튜토리얼이 있으므로 여기서는 아무 것도 하지 않겠습니다. 다음 내용은 학습 내용을 간략하게 요약한 것입니다.

브라우저 지원
Microsoft는 자체 그래픽 개발 계획을 가지고 있고 WebGL을 지원하지 않기 때문에 IE는 현재 플러그인 설치 외에는 WebGL을 실행할 수 없습니다. Chrome, FireFox, Safari, Opera 등 기타 주요 브라우저의 경우 최신 버전을 설치하세요. 최신 브라우저를 설치하는 것 외에도 그래픽 카드 드라이버도 최신 상태인지 확인해야 합니다.
이를 설치한 후 브라우저를 열고 다음 URL을 입력하여 브라우저의 WebGL 지원을 확인할 수 있습니다: http://webglreport.sourceforge.net/.

위 브라우저를 정상적으로 설치한 후에도 여전히 WebGL을 실행할 수 없다면 강제로 WebGL 지원을 켜볼 수 있습니다. 여는 방법은 다음과 같습니다.
Chrome 브라우저
Chrome에 일부 시작 매개변수를 추가해야 합니다. 다음 특정 단계는 Windows 운영 체제를 예로 들어 설명합니다. 브라우저에서 바로가기 메서드를 마우스 오른쪽 버튼으로 클릭하고 대상 상자에서 속성을 선택한 후 chrome.exe 뒤의 따옴표 뒤에 다음 내용을 추가합니다.

--enable-webgl--ignore-gpu-blacklist--파일에서 액세스 허용

확인을 클릭한 후 Chrome을 닫은 후 이 바로가기를 사용하여 Chrome 브라우저를 시작하세요.
여러 매개변수의 의미는 다음과 같습니다.
--enable-webgl은 WebGL 지원을 활성화한다는 의미입니다.
--ignore-gpu-blacklist는 GPU 블랙리스트를 무시한다는 의미입니다. 이는 일부 그래픽이 있음을 의미합니다. 카드 및 GPU 너무 오래되었고 다른 이유로 WebGL을 실행하지 않는 것이 좋습니다. 이 매개변수를 사용하면 브라우저가 이 블랙리스트를 무시하고 WebGL을 강제로 실행할 수 있습니다.
--allow-file-access-from-files; WebGL 개발자가 아니고 WebGL을 개발 및 디버깅할 필요가 없지만 WebGL 데모만 살펴보고 싶다면 이 매개변수를 추가할 필요가 없습니다.

Firefox 브라우저
Firefox 사용자는 브라우저 주소 표시줄에 "about:config"를 입력하고 Enter 키를 누른 후 필터(filter)에서 "webgl"을 검색하고 webgl을 교체하세요. .force-enabled를 true로 설정하고, webgl.disabled를 false로 설정하고, 필터에서 "security.fileuri.strict_origin_policy"를 검색하고 security.fileuri.strict_origin_policy를 false로 설정한 다음 현재 열려 있는 모든 Firefox 창을 닫고 Firefox를 다시 시작하세요.
처음 두 설정은 WebGL 지원을 강제로 켜는 것이고, 마지막 security.fileuri.strict_origin_policy 설정은 로컬 소스에서 리소스를 로드하도록 허용하는 것입니다. WebGL 개발자가 아닌 경우에는 그럴 필요가 없습니다. WebGL을 개발하고 디버그하지만 WebGL만 살펴보고 싶다면 이 항목을 설정할 필요가 없습니다.

Safari 브라우저
메뉴에서 "속성" → "고급"을 찾아 "개발 메뉴 표시"를 선택한 다음 "개발" 메뉴로 이동하여 "WebGL 켜기"를 선택하세요.

개발 단계

다음 코드는 관련 개념을 간단히 요약한 것입니다. 이는 참조의 중국어 튜토리얼에서 가져온 것이며 더 많은 3D 지식을 포함합니다. 관심 있는 학생들은 Practical Reference의 중국어 튜토리얼로 바로 이동할 수 있습니다. 이 튜토리얼은 제가 여기서 설명하는 것보다 훨씬 더 자세하고 정확합니다. 재미에 참여하는 학생들은 각 코드 줄의 의미를 깊이 파고들지 않고도 간단히 살펴볼 수 있습니다.

준비
물론 페이지에 렌더링 컨테이너로 캔버스 요소를 추가하는 것입니다. 예:

코드 복사

코드는 다음과 같습니다.

브라우저가 HTML5 캔버스 요소를 지원하지 않는 것으로 보입니다.

< /body>

이제 본격적으로 스크립트 작성을 시작할 시간입니다. 먼저 프로그램 항목과 전체 구조를 살펴보세요.

코드 복사

코드는 다음과 같습니다.

functionstart(){
varcanvas=document.getElementById("glcanvas");
initGL(캔버스);
initShaders() ;
initBuffers();
gl.clearColor(0.0,0.0,0.0,1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}

여기의 여러 방법은 일반적인 WebGL 그리기 단계를 나타냅니다.

1단계: WebGL 작업 환경 초기화 - initGL
이 방법의 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

vargl;
functioninitGL(canvas) {
gl=null;
시도{
//Trytograbthestandardcontext.Ifitfails, fallbacktoexperimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
}
catch(e){} //GLcontext가 없으면 포기하세요
if(!gl){
alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
}
}

이 방법은 매우 간단합니다. WebGL 그리기 환경을 확보하기 위한 것입니다. 그러나 현재 WebGL 표준이 없기 때문에 "webgl" 매개변수를 전달해야 합니다. 최종적으로 실험 단계에서 사용된 매개변수는 모두 "experimental-webgl"입니다. 물론, canvas.getContext("experimental-webgl")를 직접 호출할 수도 있으며, 표준이 설정된 후 다른 코드를 수정할 수도 있습니다.

2단계: 셰이더 초기화 - initShaders
셰이더의 개념은 직설적으로 말하면 그래픽 카드 작동 명령입니다. 3D 장면을 구성하려면 색상, 위치 및 기타 정보에 대한 많은 양의 계산이 필요합니다. 이러한 계산을 소프트웨어로 수행하면 속도가 매우 느려집니다. 따라서 그래픽 카드가 이러한 작업을 계산하도록 하는 것은 매우 빠릅니다. 이러한 계산을 수행하는 방법은 셰이더에 의해 지정됩니다. 셰이더 코드는 GLSL이라는 셰이더 언어로 작성되므로 여기서는 설명하지 않습니다.
셰이더는 HTML로 정의하고 코드에서 사용할 수 있습니다. 물론 문자열을 사용하여 프로그램에서 셰이더를 정의하는 경우에도 마찬가지입니다.
정의 부분을 먼저 살펴보겠습니다.

코드를 복사하세요

코드는 다음과 같습니다.

precisionmediumpfloat;
varyingvec4vColor;
voidmain(void){
gl_FragColor =vColor;
}


attributevec3aVertexPosition;
attributevec4aVertexColor; uniformmat4umvmatrix; varyingVec4vcolor;
voidmain (void) {
gl_position = upmatrix*umvmatrix*vec4 (avertexposition);
vcolor = }.
< /script>


여기에는 얼굴 셰이더와 정점 셰이더라는 두 가지 셰이더가 있습니다.
이 두 셰이더에 대해 여기서 설명할 필요가 있는 것은 컴퓨터의 3D 모델은 기본적으로 삼각형 패치와 결합된 점으로 표현되며, 표면 셰이더는 보간법을 통해 삼각형 패치의 포인트 데이터가 처리됩니다.

위에서 정의한 정점 셰이더는 정점의 위치와 색상 계산 방법을 정의하고, 표면 셰이더는 보간점의 색상 계산 방법을 정의합니다. 실제 적용 시나리오에서는 셰이더에서 빛을 처리하는 것과 같은 효과도 포함됩니다.
셰이더를 정의합니다. 프로그램에서 찾아 사용할 수 있습니다.

코드 복사

코드는 다음과 같습니다. 다음은 다음과 같습니다.

varshaderProgram;

functioninitShaders(){

varfragmentShader=getShader(gl,"shader-fs");
varvertexShader=getShader(gl,"shader-vs " );
shaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertexShader);
gl.attachShader(shaderProgram,fragmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
alert("Couldnotinitialiseshaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute=gl.getAttribLocation( shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram, "aVertexColor")
shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}


셰이더가 있는데 어떻게 그래픽 카드에서 실행하게 합니까? 프로그램은 이런 종류의 브리지입니다. WebGL의 기본 바이너리 코드는 기본적으로 그래픽 카드가 셰이더 코드를 실행하여 렌더링하도록 하는 것입니다. 지정된 모델 데이터.
여기에서는 보조 메서드 getShader도 사용됩니다. 이 메서드는 HTML 문서를 탐색하고 셰이더의 정의를 찾은 후 정의를 얻은 후 셰이더를 생성하는 것입니다.

코드 복사

코드는 다음과 같습니다.

functiongetShader(gl,id){
varshaderScript,theSource,currentChild,shader;
shaderScript=document.getElementById(id);
if(!shaderScript){
returnnull;
}
theSource="";
currentChild =shaderScript.firstChild;
while (currentChild){
if(currentChild.nodeType==currentChild.TEXT_NODE){
theSource =currentChild.textContent;
}
currentChild=currentChild.nextSibling;
}
if(shaderScript.type=="x-shader/x-fragment"){
shader=gl.createShader(gl.FRAGMENT_SHADER);
}elseif(shaderScript.type== "x-shader/x-vertex" ){
shader=gl.createShader(gl.VERTEX_SHADER);
}else{
//Unknownshadertype
returnnull;
}
gl .shaderSource(shader,theSource);
//쉐이더 프로그램 컴파일
gl.compileShader(shader);
//Seeifitcompiledsuccessful
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
alert("Anerroroccurredcompilingtheshaders:" gl.getShaderInfoLog(shader));
returnnull;
}
returnshader;
}

3단계: 만들기/ 모델 데이터 로드 - initBuffers
이 작은 예에서 모델 데이터는 기본적으로 실제 프로그램에서 직접 생성됩니다.

코드 복사

코드는 다음과 같습니다.

vartriangleVertexPositionBuffer;
vartriangleVertexColorBuffer;
functioninitBuffers(){
TriangleVertexPositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
varvertices=[
0.0,1.0,0.0,
-1.0,-1.0,0.0,
1.0,-1.0,0.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize=3;
triangleVertexPositionBuffer.numItems=3 ;
triangleVertexColorBuffer=gl.createBuffer( );
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
varcolors=[
1.0,0.0,0.0,1.0,
0.0,1.0, 0.0,1.0,
0.0,0.0 ,1.0,1.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize=4;
triangleVertexColorBuffer.numItems=3;
}

위 코드는 삼각형의 꼭지점과 꼭지점의 색상 데이터를 생성하여 버퍼에 넣습니다.

4단계: 렌더링 - drawScene
데이터를 준비한 후 렌더링을 위해 WebGL에 넘겨주기만 하면 됩니다. 여기서는 gl.drawArrays 메서드가 호출됩니다. 코드 보기:

코드 복사

코드는 다음과 같습니다.

functiondrawScene(){
gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
pMatrix=okMat4Proj(45.0,gl .viewportWidth/gl.viewportHeight ,0.1,100.0);
mvMatrix=okMat4Trans(-1.5,0.0,-7.0);
gl.bindBuffer(gl.ARRAY_BUFFER, TriangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram .vertexPositionAttribute, TriangleVertexPositionBuffer.ite mSize ,gl.FLOAT,false,0,0);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl. FLOAT,false,0,0 );
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);
}

이 함수는 먼저 3D 세계의 배경을 검은색으로 설정한 후 투영 행렬을 설정하고 그릴 개체의 위치를 ​​설정한 후 버퍼에 있는 정점 및 색상 데이터를 기반으로 개체를 그립니다. 투영 행렬 및 모델 뷰 직사각형을 생성하기 위한 몇 가지 보조 방법도 있습니다(Oak3D 그래픽 라이브러리의 행렬 보조 방법 사용). 이 방법은 주제와 거의 관련이 없으며 여기서는 자세히 설명하지 않습니다.
기본적으로 이것이 모든 과정입니다. 이러한 기반에 일부 WegGL 기능을 추가하여 더 복잡한 텍스처, 조명 등이 모두 구현됩니다. 자세한 예는 다음 중국어 튜토리얼을 참조하세요.

어때요? 기본 WebGL을 사용하여 개발하는 것은 어떤가요? 3D에 대한 깊은 지식이 필요할 뿐만 아니라, 다양한 구현 세부 사항도 알아야 합니다. WebGL은 다양한 애플리케이션 시나리오에 유연하게 적응하기 위해 이를 수행하지만 나와 같은 대부분의 비전문가의 경우 많은 세부 사항을 알 필요가 없습니다. 이로 인해 이 섹션에서 사용된 Oak3D 라이브러리와 같이 개발을 지원하는 다양한 클래스 라이브러리가 생성되었습니다(WebGL 개발을 시연하기 위해 예제에서는 매트릭스 보조 방법만 사용됨). 다음 섹션에서는 일반적으로 사용되는 Three.js 그래픽 라이브러리를 소개합니다.

실용 참고 자료:
중국어 튜토리얼: http://www.hiwebgl.com/?p=42

개발 센터: https://developer.mozilla.org/en/WebGL