WebGLShader
WebGLShader 는 WebGL API 의 일부이며 정점 혹은 프래그먼트 셰이더가 될 수 있다.
WebGLProgram
(en-US) 는 두 타입의 셰이더 모두를 요구한다.설명
WebGLShader 를 생성하려면 WebGLRenderingContext.createShader
(en-US)를 사용한다. 그러고 나서는 WebGLRenderingContext.shaderSource()
(en-US)를 사용해서 GLSL 소스 코드를 연결한다. 마지막으로WebGLRenderingContext.compileShader()
(en-US)를 호출하고 셰이더를 컴파일한다. 이 시점에서 WebGLShader 는 여전히 사용할 수 있는 형식은 아니고WebGLProgram
(en-US)에 부착되어야 한다.
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;
}
}
셰이더 부착에 관한 정보는 WebGLProgram
(en-US) 를 참고한다.
예시들
정점 셰이더 생성하기
셰이더 소스 코드 문자열들을 작성하고 접근하는 많은 다른 방법들이 있다는 점에 주목하라. 여기의 예는 오직 설명을 목적으로 한다.
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)
명세들
명세 | 상태 | 코멘트 |
---|---|---|
WebGL 1.0 The definition of 'WebGLShader' in that specification. |
Recommendation | Initial definition. |
브라우저 호환성
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 9 | 4.0 (2.0) | 11 | 12 | 5.1 |
Available in workers | No support | 44 (44) [1] | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | 25 | (Yes) | ? | 12 | 8.1 |
Available in workers | No support | No support | 44.0 (44) [1] | No support | No support | No support |
[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled
to true
.
See also
WebGLProgram
(en-US)WebGLRenderingContext.attachShader()
(en-US)WebGLRenderingContext.bindAttribLocation()
(en-US)WebGLRenderingContext.compileShader()
(en-US)WebGLRenderingContext.createProgram()
(en-US)WebGLRenderingContext.createShader()
(en-US)WebGLRenderingContext.deleteProgram()
(en-US)WebGLRenderingContext.deleteShader()
(en-US)WebGLRenderingContext.detachShader()
(en-US)WebGLRenderingContext.getAttachedShaders()
(en-US)WebGLRenderingContext.getProgramParameter()
(en-US)WebGLRenderingContext.getProgramInfoLog()
(en-US)WebGLRenderingContext.getShaderParameter()
(en-US)WebGLRenderingContext.getShaderPrecisionFormat()
(en-US)WebGLRenderingContext.getShaderInfoLog()
(en-US)WebGLRenderingContext.getShaderSource()
(en-US)WebGLRenderingContext.isProgram()
(en-US)WebGLRenderingContext.isShader()
(en-US)WebGLRenderingContext.linkProgram()
(en-US)WebGLRenderingContext.shaderSource()
(en-US)WebGLRenderingContext.useProgram()
(en-US)WebGLRenderingContext.validateProgram()
(en-US)