[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ] [ WebGL ]

WebGLRenderingContext.createFramebuffer()

[_] [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]

createFramebuffer()

Przykłady: 

function createTextureFramebuffer(gl, width, height) {

 const tex = gl.createTexture();

 gl.bindTexture(gl.TEXTURE_2D, tex);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 

 const fb = gl.createFramebuffer();
 gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);

 if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
 console.log("BRAK KOMPLETNEGO BUFERA RAMKI");
 }
 
 if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
 console.log("BUFOR RAMKI KOMPLETNY");
 } 
 
 return {tex: tex, fb: fb};
 
 }

 const buf = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buf);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
 -1, -1,
 1, -1,
 -1, 1,
 -1, 1,
 1, -1,
 1, 1,
 ]), gl.STATIC_DRAW);

 const colorProgram = gl.getAttribLocation(glProgramColor, "a_position");

 gl.enableVertexAttribArray(colorProgram);
 gl.vertexAttribPointer(colorProgram, 2, gl.FLOAT, false, 0, 0);
 
 const colorLocation = gl.getUniformLocation(glProgramColor, "u_color");
 const colorProgLocation = gl.getUniformLocation(glProgramColor, "u_matrix");

 gl.useProgram(glProgramColor);
 
 const texFb1 = createTextureFramebuffer(gl, 100, 100);
 const texFbcopy = createTextureFramebuffer(gl, 1, 1);
 
 gl.bindFramebuffer(gl.FRAMEBUFFER, texFb1.fb);

 gl.viewport(0, 0, 100, 100);
 gl.uniform4fv(colorLoc, [0, 0, 1, 1]);
 gl.uniformMatrix4fv(colorProgMatrixLoc, false, [
 0.25, 0, 0, 0,
 0,.5, 0, 0,
 0, 0, 1, 0,
 .2,.3, 0, 1,
 ]);

 gl.drawArrays(gl.TRIANGLES, 0, 6);

 gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 50, 100, 100, 50, 0);
 
 gl.bindFramebuffer(gl.FRAMEBUFFER, null); 

 const tekstura1 = {
 width: 100,
 height: 100,
 texture: texFb1.tex,
 };
 const drawTekstura1 = {
 x: 0,
 y: 0,
 textureInfo: tekstura1,
 };
 draw.push(drawTekstura1);

 const teksturaCopy = {
 width: 100,
 height: 45,
 texture: texFbcopy.tex,
 };
 const drawTeksturaCopy = {
 x: 10,
 y: 250,
 textureInfo: teksturaCopy, 
 };
 draw.push(drawTeksturaCopy);

 rysujObraz(
 draw[0].textureInfo.texture,
 draw[0].textureInfo.width,
 draw[0].textureInfo.height,
 draw[0].x,
 draw[0].y); 

 rysujObraz(
 draw[1].textureInfo.texture,
 draw[1].textureInfo.width,
 draw[1].textureInfo.height,
 draw[1].x,
 draw[1].y); 

 function rysujObraz(tekstura, teksturaWidth, teksturaHeight, obrazX, obrazY) {
 
 gl.bindTexture(gl.TEXTURE_2D, tekstura);
 gl.enableVertexAttribArray(positionLocation);
 gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
 gl.enableVertexAttribArray(texcoordLocation);
 gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0);
 var matrix = macierzPro(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
 matrix = translacja(matrix, obrazX, obrazY, 0);
 matrix = skalowanie(matrix, teksturaWidth, teksturaHeight, 1);
 gl.uniformMatrix4fv(matrixLocation, false, matrix);
 
 gl.uniform1i(textureLocation, 0);
 gl.drawArrays(gl.TRIANGLES, 0, 6);
 
 gl.disableVertexAttribArray( positionLocation );
 
}

Opis:
Metoda WebGLRenderingContext.createFramebuffer() tworzy i inicjuje WebGLFramebufferobiekt. Wartość zwracana obiekt WebGLFramebuffer. Tworzenie bufora ramki.

Zobacz też: