A while ago, Google made a blogpost about the change of the projection for 360 videos. It seems, this improves the overall quality of the videos.
As Google now uses this type of videos on YouTube, I made a test video, which I uploaded to YouTube and downloaded it, after its conversion. The resulting image is attached to this post.
Are there any plans to support this projection type with the videoplayer plugin?
Is would be really helpful, if you could provide examples where the behaviour occurs and a meaningful explanation of the issues.
What 'background' do you mean and how can it go dark...?Sorry, but generally - without knowing your case/example I can't help.
Maybe open a thread and post there all details - example-links, browser, system and so on...
I discovered the error too. It seems the renderCycle is evaluated, after the krpano DOM element is removed. And in the script it tries to access the style property of that element. But while the element is gone, its throwing the undefined error.
Hello Klaus,
thank you for the steady development.
Unfortunately their occured a bug in this release, which regards the Samsung VR Browser.
When I start the WebVR Example and click on Start VR, the Browser goes fullscreen, but Web VR isn't initialized.
In the console the warning: submitFrame must be called within a VRDisplay.requestAnimationFrame callback. is logged.
Hello,
when I open the krpano tools in OSX 10.12.16, the error:
Fatal Error:
Missing File: /private/var/folders/..../d/krpanotools
Can I fix this anyway?
Hello Klaus,
would you be so kind, and implement support for the Device ZTE Axon 7 (ID "zte-a2017", screensize 5.5) in combination with Daydream? Actually the screen is split and the gyroscope of the device isn't used. Also the low persistance mode isn't activated. The website webvr.info is working on daydream, so it is possible.
Thanks for the great work on krpano. 
When I add an hotspot with the text attribute, is it not shown, until I add width and height. Is it possible to autosize the hotspot, using the text width?
There was a css style, which applied on the table element, which krPano creates. So it's no bug in krPano. But maybe you should namespace the elements, so it won't happen per accident.
When I add an hotspot with the text attribute, is it not shown, until I add width and height. Is it possible to autosize the hotspot, using the text width?
Hallo,
ich versuche Hotspots mittels Javascript zu erstellen und möchte dabei verhindern, dass sich die Hotspots überlappen.
Wie kann ich die Zielkoordinaten mittels der Breite des ursprünglichen Hotstpots berechnen?
So i got it now. 
The texture was drawn on the front of the hotspot, but the hotspot.rx is set to 1 and I viewed the back. After setting gl.cullFace(gl.BACK) the texture was visible but upside down. So I now have to decide to rotate the hotspot or the texture.
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.
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
generateText(hotspot)Thank you very much for your help.
As in this thread discussed, there are indeed restrictions regarding the maximal video dimensions of the H264 codec.
The provided example won't load the files, as they are not found. So maybe you could provide some working links to prove you're argument, that the videos are playing in the browser.
Hello Klaus,
thanks for all the great work.
Actually we're testing the new VRone Plus and discovered a stuttering with the Samsung S6.
As you noted in the documentation, this is caused by the mobilevr_lens_dist2 parameter.
Would it be possible to use only mobilevr_lens_dist for this glasses?
I use the looktohotspot function before loading a new pano to zoom into the scene. Before the pr5, this worked fine. But with pr5 the hlookat, vlookat and fov aren't resetted to the view settings of the new xml. Instead it's overwritten by the target from the looktohospot function. Is this a bug or a intended behavior?
Hello Klaus.
In the documentation of the makepano tool you are suggest to obtain squared tiles and a size of 512px for better performance. I have tried your multi resolution template on serveral files in the size of 5000x2500px and 10000x5000px. But the resulted files are often not squared. There are many small rectangular files.
How much does this impact on the performance?
Is it possible to generate only squared tiles, or this even needed?
Could you explain, how the resolution is related to the level of the tiles?
Thank you
ninerian
Videohotspots are still not implemented in WebVR. So all we could do is wait. 
What am idoing wrong ? Or is it not possible to get Tooltips with the Headsets on?
Textfield is currently not supported in VR-Mode.
What exactly do you mean or what do you want to do?
An API for using a custom framebuffer as hotspot texture?
Exactly. I want to replace the image of the hotspot with an dynamic texture, which I can control with javascript.
But with the final 1.19 release the hotspots will be rendered by WebGL by default.
Thats sounds great. Would it be possible to integrate a API to modify the hotspot texture with WebGL as descriped here? http://learningwebgl.com/blog/?p=1786
Hello Klaus,
actually we are trying the Oculus Rift DK2, and the resolution of the tour seems to be lower in direct mode then in the extended mode. Is the Oculus software adjusting the quality when the graphic card isn't so powerful? The PC uses Windows 7 and has a Geforce GTX 750 build in.
