[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ] [ WebGL ]
WebGLRenderingContext.createShader()
[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]
createShader(type)
Przykłady:
// tworzy moduł cieniujący
function createShader(gl, typ, dane) {
// Kompiluje moduł cieniujący typu gl.VERTEX_SHADER lub gl.FRAGMENT_SHADER
// metoda tworzy plik WebGLShader, który można następnie konfigurować
const daneShader = gl.createShader(typ);
// metoda ustawia kod źródłowy pliku WebGLShader.
gl.shaderSource(daneShader, dane);
// metoda kompiluje moduł cieniujący
gl.compileShader(daneShader);
// jeżeli błąd createShader
if ( !gl.getShaderParameter(daneShader, gl.COMPILE_STATUS)) {
const eInformacja = gl.getShaderInfoLog(daneShader);
const eTyp = gl.getShaderSource(daneShader);
throw "Nie można skompilować Shader WebGL. \n\n" + eInformacja + ", " + eTyp;
}
return daneShader
}
function createWebGLProgram(gl, vertexSource, fragmentSource) {
var vertexShader = createShader( gl, vertexSource, gl.VERTEX_SHADER );
var fragmentShader = createShader( gl, fragmentSource, gl.FRAGMENT_SHADER );
return linkProgram( gl, vertexShader, fragmentShader );
}
// moduł cieniujący
function createShader(gl, source, type) {
console.log(source); // HTMLCanvasElement
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
const wynik = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!wynik) {
alert((type == gl.VERTEX_SHADER ? " VERTEX " : " FRAGMENT ") + " SHADER:\n" + gl.getShaderInfoLog(shader));
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
console.log(gl.getShaderInfoLog(shader));
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertex_shader);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragment_shader);
<!-- vertex shader -->
<script id="vertex-shader-3d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec2 a_texcoord;
attribute vec4 a_color;
uniform mat4 u_matrix;
varying vec2 v_texcoord;
varying vec4 v_color;
void main() {
// Pomnóż pozycję przez macierz
gl_Position = u_matrix * a_position;
// Przekaż texcoord do Fragment Shadera
v_color = a_color;
//
v_texcoord = a_texcoord;
}
</script>
<!-- fragment shader -->
<script id="fragment-shader-3d" type="x-shader/x-fragment">
precision mediump float;
// Przekazane z modułu cieniującego wierzchołków
varying vec4 v_color;
uniform vec4 u_colorMult;
// Przekazane z modułu cieniującego wierzchołków
varying vec2 v_texcoord;
// Tekstura
uniform sampler2D u_texture;
void main() {
//gl_FragColor = v_color * u_colorMult;
//gl_FragColor = texture2D(u_texture, v_texcoord);
gl_FragColor = v_color - u_colorMult + texture2D(u_texture, v_texcoord);
}
</script>
<!-- shader -->
<script id="vertex-shader" type="x-shader/x-vertex">
//Każdy punkt ma swoją pozycję i kolor
attribute vec3 position;
attribute vec4 color;
// Macierze transformacji
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
// Przekaż atrybut koloru do modułu cieniującego fragmentów
varying vec4 vColor;
// wszystkie shadery mają funkcję główną
void main() {
// Przekaż kolor do Fragment Shadera
vColor = color;
// gl_Position to specjalna zmienna modułu cieniującego wierzchołków
// jest odpowiedzialny za ustawienie
// Przeczytaj mnożenie w odwrotnej kolejności z której pobierany jest punkt
// oryginalna przestrzeń modelu i przeniesiona do przestrzeni świata
// To wtedy rzutowany na przestrzeń klipu jako jednorodny punkt.
// Generalnie wartość W będzie na końcu inna niż 1.
gl_Position = projection * view * model * vec4( position, 1.0 );
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
// fragment-shader Fragment Shadery nie mają domyślnej precyzji, więc tego potrzebujemy
// aby wybrać jedno. mediump jest dobrym ustawieniem domyślnym
// precision mediump float;
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
// gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
// gl_FragColor to specjalna zmienna modułu cieniującego fragmenty
// jest odpowiedzialny za ustawienie
// gl_FragColor = vec4(1, 0.3, 0.3, 1); // zwraca czerwono-fioletowy
// gl_FragColor na 1, 0, 0.5, 1. Ponieważ płótno jest płótnem 8-bitowym na kanał,
// oznacza to, że WebGL zapisze wartości [255, 0, 127, 255] w kanwie
}
</script>
// shader wierzchołków
const vertexShaderSource =
"attribute vec4 position;\n" +
"void main() {\n" +
" gl_Position = position;\n" +
"}\n";
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
// shader fragmentów
const fragmentShaderSource =
"void main() {\n" + " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";
const fragmentShader = createShader(
gl,
fragmentShaderSource,
gl.FRAGMENT_SHADER,
);
Opis:
Metoda WebGLRenderingContext.createShader() tworzy obiekt WebGLRenderingContext, który można następnie dalej konfigurować za pomocą poleceń.
- WebGLShaderWebGLRenderingContext.shaderSource()
- WebGLRenderingContext.compileShader()
Parametry type albo gl.VERTEX_SHADERalbo, gl.FRAGMENT_SHADER. Wartość zwracana, Nowy (WebGLShader).
WebGLShader jest częścią API WebGL i może być albo shaderem wierzchołków, albo shaderem fragmentów. A wymaga obu typów shaderów WebGLProgram.
WebGLShader jest częścią API WebGL i może być albo shaderem wierzchołków, albo shaderem fragmentów. A wymaga obu typów shaderów w WebGLProgram.
WebGLObject <--- WebGLShader
Aby utworzyć WebGLShader użyj WebGLRenderingContext.createShader, następnie podłącz kod źródłowy GLSL używając WebGLRenderingContext.shaderSource(), a na końcu wywołaj WebGLRenderingContext.compileShader(), aby zakończyć i skompilować shader. W tym momencie WebGLShader nadal nie jest w użytecznej formie i nadal musi być dołączony do WebGLProgram - informacje dotyczące dołączania shaderów.
Zobacz też:
WebGLProgram -
WebGLRenderingContext.attachShader() -
WebGLRenderingContext.bindAttribLocation() -
WebGLRenderingContext.compileShader() -
createProgram() - tworzy i inicjuje WebGLProgram obiekt, tworzenie programu WebGL
WebGLRenderingContext.createShader() -
WebGLRenderingContext.deleteProgram() -
WebGLRenderingContext.deleteShader() -
WebGLRenderingContext.detachShader() -
WebGLRenderingContext.getAttachedShaders() -
WebGLRenderingContext.getProgramParameter() -
WebGLRenderingContext.getProgramInfoLog() -
WebGLRenderingContext.getShaderParameter() -
WebGLRenderingContext.getShaderPrecisionFormat() -
WebGLRenderingContext.getShaderInfoLog() -
WebGLRenderingContext.getShaderSource() -
WebGLRenderingContext.isProgram() -
WebGLRenderingContext.isShader() -
WebGLRenderingContext.linkProgram() -
WebGLRenderingContext.shaderSource() -
WebGLRenderingContext.useProgram() -
WebGLRenderingContext.validateProgram() -