WebGL - Revision history

Maintenance script: Repair MoniWiki formatting after migration

2026-03-29T00:34:32Z

Repair MoniWiki formatting after migration

← Older revision		Revision as of 00:34, 29 March 2026
Line 3:		Line 3:
	[http://www.khronos.org/registry/webgl/specs/latest/1.0/ Spec]		[http://www.khronos.org/registry/webgl/specs/latest/1.0/ Spec]
	== 기본 컨셉 ==		== 기본 컨셉 ==
	OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 OpenGL ES(Embeded System)의 Javascript 구현체이며 HTML5 [[canvas\|Canvas]]를 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.		OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 [[OpenGL]] ES(Embeded System)의 Javascript 구현체이며 HTML5 [[canvas\|Canvas]]를 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.
	== 특징 ==		== 특징 ==
	Javascript임에도 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. [[WinAPI]]가 C스타일의 [[OOP]]이듯 WebGL 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.		Javascript임에도 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. [[WinAPI]]가 C스타일의 [[OOP]]이듯 [[WebGL]] 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.
	var gl = canvas.getContext("experimental-webgl");		var gl = canvas.getContext("experimental-webgl");
	gl.attachShader(shaderProgram, fragmentShader);		gl.attachShader(shaderProgram, fragmentShader);
Line 24:		Line 24:
	=== 파이프 라인 ===		=== 파이프 라인 ===
	WebGL은 일정한 흐름구조를 만들어 두고 그 각부분을 만들수 있도록 해 두었다. 아마 최적화가 쉬운 탓에 그러했으리고 생각된다.		WebGL은 일정한 흐름구조를 만들어 두고 그 각부분을 만들수 있도록 해 두었다. 아마 최적화가 쉬운 탓에 그러했으리고 생각된다.
	WebGL.png WebGl파이프라인		[[WebGL]].png WebGl파이프라인
	Attribute는 각 포인트 별로 전달되는 정보이고 uniform 은 전체에서 공통적인 정보이다. 일반적으로 Attribute는 각 정점의 위치 정보와 각 지점의 법선 벡터 정보를을 전달한다. uniform은 일반적으로 카메라의 위치나 환경광의 위치처럼 전체적인 것을 전달한다. Attribute나 uniform은 일종의 변수인데 핸들을 얻어와서 그것을 통해 값을 전달할수 있다. 즉 Atrribute나 Uniform은 Javascript측에서 쉐이더로 정보를 보내는 것이다. varying은 쉐이더 간의 정보 전달에 사용된다. vertex shader에서 fragment shader로 값이 전달되며 반대는 불가능하다(파이프라인 구조상 당연한 것이다). 이때 vertex shader는 각 정점(꼭지점) fragment shader는 각 픽셀에 한번 호출되게 되는데 각 정점 사이의 값들은 보간법을 거쳐 전달되게 된다(그라디언트 같은 느낌이다 중간값을 알아서 만들어 준다).		Attribute는 각 포인트 별로 전달되는 정보이고 uniform 은 전체에서 공통적인 정보이다. 일반적으로 Attribute는 각 정점의 위치 정보와 각 지점의 법선 벡터 정보를을 전달한다. uniform은 일반적으로 카메라의 위치나 환경광의 위치처럼 전체적인 것을 전달한다. Attribute나 uniform은 일종의 변수인데 핸들을 얻어와서 그것을 통해 값을 전달할수 있다. 즉 Atrribute나 Uniform은 Javascript측에서 쉐이더로 정보를 보내는 것이다. varying은 쉐이더 간의 정보 전달에 사용된다. vertex shader에서 fragment shader로 값이 전달되며 반대는 불가능하다(파이프라인 구조상 당연한 것이다). 이때 vertex shader는 각 정점(꼭지점) fragment shader는 각 픽셀에 한번 호출되게 되는데 각 정점 사이의 값들은 보간법을 거쳐 전달되게 된다(그라디언트 같은 느낌이다 중간값을 알아서 만들어 준다).

Maintenance script: Repair batch-0004 pages from live compare

2026-03-27T00:37:09Z

Repair batch-0004 pages from live compare

Show changes

imported>qa22ahj at 02:22, 4 April 2014

2014-04-04T02:22:25Z

← Older revision		Revision as of 02:22, 4 April 2014
Line 323:		Line 323:
	= Link =		= Link =
	http://greggman.github.io/webgl-fundamentals/webgl/lessons/webgl-how-it-works.html		http://greggman.github.io/webgl-fundamentals/webgl/lessons/webgl-how-it-works.html
			https://developer.mozilla.org/en-US/docs/Web/WebGL

imported>qa22ahj at 01:46, 2 April 2014

2014-04-02T01:46:31Z

← Older revision		Revision as of 01:46, 2 April 2014
Line 321:		Line 321:

	계속 작성중.		계속 작성중.
			= Link =
			http://greggman.github.io/webgl-fundamentals/webgl/lessons/webgl-how-it-works.html

imported>qa22ahj at 03:07, 31 October 2013

2013-10-31T03:07:26Z

imported>qa22ahj at 13:29, 30 October 2013

2013-10-30T13:29:21Z

← Older revision		Revision as of 13:29, 30 October 2013
Line 5:		Line 5:
	OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 OpenGL ES(Embeded System)의 Javascript 구현체이며 HTML5 Canvas를 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.		OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 OpenGL ES(Embeded System)의 Javascript 구현체이며 HTML5 Canvas를 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.
	== 특징 ==		== 특징 ==
	Javascript임에도 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. ~~WinApi가~~ C스타일의 ~~OOP이듯~~ WebGL 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.		Javascript임에도 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. [[WinAPI]]가 C스타일의 [[OOP]]이듯 WebGL 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.
	var gl = canvas.getContext("experimental-webgl");		var gl = canvas.getContext("experimental-webgl");
	gl.attachShader(shaderProgram, fragmentShader);		gl.attachShader(shaderProgram, fragmentShader);

imported>qa22ahj at 00:58, 28 October 2013

2013-10-28T00:58:23Z

← Older revision		Revision as of 00:58, 28 October 2013
Line 1:		Line 1:
	__TOC__		__TOC__

			[http://www.khronos.org/registry/webgl/specs/latest/1.0/ Spec]
	== 기본 컨셉 ==		== 기본 컨셉 ==
	OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 OpenGL ES(Embeded System)의 Javascript 구현체이며 HTML5 Canvas를 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.		OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 OpenGL ES(Embeded System)의 Javascript 구현체이며 HTML5 Canvas를 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.

	== 특징 ==		== 특징 ==
	Javascript임에도 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. WinApi가 C스타일의 OOP이듯 WebGL 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.		Javascript임에도 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. WinApi가 C스타일의 OOP이듯 WebGL 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.

imported>qa22ahj at 12:23, 27 October 2013

2013-10-27T12:23:09Z

← Older revision		Revision as of 12:23, 27 October 2013
Line 316:		Line 316:
	this._private.gl.uniformMatrix4fv(this.getUniformLocation(name), false, arr);		this._private.gl.uniformMatrix4fv(this.getUniformLocation(name), false, arr);
	}		}

			== WebGL의 좌표계 ==
			OpenGL과 동일한 -1.0 ~ 1.0이며 이를 넘어갈시에는 표현되지 않는다. 매트릭스 연산을 직접해야만 하는 WebGL에서는 이점이 간과되기 쉬워서 이미 그린 페이지가 어디에 있는지 찾는 현상이 발생하게 된다.

	계속 작성중.		계속 작성중.

