Skip to content
Permalink
Browse files

v5.1.5 - 2020.03.24:

+ Updated emscripten to 1.39.11
+ Added orientation change event to handle mobile device rotation
+ Synchronized artov5-ext utility files with brfv5-browser utilities, including t3d namespace for more than one ThreeJS view.
  • Loading branch information
Marcel Klammer
Marcel Klammer committed Mar 24, 2020
1 parent 2833f91 commit 33f731e265b324fa8a2139315a2c9b60f70cc9aa
@@ -29,16 +29,46 @@ import { setROIsWholeImage } from '../brfv5/brfv5__configure.js'

import { colorPrimary } from '../utils/utils__colors.js'

import { render3DScene, setNumFaces } from '../threejs/threejs__setup.js'
import { render3DScene, setNumFaces, prepareModelNodes,
hideAllModels, turnIntoOcclusionObject, add3DModel,
set3DModelByName } from '../threejs/threejs__setup.js'

import { load3DModel, load3DOcclusionModel }from '../threejs/threejs__loading.js'
import { set3DModelByName } from '../threejs/threejs__loading.js'
import { load3DModelList, getModelInstance } from '../threejs/threejs__loading.js'

import { hide3DModels, updateByFace } from '../ui/ui__overlay__threejs.js'

let numFacesToTrack = 1 // set be run()
let numFacesToTrack = 1 // set be run()

