Forum

Using HMD Stereo Post Processing Effect without tracking

03 May 2016 22:54

Reply to post of user Kirill Osipov
You can enable distortion (v15.12) for DK2.

m_scenes.set_hmd_params({
enable_hmd_stereo: true,
distortion_scale: 0.666,
distortion_coefs: [0.22, 0.28]
})

But it does not correcting chromatic aberration (webvr-boilerplate does same).

Never mind, gyro_use was missing from init


In case of using engine distortion it is better to disable browser distortion.
requestFullScreen({"vrDistortion": false});


Right correction requires right distortion coefficients.
For example,
OculusRiftDK2 — [0.22, 0.28]
CardboardV1 — [0.441, 0.156]
CardboardV2 — [0.34, 0.55]

Krill I'm trying to get this working on my Android with Cardboard, however both
m_inp.can_use_device(m_inp.DEVICE_GYRO)
& m_inp.can_use_device(m_inp.DEVICE_HMD)
return false! meaning that enable_hmd will have a null sensor. In the past I've been able ti successfully use gyro in the same device using the create_rotation_sensors function that you have posted in the forum. Unfortunately not able to do so right now! any reason as to why?

"use strict"

// register the application module
b4w.register("test", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_data      = require("data");
var m_cfg       = require("config");
var m_scenes    = require("scenes");
var m_hmd    = require("hmd");
var m_inp = require("input");

var m_cam = require("camera");
var m_ctl = require("controls");
var m_quat = require("quat");
var m_trans = require("transform");
var m_util = require("util");
var m_vec3  = require("vec3");

var _last_gyro_quat = m_quat.create();

var _quat_tmp = m_quat.create();
var _quat_tmp2 = m_quat.create();
var _vec3_tmp = m_vec3.create();

/**
 * export the method to initialize the app (called at the bottom of this file)
 */
exports.init = function() {
    // m_cfg.set("stereo", "HMD");
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: true,
        console_verbose: true,
        autoresize: true
    });
}

/**
 * callback executed when the app is initizalized
 */
function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }
    // m_app.enable_camera_controls();
    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load("test.json", load_cb);
}

/**
 * callback executed when the scene is loaded
 */
function load_cb(data_id) {
    m_app.enable_controls();
    m_app.enable_camera_controls();
    // m_hmd.enable_hmd(1);
    // console.log(m_inp.can_use_device(m_inp.DEVICE_GYRO));
    // console.log("hi");
    create_rotation_sensors();

    // // place your code here
    // m_scenes.set_hmd_params({
    // 	enable_hmd_stereo: true,
    // 	distortion_scale: 1,
    // 	inter_lens_dist: 0.064,
    //     base_line_dist: 0.035,
    //     screen_to_lens_dist: 0.039,
    //     distortion_coefs: [0.34, 0.55],
    //     chromatic_aberration_coefs : [0.0, 0.0, 0.0, 0.0]
    // })
}

function create_rotation_sensors() {
	console.log("hi from ");
	var obj = m_scenes.get_active_camera();
	var g_sensor = m_ctl.create_gyro_angles_sensor();
	var save_angles = true;

	var rotate_cb = function(obj, id, pulse) {
		if (pulse > 0) {

			var curr_angles = m_ctl.get_sensor_payload(obj, id, 0);
			if (m_cam.is_eye_camera(obj)) {
				var alpha = curr_angles[2];
				var beta  = curr_angles[1];
				var gamma = curr_angles[0];

				var quaternion = _quat_tmp;
				var c1 = Math.cos(alpha / 2);
				var c2 = Math.cos(beta  / 2);
				var c3 = Math.cos(gamma / 2);
				var s1 = Math.sin(alpha / 2);
				var s2 = Math.sin(beta  / 2);
				var s3 = Math.sin(gamma / 2);
				quaternion[0] = c1 * s2 * c3 - s1 * c2 * s3;
				quaternion[1] = c1 * c2 * s3 + s1 * s2 * c3;
				quaternion[2] = s1 * c2 * c3 + c1 * s2 * s3;
				quaternion[3] = c1 * c2 * c3 - s1 * s2 * s3;

				var orientation = Math.PI * window.orientation / 180;
				var screen_quat = m_quat.setAxisAngle(m_util.AXIS_Z,
					-orientation, _quat_tmp2);

				quaternion = m_quat.multiply(quaternion, screen_quat, _quat_tmp);

				var quat = m_quat.setAxisAngle(m_util.AXIS_X, Math.PI / 2,
					_quat_tmp2);
				quaternion = m_quat.multiply(quaternion, quat, _quat_tmp);

				if (save_angles) {
					m_quat.copy(quaternion, _last_gyro_quat);
					save_angles = false;
				} else {
					var last_gyro_inv_quat = m_quat.invert(_last_gyro_quat, _last_gyro_quat);
					var cam_quat = m_trans.get_rotation(obj, _quat_tmp2);
					var clear_cam_quat = m_quat.multiply(cam_quat, last_gyro_inv_quat, _quat_tmp2);
					var new_cam_quat = m_quat.multiply(clear_cam_quat, quaternion, _quat_tmp2);

					var up_axis = m_vec3.transformQuat(m_util.AXIS_MZ,
						new_cam_quat, _vec3_tmp);

					m_cam.set_vertical_axis(obj, up_axis);

					m_trans.set_rotation_v(obj, new_cam_quat);
					m_quat.copy(quaternion, _last_gyro_quat);
				}
			}
		}
	}
	m_ctl.create_sensor_manifold(obj, "ROTATE_GYRO", 
		m_ctl.CT_CONTINUOUS, [g_sensor], null, rotate_cb);
}

});

// import the app module and start the app by calling the init method
b4w.require("test").init();

Above code is to test the gyro with not luck :( I was able to get the stereo and hmd to work on cardboard so I have commented those sections out.

Thank you in advance
04 May 2016 11:26
As I can see you need to set "gyro_use" flag to true. See here.

exports.init = function() {
    // . . .
    m_cfg.set("gyro_use", true);
    // . . .
    });
}


Sorry for this. We are going to remove the flag in next release.
Blend4Web Team
kirill@blend4web.com
30 December 2016 15:26
Hi All,

What is the current approach to get vr working in chrome? I have an app in 3D and trying to change it to 3D mode by making set_hmd_params submodule to true as explained but get no changes to the canvas. I also have checked other vr resources and got splitted screen at least showing there should be something else turned on my model code to get it working. Please advice what to check for HTC Vive.

thanks
 
Please register or log in to leave a reply.