imported>qa22ahj at 11:29, 28 January 2013

2013-01-28T11:29:22Z

← Older revision		Revision as of 11:29, 28 January 2013
Line 38:		Line 38:
	== 예제코드 ==		== 예제코드 ==
	아래 코드는 정확하지 않으며 연습 도중의 코드입니다. 또한 WebGL의 특성상 코드가 분산되어 있습니다. 현재 객체 래핑을 진행중입니다.		아래 코드는 정확하지 않으며 연습 도중의 코드입니다. 또한 WebGL의 특성상 코드가 분산되어 있습니다. 현재 객체 래핑을 진행중입니다.

			현재 객체 래핑중 중대한 문제에 봉착. 대부분의 모듈과 세이더 코드는 콜백으로 호출되는데 이것을 적절히 래핑할 방법이 없다. webGL과는 하등 연관이 없는 부분이라서 각자 알아서 구현하도록 해도 되지만 대부분의 경우 같은 코드를 다스 짜고 있는 나를 보게 된다. 이것을 어떻게 해야 잘한 래핑이라 할수 있을까?
	==== vertexShader ====		==== vertexShader ====
	attribute vec3 aVertexPosition;		attribute vec3 aVertexPosition;

imported>qa22ahj at 17:10, 24 January 2013

2013-01-24T17:10:22Z