export const configureExample = (brfv5Config) => {
let models = [

// Load the occlusion model (an invisible head). It hides anything behind it.

{
pathToModel: './assets/3d/occlusion_head_reference.json',
pathToTextures: './assets/3d/textures/',

nameModel: null,

isOcclusionModel: true,
isMaterialCollection: false
},

// The actual 3d model as exported from ThreeJS editor.
// either rayban.json or earrings.json
// Textures might be embedded or set as file name in a certain path.

{
pathToModel: './assets/3d/rayban.json',
pathToTextures: './assets/3d/textures/',

nameModel: 'black',

isOcclusionModel: false,
isMaterialCollection: false
}
]

export const configureExample = (brfv5Config, t3d) => {

configureNumFacesToTrack(brfv5Config, numFacesToTrack)

@@ -47,75 +77,89 @@ export const configureExample = (brfv5Config) => {
setROIsWholeImage(brfv5Config)
}

setNumFaces(numFacesToTrack)

brfv5Config.faceTrackingConfig.enableFreeRotation = false
brfv5Config.faceTrackingConfig.maxRotationZReset = 34.0

// Load the occlusion model (an invisible head). It hides anything behind it.
setNumFaces(t3d, numFacesToTrack)

load3DOcclusionModel('./assets/3d/occlusion_head_reference.json',
'./assets/3d/textures/', null).then(() => {
hide3DModels(t3d)

}).catch((e) => {
load3DModelList({ fileList: models, onProgress: null }).then(() => {

error('Could not load 3D occlusion model:', e)
})
prepareModelNodes(t3d)
hideAllModels(t3d)

// The actual 3d model as exported from ThreeJS editor.
// either rayban.json or earrings.json
// Textures might be embedded or set as file name in a certain path.
load3DModel('./assets/3d/rayban.json',
'./assets/3d/textures/', null).then(() => {
for(let i = 0; i < models.length; i++) {

const model = models[i]
const obj3d = getModelInstance(t3d, model.pathToModel)

if(model.isOcclusionModel) {

turnIntoOcclusionObject(obj3d)
}

if(!model.isMaterialCollection && obj3d) {

add3DModel(t3d, obj3d)
}
}

for(let i = 0; i < models.length; i++) {

const model = models[i]

set3DModelByName()
render3DScene()
if(!model.isMaterialCollection) {

}).catch((e) => {
set3DModelByName(t3d, model.pathToModel, model.nameModel, (url, name) => {
error('SETTING_3D_MODEL_NAME_FAILED:', name, url)
})
}
}

error('Could not load 3D model:', e)
})
}).catch((e) => { error(e) })
}

export const handleTrackingResults = (brfv5Manager, brfv5Config, canvas) => {
export const handleTrackingResults = (brfv5Manager, brfv5Config, canvas, t3d) => {

const ctx = canvas.getContext('2d')
const faces = brfv5Manager.getFaces()

let doDrawFaceDetection = false

hide3DModels()
setNumFaces(t3d, numFacesToTrack)

hide3DModels(t3d)

for(let i = 0; i < faces.length; i++) {

const face = faces[i];
const face = faces[i];console.log(face, face.state)

if(face.state === brfv5.BRFv5State.FACE_TRACKING) {

drawCircles(ctx, face.landmarks, colorPrimary, 2.0);

// Update the 3d model placement.

updateByFace(ctx, face, i, true)
updateByFace(t3d, ctx, face, i, true)

if(window.selectedSetup === 'image') {

updateByFace(ctx, face, i, true)
updateByFace(ctx, face, i, true)
updateByFace(ctx, face, i, true)
updateByFace(t3d, ctx, face, i, true)
updateByFace(t3d, ctx, face, i, true)
updateByFace(t3d, ctx, face, i, true)
}

} else {

// Hide the 3d model, if the face wasn't tracked.
updateByFace(ctx, face, i, false)
updateByFace(t3d, ctx, face, i, false)

doDrawFaceDetection = true;
}

// ... and then render the 3d scene.
render3DScene()

render3DScene(t3d)
}

if(doDrawFaceDetection) {
@@ -29,7 +29,7 @@ import { mountStage } from
import { mountImage, loadImage, setSizeImage, getDataFromImage } from '../ui/ui__input__image.js'
import { closeImage } from '../ui/ui__input__image.js'
import { mountCamera, openCamera, setSizeCamera, getDataFromCamera } from '../ui/ui__input__camera.js'
import { closeCamera } from '../ui/ui__input__camera.js'
import { closeCamera, isVideoPaused } from '../ui/ui__input__camera.js'

import { startTracking, stopTracking } from '../ui/ui__input__data.js'

@@ -82,7 +82,9 @@ let _onTracking = null
// indicate whether we track on a camera stream or an image.
let _isImageTracking = false

let _orientation = null
let _scaleMode = ScaleMode.PROPORTIONAL_INSIDE
let _t3d = {} // a ThreeJS namespace per view.

export const setupExample = (config = null) => {

@@ -115,7 +117,7 @@ export const setupExample = (config = null) => {
hidePNGOverlay()
hideTextureOverlay()
hideTextureExporter()
hideThreejsOverlay()
hideThreejsOverlay(_t3d)

return
}
@@ -138,7 +140,7 @@ export const setupExample = (config = null) => {
mountTextureExporter(container)

mountPNGOverlay(stage, _scaleMode)
mountThreejsOverlay(stage, _scaleMode)
mountThreejsOverlay(stage, _scaleMode, _t3d)

mountPreloader(stage)
mountStats(stage)
@@ -184,10 +186,16 @@ export const trackCamera = () => {
openCamera()
.then(({ width, height }) => setSizeAndInitTracking(width, height))
.catch((e) => { if(e) { error('CAMERA_FAILED: ', e) } })

_orientation = window.orientation

window.addEventListener('orientationchange', onOrientationChange)
}

export const trackImage = (path) => {

window.removeEventListener('orientationchange', onOrientationChange)

_isImageTracking = true

closeCamera()
@@ -197,6 +205,32 @@ export const trackImage = (path) => {
.catch((e) => { if(e) { error('IMAGE_FAILED: ', e.msg) } })
}

const onOrientationChange = () => {

console.log('window.orientation', window.orientation)

if(window.orientation !== _orientation) {

_orientation = window.orientation

if(isVideoPaused()) {

// don't start the video after the change

} else {

closeCamera()
setTimeout(() => {

openCamera()
.then(({ width, height }) => setSizeAndInitTracking(width, height))
.catch((e) => { if(e) { error('CAMERA_FAILED: ', e) } })

}, 250)
}
}
}

const setSizeAndInitTracking = (width, height) => {

log(_name + ': setSizeAndInitTracking: ' + width + 'x' + height)
@@ -211,7 +245,7 @@ const setSizeAndInitTracking = (width, height) => {

setSizeTextureExporter(_width, _height)
setSizePNGOverlay(_width, _height)
setSizeThreejsOverlay(_width, _height)
setSizeThreejsOverlay(_width, _height, _t3d)

setFullscreenState()

@@ -255,7 +289,7 @@ const initTracking = () => {

_brfv5Manager.reset()

if(_onConfigure) { _onConfigure(_brfv5Config) }
if(_onConfigure) { _onConfigure(_brfv5Config, _t3d) }

if(_enableDynamicPerformance) {

@@ -312,7 +346,7 @@ const onImageDataUpdate = (imageData, activeCanvas, inactiveCanvas, trackOnlyOnc

if(_onTracking) {

drawDebug = _onTracking(_brfv5Manager, _brfv5Config, activeCanvas)
drawDebug = _onTracking(_brfv5Manager, _brfv5Config, activeCanvas, _t3d)

} else {

@@ -321,7 +355,7 @@ const onImageDataUpdate = (imageData, activeCanvas, inactiveCanvas, trackOnlyOnc

if(drawDebug) {

drawFaceTrackingResultsDefault(_brfv5Manager, _brfv5Config, activeCanvas)
drawFaceTrackingResultsDefault(_brfv5Manager, _brfv5Config, activeCanvas, _t3d)
}

if(_brfv5Config.enableFaceTracking) {

0 comments on commit 33f731e

Please sign in to comment.
You can’t perform that action at this time.