Hello Klaus,
I asked you before, about this topic. Now I've got the time to experiment a bit, but reached a wall, where I can't get further. When I switch to a different program in my framebuffer drawing function, there is a error thrown by webgl.
[.Offscreen-For-WebGL-0x7fd0ffc4e600]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to render with no buffer attached to enabled attribute 2
It seems the vertexAttributes aren't enabled, after I restore the krpano state.
To get to the root source of the error, I simplified the script to just render the triangle / square demo from learningwebgl.com to the framebuffer. Now there isn't any error, but the hotspot is only rendered black. Maybe you could give me a hint, how It could work.
Code
function krpanoplugin() {
var self = this;
var krPano = null;
var device = null;
var plugin = null;
var gl = null;
var fragment = "precision mediump float; varying vec4 vColor; " +
"void main(void) {" +
"gl_FragColor = vColor;" +
"}";
var vertex = "attribute vec3 aVertexPosition;" +
"attribute vec4 aVertexColor;" +
"uniform mat4 uMVMatrix;" +
"uniform mat4 uPMatrix;" +
"varying vec4 vColor;" +
"void main(void) {" +
"gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor;}";
var shaderProgram;
var fragmentShader;
var vertexShader;
var framebuffer;
// registerplugin - startup point for the plugin (required)
// - krpanointerface = krpano interface object
// - pluginpath = the fully qualified plugin name (e.g. "plugin[name]")
// - pluginobject = the xml plugin object itself
self.registerplugin = function (krpanointerface, pluginpath, pluginobject) {
// get the krpano interface and the plugin object
krPano = krpanointerface;
device = krPano.device;
plugin = pluginobject;
// first - say hello
krPano.trace(1, "hello from plugin[" + plugin.name + "]");
if (krPano.version < "1.19") {
krPano.trace(3, "ThreeJS plugin - too old krPano version (min. 1.19)");
return;
}
if (!device.webgl) {
// show warning
krPano.trace(2, "ThreeJS plugin - WebGL required");
return;
}
krPano.debugmode = true;
krPano.trace(0, "krpano plugin");
gl = krPano.webGL.context;
fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
krPano.trace(3, gl.getShaderInfoLog(fragmentShader));
return null;
}
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
krPano.trace(3, gl.getShaderInfoLog(vertexShader));
return null;
}
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
krPano.trace(3, "Could not initialise shaders");
}
// load the requiered three.js scripts
initBuffers();
plugin.generateText = setTexture;
};
function restore_krpano_WebGL_state() {
gl.disable(gl.DEPTH_TEST);
gl.cullFace(gl.FRONT);
gl.frontFace(gl.CCW);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.activeTexture(gl.TEXTURE0);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
// debugger;
// restore the current krpano WebGL program
krPano.webGL.restoreProgram();
// console.log("krpano restored");
//renderer.resetGLState();
}
// unloadplugin - exit point for the plugin (optionally)
// - will be called from krpano when the plugin will be removed
// - everything that was added by the plugin should be removed here
self.unloadplugin = function () {
plugin = null;
krPano = null;
}
function setTexture(hotspot) {
if (hotspot.GL) {
// debugger;
gl.getExtension('OES_standard_derivatives');
var texture = hotspot.GL.tex;
framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
framebuffer.width = 512;
framebuffer.height = 512;
if (texture) {
// use the krpano onviewchanged event as render-frame callback (this event will be directly called after the krpano pano rendering)
krPano.set("events[__textGenerator__].keep", true);
// krpano.set("events[__textGenerator__].onviewchange", adjust_krpano_rendering); // correct krpano view settings before the rendering
krPano.set("events[__textGenerator__].onviewchanged", function renderTextureHandler() {
renderTexture(framebuffer);
});
// do some stuff with the texture - e.g. bind it to a custom framebuffer:
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
var renderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, framebuffer.width, framebuffer.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);
//
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindTexture(gl.TEXTURE_2D, null);
}
restore_krpano_WebGL_state();
}
}
function drawFB() {
gl.viewport(0, 0, framebuffer.width, framebuffer.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// gl.clearColor(1.0, 1.0, 0.0, 1.0);
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
function renderTexture(framebuffer) {
var sw = gl.drawingBufferWidth;
var sh = gl.drawingBufferHeight;
// generateText.refreshText(gl, FBO);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
drawFB();
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
restore_krpano_WebGL_state();
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;
var squareVertexPositionBuffer;
var squareVertexColorBuffer;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;
triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4;
triangleVertexColorBuffer.numItems = 3;
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
colors = [];
for (var i = 0; i < 4; i++) {
colors = colors.concat([0.5, 0.5, 1.0, 1.0]);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
squareVertexColorBuffer.itemSize = 4;
squareVertexColorBuffer.numItems = 4;
}
}I use the glMatrix-0.9.5.min.js library to calculate the matrices. To call the function just use
Code
generateText(hotspot)Thank you very much for your help.