← Older revision		Revision as of 17:10, 24 January 2013
Line 87:		Line 87:
	gl_FragColor = vFinalColor + vec4(0.01,0.01,0.01, 1.0);		gl_FragColor = vFinalColor + vec4(0.01,0.01,0.01, 1.0);
	}		}
	====javascript====		==== javascript ====
	var cube = {		var cube = {
	"vertices": [		"vertices": [

← Older revision		Revision as of 03:07, 31 October 2013
Line 3:		Line 3:
	[http://www.khronos.org/registry/webgl/specs/latest/1.0/ Spec]		[http://www.khronos.org/registry/webgl/specs/latest/1.0/ Spec]
	== 기본 컨셉 ==		== 기본 컨셉 ==
	OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 OpenGL ES(Embeded System)의 Javascript 구현체이며 HTML5 ~~Canvas를~~ 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.		OpenGL에서 정말 실무에서 쓰는 부분만 따로 떼어낸 OpenGL ES(Embeded System)의 Javascript 구현체이며 [[HTML5]] [[canvas\|Canvas]]를 통해 나타난다. 따라서 초보자가 쉽게 배우는데에 초점이 맞추어져 있지 않고 오직 전문가가 구현을 하는데에 초점이 맞추어져 있다.
	== 특징 ==		== 특징 ==
	~~Javascript임에도~~ 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. [[WinAPI]]가 C스타일의 [[OOP]]이듯 WebGL 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.		[[Javascript]]임에도 불구하고 마치 C프로그래밍 스타일의 함수들이 존재한다. [[WinAPI]]가 C스타일의 [[OOP]]이듯 WebGL 또한 C스타일의 OOP이다. 모든 함수는 WebGLcontext라는 객체에 있는데 보면 그냥 접두어를 붙이는 느낌이다.
	var gl = canvas.getContext("experimental-webgl");		var gl = canvas.getContext("experimental-webgl");
	gl.attachShader(shaderProgram, fragmentShader);		gl.attachShader(shaderProgram, fragmentShader);
	gl.attachShader(shaderProgram, vertexShader);		gl.attachShader(shaderProgram, vertexShader);
	위의 코드를 보면 쉐이더 프로그램에 fragmentShader와 vertexShader를 Link 시키는 구문인데 주체인 shaderProgram은 첫번쨰 인자이고 gl은 그냥 접두어 처럼 보인다. 저 구문만 그런것이 아니라 다른 모든 함수들이 저 gl 객체에 붙어있다. 하지만 정작 gl이 주체가 아닌 것들이 많다. 따라서 래핑한 객체를 만들어 쓰는 것이 속편한데 어설프게 했다가는 무척 꼬이게 된다.		위의 코드를 보면 [[쉐이더]] 프로그램에 fragmentShader와 vertexShader를 Link 시키는 구문인데 주체인 shaderProgram은 첫번쨰 인자이고 gl은 그냥 접두어 처럼 보인다. 저 구문만 그런것이 아니라 다른 모든 함수들이 저 gl 객체에 붙어있다. 하지만 정작 gl이 주체가 아닌 것들이 많다. 따라서 래핑한 객체를 만들어 쓰는 것이 속편한데 어설프게 했다가는 무척 꼬이게 된다.

	이 관습은 ~~OpenGL이~~ 기본적으로 C라이브러리이라 그런듯 하다. 실제 래핑을 진행해본결과 마치 MFC를 보는듯한 느낌을 강하게 받고 있다.		이 관습은 [[OpenGL]]이 기본적으로 C라이브러리이라 그런듯 하다. 실제 래핑을 진행해본결과 마치 MFC를 보는듯한 느낌을 강하게 받고 있다.

	=== OpenGL과 차이점 ===		=== OpenGL과 차이점 ===
Line 25:		Line 25:
	WebGL은 일정한 흐름구조를 만들어 두고 그 각부분을 만들수 있도록 해 두었다. 아마 최적화가 쉬운 탓에 그러했으리고 생각된다.		WebGL은 일정한 흐름구조를 만들어 두고 그 각부분을 만들수 있도록 해 두었다. 아마 최적화가 쉬운 탓에 그러했으리고 생각된다.
	<nowiki>[[File:WebGL.png]] WebGl파이프라인</nowiki>		<nowiki>[[File:WebGL.png]] WebGl파이프라인</nowiki>
	Attribute는 각 포인트 별로 전달되는 정보이고 uniform 은 전체에서 공통적인 정보이다. 일반적으로 Attribute는 각 정점의 위치 정보와 각 지점의 법선 벡터 정보를을 전달한다. uniform은 일반적으로 카메라의 위치나 환경광의 위치처럼 전체적인 것을 전달한다. Attribute나 uniform은 일종의 변수인데 핸들을 얻어와서 그것을 통해 값을 전달할수 있다. 즉 Atrribute나 Uniform은 Javascript측에서 쉐이더로 정보를 보내는 것이다. varying은 쉐이더 간의 정보 전달에 사용된다. vertex shader에서 fragment shader로 값이 전달되며 반대는 불가능하다(파이프라인 구조상 당연한 것이다). 이때 vertex shader는 각 정점(꼭지점) fragment shader는 각 픽셀에 한번 호출되게 되는데 각 정점 사이의 값들은 ~~보간법을~~ 거쳐 전달되게 된다(그라디언트 같은 느낌이다 중간값을 알아서 만들어 준다).		Attribute는 각 포인트 별로 전달되는 정보이고 uniform 은 전체에서 공통적인 정보이다. 일반적으로 Attribute는 각 정점의 위치 정보와 각 지점의 법선 벡터 정보를을 전달한다. uniform은 일반적으로 카메라의 위치나 환경광의 위치처럼 전체적인 것을 전달한다. Attribute나 uniform은 일종의 변수인데 핸들을 얻어와서 그것을 통해 값을 전달할수 있다. 즉 Atrribute나 Uniform은 Javascript측에서 쉐이더로 정보를 보내는 것이다. varying은 쉐이더 간의 정보 전달에 사용된다. vertex shader에서 fragment shader로 값이 전달되며 반대는 불가능하다(파이프라인 구조상 당연한 것이다). 이때 vertex shader는 각 정점(꼭지점) fragment shader는 각 픽셀에 한번 호출되게 되는데 각 정점 사이의 값들은 [[보간법]]을 거쳐 전달되게 된다(그라디언트 같은 느낌이다 중간값을 알아서 만들어 준다).

	각 쉐이더는 동시에 동작할수 있는데 당연히 이들은 서로간에 독립적이어야 한다.		각 쉐이더는 동시에 동작할수 있는데 당연히 이들은 서로간에 독립적이어야 한다.

	=== 쉐이더 ===		=== 쉐이더 ===
	쉐이더는 쉐이더 언어로 따로 짜주고 컴파일 해야하며 심지어 링크까지 시켜주어야 한다. GPU의 강력한 ~~행렬연산~~ 능력을 가져다 쓰기 위해서인것으로 보이는데 이것을 사용하지 않고서는 예제파일도 돌려볼수가 없다. 다행이 언어는 C언어와 매우 유사하고 행렬연산이 모두 있기 때문에 딱히 어렵거나 하진 않다. 다만 어느부분에서 어디와 연결되는지 이해하는데 시간이 걸린다.		쉐이더는 쉐이더 언어로 따로 짜주고 컴파일 해야하며 심지어 링크까지 시켜주어야 한다. GPU의 강력한 [[행렬]]연산 능력을 가져다 쓰기 위해서인것으로 보이는데 이것을 사용하지 않고서는 예제파일도 돌려볼수가 없다. 다행이 언어는 C언어와 매우 유사하고 행렬연산이 모두 있기 때문에 딱히 어렵거나 하진 않다. 다만 어느부분에서 어디와 연결되는지 이해하는데 시간이 걸린다.
	==== vertex shader ====		==== vertex shader ====
	각 정점(vertex, 꼭지점)마다 호출되며 주로 꼭지점의 위치를 연산하고 실제 View에 투영하는 연산을 주로 하게 된다. 한마디로 모델의 위치 변환과 카메라 시점에 따른 변환 원근법을 적용하는 변환등을 수행한다.		각 정점(vertex, 꼭지점)마다 호출되며 주로 꼭지점의 위치를 연산하고 실제 View에 투영하는 연산을 주로 하게 된다. 한마디로 모델의 위치 변환과 카메라 시점에 따른 변환 원근법을 적용하는 변환등을 수행한다.
Line 39:		Line 39:
	아래 코드는 정확하지 않으며 연습 도중의 코드입니다. 또한 WebGL의 특성상 코드가 분산되어 있습니다. 현재 객체 래핑을 진행중입니다.		아래 코드는 정확하지 않으며 연습 도중의 코드입니다. 또한 WebGL의 특성상 코드가 분산되어 있습니다. 현재 객체 래핑을 진행중입니다.

	현재 객체 래핑중 중대한 문제에 봉착. 대부분의 모듈과 세이더 코드는 ~~콜백으로~~ 호출되는데 이것을 적절히 래핑할 방법이 없다. webGL과는 하등 연관이 없는 부분이라서 각자 알아서 구현하도록 해도 되지만 대부분의 경우 같은 코드를 다스 짜고 있는 나를 보게 된다. 이것을 어떻게 해야 잘한 래핑이라 할수 있을까?		현재 객체 래핑중 중대한 문제에 봉착. 대부분의 모듈과 세이더 코드는 [[콜백]]으로 호출되는데 이것을 적절히 래핑할 방법이 없다. webGL과는 하등 연관이 없는 부분이라서 각자 알아서 구현하도록 해도 되지만 대부분의 경우 같은 코드를 다스 짜고 있는 나를 보게 된다. 이것을 어떻게 해야 잘한 래핑이라 할수 있을까?
	==== vertexShader ====		==== vertexShader ====
	attribute vec3 aVertexPosition;		attribute vec3 aVertexPosition;