From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/webglshader/index.html | 171 ++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/ko/web/api/webglshader/index.html (limited to 'files/ko/web/api/webglshader') diff --git a/files/ko/web/api/webglshader/index.html b/files/ko/web/api/webglshader/index.html new file mode 100644 index 0000000000..b1bce2dc08 --- /dev/null +++ b/files/ko/web/api/webglshader/index.html @@ -0,0 +1,171 @@ +--- +title: WebGLShader +slug: Web/API/WebGLShader +translation_of: Web/API/WebGLShader +--- +
{{APIRef("WebGL")}}
+ +
WebGLShader 는 WebGL API 의 일부이며 정점 혹은 프래그먼트 셰이더가 될 수 있다. {{domxref("WebGLProgram")}} 는 두 타입의 셰이더 모두를 요구한다.
+ +
 
+ +

설명

+ +

WebGLShader 를 생성하려면 {{domxref("WebGLRenderingContext.createShader")}}를 사용한다. 그러고 나서는  {{domxref("WebGLRenderingContext.shaderSource()")}}를 사용해서 GLSL 소스 코드를 연결한다. 마지막으로{{domxref("WebGLRenderingContext.compileShader()")}}를 호출하고 셰이더를 컴파일한다. 이 시점에서 WebGLShader 는 여전히 사용할 수 있는 형식은 아니고{{domxref("WebGLProgram")}}에 부착되어야 한다.

+ +
function createShader (gl, sourceCode, type) {
+  // 셰이더 타입 gl.VERTEX_SHADER 또는 gl.FRAGMENT_SHADER 중 하나를 컴파일한다.
+  var shader = gl.createShader( type );
+  gl.shaderSource( shader, sourceCode );
+  gl.compileShader( shader );
+
+  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
+    var info = gl.getShaderInfoLog( shader );
+    throw "Could not compile WebGL program. \n\n" + info;
+  }
+}
+
+ +

셰이더 부착에 관한 정보는 {{domxref("WebGLProgram")}} 를 참고한다.

+ +

예시들

+ +

정점 셰이더 생성하기

+ +

셰이더 소스 코드 문자열들을 작성하고 접근하는 많은 다른 방법들이 있다는 점에 주목하라. 여기의 예는 오직 설명을 목적으로 한다.

+ +
var vertexShaderSource =
+  "attribute vec4 position;\n"
+  "void main() {\n"+
+  "  gl_Position = position;\n"+
+  "}\n";
+
+// 위 예시로부터 createShader 함수를 사용한다.
+var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER)
+
+ +

프래그먼트 셰이더 생성하기

+ +
var fragmentShaderSource =
+  "void main() {\n"+
+  "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
+  "}\n";
+
+// 위 예시로부터 createShader 함수를 사용한다.
+var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER)
+
+ +

명세들

+ + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('WebGL', "#5.8", "WebGLShader")}}{{Spec2('WebGL')}}Initial definition.
+ +

브라우저 호환성

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatUnknown}}128.1
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf