WebGL은 새로운 웹 페이지의 3D 렌더링 시대를 열었으며,이를 통해 플러그인의 도움없이 3D 컨텐츠를 캔버스에서 직접 렌더링 할 수 있습니다. Canvas 2D API와 마찬가지로 WebGL은 스크립트를 통해 객체를 조작하므로 단계는 기본적으로 유사합니다. 작업 컨텍스트를 준비하고 데이터를 준비하고 캔버스에 객체를 그리십시오. 2D와 달리 3D에는 세계, 빛, 질감, 카메라, 매트릭스 및 기타 전문 지식과 같은 더 많은 지식이 포함됩니다. WebGL에는 좋은 중국 튜토리얼이 있으며 아래 참조의 첫 번째 링크이므로 여기에는 내 기술을 과시하지 않습니다. 다음 내용은 내가 배운 것에 대한 간단한 요약 일뿐입니다.
브라우저 지원Microsoft에는 자체 그래픽 개발 계획이 있으며 WebGL을 지원하지 않으므로 플러그인 설치를 제외하고는 WebGL을 실행할 수 없습니다. Chrome, Firefox, Safari, Opera 등과 같은 다른 주류 브라우저는 모두 최신 버전으로 설치됩니다. 최신 브라우저를 설치하는 것 외에도 그래픽 카드 드라이버도 최신 상태인지 확인해야합니다.
이를 설치 한 후 브라우저를 열고 다음 URL을 입력하여 WebGL에 대한 브라우저의 지원을 확인할 수 있습니다 : http://webglreport.sourceforge.net/.
위의 브라우저를 정상적으로 설치 한 후에도 여전히 WebGL을 실행할 수 없으므로 WebGL 지원을 강제로 활성화하여 시도 할 수 있습니다. 그것을 가능하게하는 방법은 다음과 같습니다.
크롬 브라우저 크롬에 시작 매개 변수를 추가해야합니다. 다음과 같은 특정 작동 단계가 예로서 수행됩니다. 바로 가기를 크롬 브라우저로 찾아 오른 마우스 오른쪽 버튼을 클릭하고 속성을 선택하십시오. 대상 상자에서 Chrome.exe 이후의 견적 후 다음 내용을 추가하십시오. -enable-webgl-ignore-gpu-blacklist-allow-file-access-fl확인을 클릭하여 크롬을 닫은 다음이 바로 가기를 사용하여 크롬 브라우저를 시작하십시오.
여러 매개 변수의 의미는 다음과 같습니다.
-enable-webgl은 WebGL 지원을 가능하게하는 것을 의미합니다.
-ignore-gpu- 블랙리스트는 GPU 블랙리스트를 무시하는 것을 의미합니다. 이는 일부 그래픽 카드 GPU가 너무 오래되었고 다른 이유이기 때문에 WebGL을 실행하는 것이 권장되지 않습니다. 이 매개 변수를 사용하면 브라우저 가이 블랙리스트를 무시하고 WebGL을 강제로 실행할 수 있습니다.
-From From에서 낙하산 액세스는 현지에서 자원을 적재 할 수 있음을 의미합니다. WebGL 개발자가 아니고 WebGL을 개발하고 디버그 할 필요가 없지만 WebGL 데모를 살펴 보려면이 매개 변수를 추가 할 수 없습니다.
Firefox 브라우저 Firefox 사용자는 입력하십시오 : 브라우저의 주소 표시 줄에 구성하고, 입력 한 다음, 필터 (필터)에서 WebGL을 검색하고 WebGL.force-enabled를 true로 설정하십시오. webgl.disabled를 false로 설정하십시오. 필터 (필터)에서 security.fileuri.strict_origin_policy를 검색하고, security.fileuri.strict_origin_policy를 false로 설정하십시오. 그런 다음 현재 열린 모든 Firefox Windows를 닫고 Firefox를 다시 시작하십시오.처음 두 가지 설정은 WebGL 지원을 강제하는 것입니다. 마지막 보안 .fileuri.strict_origin_policy 설정은 로컬 영역에서 자원을로드 할 수 있도록하는 것입니다. WebGL 개발자가 아니고 WebGL을 개발하고 디버그 할 필요가 없지만 WebGL 데모를보고 싶다면이 항목을 설정할 수 없습니다.
사파리 브라우저 속성 찾기 → 메뉴에서 고급, 개발 메뉴 표시를 선택한 다음 개발 메뉴로 이동 한 다음 WebGL 켜기를 선택하십시오. 개발 단계다음 코드는 관련 개념에 대한 간단한 요약 일뿐입니다. 그것은 참조의 중국 튜토리얼에서 비롯되며 3D에 대한 많은 지식이 포함됩니다. 관심있는 학생들은 학습에 대한 실제 참조에서 중국 튜토리얼로 직접 뛰어들 수 있습니다. 재미에 참여하는 학생들은 각 코드 라인의 의미를 탐구하지 않고도 살펴볼 수 있습니다.
준비 말할 것도없이, 렌더링 컨테이너로 캔버스 요소를 페이지에 추가하는 것입니다. 예를 들어:<bodyonload = "start ()">
<canvasid = "glcanvas"width = "640"height = "480">
yourbrowserdoes thehtml5canvaselement.
</캔버스>
</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 작업 환경을 초기화 -INTGL 이 방법의 코드는 다음과 같습니다.vargl;
functioninitgl (canvas) {
gl = null;
노력하다{
// rateGrabThestAndardContext.ifitFails,FallbacktoExperimental.
gl = canvas.getContext ( "webgl") || canvas.getContext ( "Experimental-webgl");
}
Catch (e) {} // ifwedon'thaveglcontext, GiveUpnow
if (! gl) {
Alert ( "UnableToinitializeWebgl.YourbrowSermayNotsUpportit.");
}
}
이 방법은 매우 간단하며 WebGL 도면 환경을 얻는 것입니다. 매개 변수 webgl을 canvas.getContext 메소드로 전달해야합니다. 그러나 현재 WebGL 표준이 완성되지 않았으므로 실험 단계에서 사용 된 매개 변수는 실험적 WebGL입니다. 물론 Canvas.getContext (실험적 webgl)를 호출해도 괜찮습니다. 표준이 설정되면 다른 코드를 수정할 수 있습니다.
2 단계 : 셰이더 초기화 - 초기화 셰이더 셰이더의 개념은 비교적 간단하여 무뚝뚝하게 말하면 그래픽 카드 작동 명령입니다. 3D 장면을 구성하려면 색상, 위치 및 기타 정보를 많이 계산해야합니다. 이러한 계산이 소프트웨어에 의해 수행되면 속도는 매우 느립니다. 따라서 그래픽 카드가 이러한 작업을 계산하게하면 속도가 매우 빠릅니다. 이 계산을 수행하는 방법은 셰이더로 지정됩니다. 셰이더 코드는 GLSL이라는 셰이더 언어로 작성되며 더 이상이 언어에 대해 이야기하지 않습니다.셰이더는 HTML에서 정의되어 코드에 사용할 수 있습니다. 물론, 프로그램에 문자열이있는 셰이더를 정의하는 것도 동일합니다.
먼저 정의를 살펴 보겠습니다.
<scriptid = "shader-fs"type = "x-shader/x-fragment">
정밀한 mediumpfloat;
VaryingVec4vcolor;
voidmain (void) {
gl_fragcolor = vcolor;
}
</스크립트>
<scriptid = "shader-vs"type = "x-shader/x-vertex">
AttributeVec3averTexPosition;
AttributeVec4averTexColor;
균일 한 MAT4UMVMATRIX;
균일 한 mat4upmatrix;
VaryingVec4vcolor;
voidmain (void) {
gl_position = upmatrix*umvmatrix*vec4 (AvertexPosition, 1.0);
vcolor = AvertexColor;
}
</스크립트>
다음은 Face Shader와 Vertex Shader의 두 가지 셰이더입니다.
이 두 셰이더와 관련하여 컴퓨터의 3D 모델은 기본적으로 삼각형면과 결합 된 점으로 설명됩니다. Vertex Shader는 이러한 점의 데이터를 처리하고 Surface Shader는 보간을 통해 삼각형이면의 점 데이터를 처리합니다.
위에서 정의 된 정점 셰이더는 정점의 위치 및 색 계산 방법을 정의합니다. 표면 셰이더는 보간 포인트의 색상 계산 방법을 정의합니다. 실제 애플리케이션 시나리오에서는 셰이더의 조명 및 기타 효과를 처리하는 것도 포함됩니다.
셰이더를 정의하고 프로그램에서 찾아 사용할 수 있습니다.
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)) {
경고 ( "할 수 없음");
}
gl.useprogram (ShaderProgram);
ShaderProgram.VertexPositionAttribute = gl.getAttriblocation (ShaderProgram, "AvertexPosition");
gl.enablevertexattribarray (shaderProgram.VertexPositionAttribute);
ShaderProgram.VertexColorattribute = gl.getAttriblocation (ShaderProgram, "AvertexColor");
gl.enablevertexattribarray (ShaderProgram.VertexColorattribute);
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.nextibling;
}
if (shaderscript.type == "x-shader/x-fragment") {
셰이더 = gl.createshader (gl.fragment_shader);
} elseif (shaderscript.type == "x-shader/x-vertex") {
셰이더 = gl.createshader (gl.vertex_shader);
}또 다른{
// UnknownShaderType
returnnull;
}
gl.shadersource (셰이더, Thesource);
// 컴파일 메드 프로 그램
gl.compileShader (셰이더);
// SEEFITCOMEDEDSUCCESLY
if (! gl.getShaderParameter (셰이더, gl.compile_status)) {
ALERT ( "AnerrorOccurredCompillingTheshaders :"+gl.getShaderInfolog (셰이더));
returnnull;
}
ReturnShader;
}
3 단계 : 모델 데이터 생성/로드 -IngBuffers 이 작은 예에서는 모델 데이터가 기본적으로 직접 생성됩니다. 실제 프로그램에서는 이러한 데이터를 모델 로딩에서 얻어야합니다.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,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.Itemsize, 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 세계의 배경을 검은 색으로 설정 한 다음 투영 행렬을 설정하고 그릴 객체의 위치를 설정 한 다음 버퍼에서 vertex 및 색상 데이터에 따라 객체를 그립니다. 주제와 거의 관련이없는 투영 행렬 및 모델보기 직사각형 (Oak3D 그래픽 라이브러리의 행렬 보조 방법을 사용하여)을 생성하기위한 몇 가지 보조 방법이 있으므로 여기에서 자세히 설명하지는 않습니다.
기본적으로 많은 프로세스가 있습니다. 더 복잡한 질감, 빛 등이이를 기반으로 구현됩니다. 자세한 예제가 포함 된 아래 중국 자습서를 참조하십시오.
어때? 기본 WebGL 개발을 사용하는 것은 어떤가요? 깊은 3D 지식이 필요할뿐만 아니라 다양한 구현 세부 사항도 알아야합니다. WebGL은 다양한 응용 프로그램 시나리오에 유연하게 적응하기 위해이를 수행하지만 나와 같은 대부분의 비전문가에게는 많은 세부 사항이 알 필요가 없습니다. 이는이 섹션에 사용 된 OAK3D 라이브러리와 같은 개발 지원을위한 다양한 클래스 라이브러리를 일으켰습니다 (WebGL 개발을 보여주기 위해 매트릭스 지원 방법만이 예제에서 사용되었습니다). 다음 섹션에서는보다 널리 사용되는 3.js 그래픽 라이브러리를 소개합니다.
실제 참조 :중국 튜토리얼 : http://www.hiwebgl.com/?p=42
개발 센터 : https://developer.mozilla.org/en/webgl