@@ -0,0 +1,72 @@ | |||
<!DOCTYPE html> | |||
<!-- __V3D_PUZZLES__ - enable Puzzles button in the App Manager --> | |||
<html lang="en"> | |||
<head> | |||
<title>iris von gerkzeuk</title> | |||
<meta charset="utf-8"> | |||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |||
<meta name="date" content="2019-10-06"> | |||
<meta namne="author" content="Victor Giers"> | |||
<meta name='url' content='http://www.victorgiers.com/iris'> | |||
<meta name="title" content="Iris von Gerkzeuk"> | |||
<meta name="description" content="The face of AI. Spoiler: It will never wake up."> | |||
<meta name="keywords" content="glitch, glitch art, glitch artist collective, virtual human, virtueller mensch, artificial human, künstlicher menschm artificial life, künstliches leben, digital human, digitaler mensch, 3d character, 3d charakter, media, medien, design, gestaltung, art, kunst. character creation, charaktererstellung, game, spiel, video game, face, gesicht, fetish, fetisch, robot, schauspieler, avatar, android, artificial intelligence, künstliche intelligenz, ai, ki, musk, hoax"> | |||
<!-- | |||
<meta name="twitter:card" content="summary"> | |||
<meta name="twitter:title" content="Verge3D Web Interactive"> | |||
<meta name="twitter:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies."> | |||
<meta name="twitter:image:src" content="https://cdn.soft8soft.com/images/player_socials.jpg"> | |||
<meta property="og:title" content="Verge3D Web Interactive"> | |||
<meta property="og:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies."> | |||
<meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg"> | |||
<meta property="og:type" content="website"> | |||
<link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png"> | |||
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png"> | |||
<link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png"> | |||
<link rel="manifest" href="media/manifest.json"> | |||
<link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5"> | |||
<meta name="theme-color" content="#ffffff"> | |||
<meta http-equiv="origin-trial" content="Aop1aS3O0LG/MKmDbfhMRdlXGxB1ETrJJScdLSaYLDCMJI5iOLQ0uwhBObewdZKbpu00Y+9f7YC5tALasZ7BOg0AAABoeyJvcmlnaW4iOiJodHRwczovL3NvZnQ4c29mdC5jb206NDQzIiwiZmVhdHVyZSI6IldlYlhSRGV2aWNlTTY5IiwiZXhwaXJ5IjoxNTUxODMwMzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0="> | |||
--> | |||
<script src="v3d.js"></script> | |||
<script src="jquery.js"></script> | |||
<script src="iris_puzzles.js"></script> | |||
<link rel="stylesheet" type="text/css" href="iris_puzzles.css"> | |||
</head> | |||
<body> | |||
<script> | |||
const constraints = { | |||
video: true, | |||
audio: true | |||
}; | |||
navigator.mediaDevices.getUserMedia(constraints); | |||
</script> | |||
<div id="background"> | |||
<video autoplay muted loop id="video-bg"> | |||
<source src="mangler.mp4" type="video/mp4"> | |||
<source src="mangler.webm" type="video/webm"> | |||
</video> | |||
</div> | |||
<script> | |||
document.getElementById('video-bg').addEventListener('loadedmetadata', function() { | |||
let time = Math.floor(Math.random() * 1200); | |||
console.log(time); | |||
this.currentTime = time; | |||
}, false); | |||
</script> | |||
<div id="container"></div> | |||
</body> | |||
</html> |
@@ -0,0 +1,37 @@ | |||
body { | |||
margin: 0px; | |||
background-color:#000; | |||
overflow: hidden; | |||
} | |||
#container { | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
#background{ | |||
position: fixed; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
overflow: hidden; | |||
padding: 0; | |||
margin: 0; | |||
z-index: -100; | |||
} | |||
#video-bg{ | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
/* removes tap blinking on ios devices */ | |||
* { -webkit-tap-highlight-color:rgba(0,0,0,0); } |
@@ -0,0 +1,182 @@ | |||
'use strict'; | |||
window.addEventListener('load', function() { | |||
(function() { | |||
var params = v3d.AppUtils.getPageParams(); | |||
var PUZZLES_DIR = '../../puzzles/'; | |||
var logicURL = params.logic ? params.logic : '__LOGIC__visual_logic.js'.replace('__LOGIC__', ''); | |||
var sceneURL = params.load ? params.load : '__URL__iris_puzzles.gltf'.replace('__URL__', ''); | |||
if (!sceneURL) { | |||
console.log('No scene URL specified'); | |||
return; | |||
} | |||
// some puzzles can benefit from cache | |||
v3d.Cache.enabled = true; | |||
if (v3d.AppUtils.isXML(logicURL)) { | |||
var logicURLJS = logicURL.match(/(.*)\.xml$/)[1] + '.js'; | |||
new v3d.PuzzlesLoader().loadEditorWithLogic(PUZZLES_DIR, logicURLJS, | |||
function() { | |||
var initOptions = v3d.PL ? v3d.PL.execInitPuzzles().initOptions | |||
: { useFullscreen: true }; | |||
loadScene(sceneURL, initOptions); | |||
} | |||
); | |||
} else if (v3d.AppUtils.isJS(logicURL)) { | |||
new v3d.PuzzlesLoader().loadLogic(logicURL, function() { | |||
var initOptions = v3d.PL ? v3d.PL.execInitPuzzles().initOptions | |||
: { useFullscreen: true }; | |||
loadScene(sceneURL, initOptions); | |||
}); | |||
} else { | |||
loadScene(sceneURL, { useFullscreen: true }); | |||
} | |||
})(); | |||
function loadScene(sceneURL, initOptions) { | |||
initOptions = initOptions || {}; | |||
var ctxSettings = {}; | |||
if (initOptions.useBkgTransp) ctxSettings.alpha = true; | |||
if (initOptions.preserveDrawBuf) ctxSettings.preserveDrawingBuffer = true; | |||
var preloader = initOptions.useCustomPreloader | |||
? createCustomPreloader(initOptions.preloaderProgressCb, | |||
initOptions.preloaderEndCb) | |||
: new v3d.SimplePreloader({ container: 'container' }); | |||
var app = new v3d.App('container', ctxSettings, preloader); | |||
if (initOptions.useBkgTransp) { | |||
app.clearBkgOnLoad = true; | |||
app.renderer.setClearColor(0x000000, 0); | |||
} | |||
// namespace for communicating with code generated by Puzzles | |||
app.ExternalInterface = {}; | |||
prepareExternalInterface(app); | |||
if (initOptions.preloaderStartCb) initOptions.preloaderStartCb(); | |||
if (initOptions.useFullscreen) { | |||
initFullScreen(); | |||
} else { | |||
var fsButton = document.getElementById('fullscreen_button'); | |||
if (fsButton) fsButton.style.display = 'none'; | |||
} | |||
sceneURL = initOptions.useCompAssets ? sceneURL + '.xz' : sceneURL; | |||
app.loadScene(sceneURL, function() { | |||
app.enableControls(); | |||
app.run(); | |||
if (v3d.PE) v3d.PE.updateAppInstance(app); | |||
if (v3d.PL) v3d.PL.init(app, initOptions); | |||
runCode(app); | |||
}, null, function() { | |||
console.log('Can\'t load the scene ' + sceneURL); | |||
}); | |||
return app; | |||
} | |||
function createCustomPreloader(updateCb, finishCb) { | |||
function CustomPreloader() { | |||
v3d.Preloader.call(this); | |||
} | |||
CustomPreloader.prototype = Object.assign(Object.create(v3d.Preloader.prototype), { | |||
onUpdate: function(percentage) { | |||
v3d.Preloader.prototype.onUpdate.call(this, percentage); | |||
if (updateCb) updateCb(percentage); | |||
}, | |||
onFinish: function() { | |||
v3d.Preloader.prototype.onFinish.call(this); | |||
if (finishCb) finishCb(); | |||
} | |||
}); | |||
return new CustomPreloader(); | |||
} | |||
function initFullScreen() { | |||
var fsButton = document.getElementById('fullscreen_button'); | |||
if (!fsButton) return; | |||
if (document.fullscreenEnabled || | |||
document.webkitFullscreenEnabled || | |||
document.mozFullScreenEnabled || | |||
document.msFullscreenEnabled) | |||
fullscreen_button.style.display = 'inline'; | |||
fullscreen_button.addEventListener('click', function(event) { | |||
event.stopPropagation(); | |||
if (document.fullscreenElement || | |||
document.webkitFullscreenElement || | |||
document.mozFullScreenElement || | |||
document.msFullscreenElement) { | |||
exitFullscreen(); | |||
} else | |||
requestFullscreen(document.body); | |||
}); | |||
function changeFullscreen() { | |||
if (document.fullscreenElement || | |||
document.webkitFullscreenElement || | |||
document.mozFullScreenElement || | |||
document.msFullscreenElement) | |||
fullscreen_button.className = 'fullscreen-close'; | |||
else | |||
fullscreen_button.className = 'fullscreen-open'; | |||
} | |||
document.addEventListener('webkitfullscreenchange', changeFullscreen); | |||
document.addEventListener('mozfullscreenchange', changeFullscreen); | |||
document.addEventListener('msfullscreenchange', changeFullscreen); | |||
document.addEventListener('fullscreenchange', changeFullscreen); | |||
function requestFullscreen(elem) { | |||
if (elem.requestFullscreen) | |||
elem.requestFullscreen(); | |||
else if (elem.mozRequestFullScreen) | |||
elem.mozRequestFullScreen(); | |||
else if (elem.webkitRequestFullscreen) | |||
elem.webkitRequestFullscreen(); | |||
else if (elem.msRequestFullscreen) | |||
elem.msRequestFullscreen(); | |||
} | |||
function exitFullscreen() { | |||
if (document.exitFullscreen) | |||
document.exitFullscreen(); | |||
else if (document.mozCancelFullScreen) | |||
document.mozCancelFullScreen(); | |||
else if (document.webkitExitFullscreen) | |||
document.webkitExitFullscreen(); | |||
else if (document.msExitFullscreen) | |||
document.msExitFullscreen(); | |||
} | |||
} | |||
function prepareExternalInterface(app) { | |||
// register functions in the app.ExternalInterface to call them from Puzzles, e.g: | |||
// app.ExternalInterface.myJSFunction = function() { | |||
// console.log('Hello, World!'); | |||
// } | |||
app.ExternalInterface.startVideo = function(){ | |||
console.log("Yo"); | |||
//$( "#background" ).append('<iframe id="youtubeframe" width="100%" height="100%" src="https://www.youtube.com/embed/31EP42tR1ao?autoplay=1&mute=1&controls=0&showinfo=0&autohide=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'); | |||
} | |||
} | |||
function runCode(app) { | |||
// add your code here, e.g. console.log('Hello, World!'); | |||
} | |||
}); |
@@ -0,0 +1,148 @@ | |||
/** | |||
* Generated by Verge3D Puzzles v.2.12.5 | |||
* Mon Jun 10 2019 05:49:05 GMT+0200 (Mitteleuropäische Sommerzeit) | |||
* Do not edit this file - your changes may get overridden when Puzzles are saved. | |||
* Refer to https://www.soft8soft.com/docs/manual/en/introduction/Using-JavaScript.html | |||
* for information on how to add your own JavaScript to Verge3D apps. | |||
*/ | |||
"use strict"; | |||
(function() { | |||
// global variables/constants used by puzzles' functions | |||
var _pGlob = {}; | |||
_pGlob.objCache = {}; | |||
_pGlob.fadeAnnotations = true; | |||
_pGlob.objClickCallbacks = []; | |||
_pGlob.pickedObject = ''; | |||
_pGlob.objHoverCallbacks = []; | |||
_pGlob.hoveredObject = ''; | |||
_pGlob.objMovementInfos = {}; | |||
_pGlob.objDragOverCallbacks = []; | |||
_pGlob.objDragOverInfoByBlock = {} | |||
_pGlob.dragMoveOrigins = {}; | |||
_pGlob.dragScaleOrigins = {}; | |||
_pGlob.mediaElements = {}; | |||
_pGlob.loadedFiles = {}; | |||
_pGlob.loadedFile = ''; | |||
_pGlob.animMixerCallbacks = []; | |||
_pGlob.arHitPoint = new v3d.Vector3(0, 0, 0); | |||
_pGlob.states = []; | |||
_pGlob.percentage = 0; | |||
_pGlob.animateParamUpdate = null; | |||
_pGlob.openedFile = ''; | |||
_pGlob.xrSessionAcquired = false; | |||
_pGlob.xrSessionCallbacks = []; | |||
_pGlob.screenCoords = new v3d.Vector2(); | |||
_pGlob.AXIS_X = new v3d.Vector3(1, 0, 0); | |||
_pGlob.AXIS_Y = new v3d.Vector3(0, 1, 0); | |||
_pGlob.AXIS_Z = new v3d.Vector3(0, 0, 1); | |||
_pGlob.MIN_DRAG_SCALE = 10e-4; | |||
_pGlob.vec2Tmp = new v3d.Vector2(); | |||
_pGlob.vec2Tmp2 = new v3d.Vector2(); | |||
_pGlob.vec3Tmp = new v3d.Vector3(); | |||
_pGlob.vec3Tmp2 = new v3d.Vector3(); | |||
_pGlob.quatTmp = new v3d.Quaternion(); | |||
_pGlob.quatTmp2 = new v3d.Quaternion(); | |||
_pGlob.mat4Tmp = new v3d.Matrix4(); | |||
_pGlob.planeTmp = new v3d.Plane(); | |||
_pGlob.raycasterTmp = new v3d.Raycaster(); | |||
_pGlob.timers = {}; | |||
var _pPhysics = {}; | |||
_pPhysics.syncList = []; | |||
// internal info | |||
_pPhysics.collisionData = []; | |||
// goes to collision callback | |||
_pPhysics.collisionInfo = { | |||
objectA: '', | |||
objectB: '', | |||
distance: 0, | |||
positionOnA: [0, 0, 0], | |||
positionOnB: [0, 0, 0], | |||
normalOnB: [0, 0, 0] | |||
}; | |||
var PL = v3d.PL = v3d.PL || {}; | |||
PL.legacyMode = false; | |||
PL.execInitPuzzles = function() { | |||
var _initGlob = {}; | |||
_initGlob.percentage = 0; | |||
_initGlob.output = { | |||
initOptions: { | |||
fadeAnnotations: true, | |||
useBkgTransp: false, | |||
preserveDrawBuf: false, | |||
useCompAssets: false, | |||
useFullscreen: true, | |||
useCustomPreloader: false, | |||
preloaderStartCb: function() {}, | |||
preloaderProgressCb: function() {}, | |||
preloaderEndCb: function() {}, | |||
} | |||
} | |||
// initSettings puzzle | |||
_initGlob.output.initOptions.fadeAnnotations = true; | |||
_initGlob.output.initOptions.useBkgTransp = true; | |||
_initGlob.output.initOptions.preserveDrawBuf = false; | |||
_initGlob.output.initOptions.useCompAssets = false; | |||
_initGlob.output.initOptions.useFullscreen = false; | |||
return _initGlob.output; | |||
} | |||
PL.init = function(appInstance, initOptions) { | |||
initOptions = initOptions || {}; | |||
if ('fadeAnnotations' in initOptions) { | |||
_pGlob.fadeAnnotations = initOptions.fadeAnnotations; | |||
} | |||
// bloom puzzle | |||
function bloom(threshold, strength, radius) { | |||
appInstance.enablePostprocessing([{ | |||
type: 'bloom', | |||
threshold: threshold, | |||
strength: strength, | |||
radius: radius | |||
}]); | |||
} | |||
// callJSFunction puzzle | |||
function getJSFunction(funcName) { | |||
var jsFunc = appInstance.ExternalInterface[funcName]; | |||
if (typeof jsFunc == "function") | |||
return jsFunc; | |||
else | |||
return function() {}; | |||
} | |||
bloom(0.4, 0.25, 0.2); | |||
getJSFunction('startVideo')(); | |||
} // end of PL.init function | |||
if (window.v3dApp) { | |||
// backwards compatibility for old player projects | |||
PL.legacyMode = true; | |||
PL.init(window.v3dApp); | |||
} | |||
})(); // end of closure | |||
/* ================================ end of code ============================= */ |