Skip to content

Commit

Permalink
keep playing with optimizations
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tezeroth
Tezeroth committed Jan 13, 2025
1 parent b90ae8f commit 1f74085
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 131 deletions.
110 changes: 56 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
- AFrame HTML Mesh component (aframe-html) for rendering HTML elements as textures in 3D
- Local scripts: ar-shadow-helper, ar-cursor, simple-navmesh-constraint, model-utils, and main.js for additional logic
-->
<script id="physxsrc" src="https://cdn.jsdelivr.net/gh/c-frame/physx@latest/dist/physx.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-master.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-environment-component.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/components/sphere-collider.min.js"></script>
Expand All @@ -32,16 +32,17 @@
<script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-particle-system-component.min.js"></script>-->

<!-- Our custom behavior code -->
<script src="make-transparent.js"></script>
<script src="main.js"></script> <!--hers-->
<script src="simple-navmesh-constraint.js"></script> <!--hers-->
<script src="model-utils.js"></script> <!--hers-->
<script src="raycaster-listen.js"></script>
<script src="ar-shadow-helper.js"></script> <!--hers-->
<!-- <script src="ar-shadow-helper.js"></script> hers-->
<script src="ar-cursor.js"></script> <!--hers-->
<script src="show-magnet-range.js"></script>
<!-- <script src="show-magnet-range.js"></script>-->

</head>
<title>Simplified Boilerplate</title>
<title>Boilerplate Sandbox</title>
<body>
<!--
The main A-Frame scene element:
Expand All @@ -63,20 +64,29 @@
renderer="draco-decoder-path: https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/draco/"
inspector="url: https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-editor.min.js"
stats
environment="
preset: osiris; /* Use the Osiris environment preset */
lightColor: #85856f; /* Override the default greenish color */
lightIntensity: 5; /* Lower intensity so baked lighting dominates */
"

gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/versioned/decoders/1.5.7/;"
physx="autoLoad: true; delay: 1000; useDefaultScene: true;"
webxr="overlayElement:#dom-overlay;"
reflection="directionalLight:#dirlight;"
renderer="alpha:true;physicallyCorrectLights:true;colorManagement:true;exposure:2;toneMapping:ACESFilmic;"
physx="autoLoad: true; delay: 1000; useDefaultScene: true; stepRate: 0.02;"
webxr="overlayElement:#dom-overlay;"
reflection="directionalLight:#dirlight;"
renderer="alpha:true;physicallyCorrectLights:True;colorManagement:true;exposure:2;toneMapping:ACESFilmic;"
shadow="type: pcfsoft"
xr-mode-ui="XRMode:vr"
environment="
preset: osiris; /* Use the Osiris environment preset */
lightColor: #85856f; /* Override the default greenish color */
lightIntensity: 5; /* Lower intensity so baked lighting dominates */
"

>
<!--
stats
-->
<!--
Asset management system:
Preload models and images before the scene is displayed.
Expand Down Expand Up @@ -156,8 +166,10 @@



<!-- A very interesting way of doing things, I like it -->
<img id="bake" src="https://cdn.glitch.global/d29f98b4-ddd1-4589-8b66-e2446690e697/Bake(3).webp?v=1644331344700" crossorigin="anonymous">
<!--APPLYING LIGHTMAP TO ENVIROMENT - CHECK THE SCRIPTS. A very interesting way of doing things, I like it
<img id="bake" src="https://cdn.glitch.global/d29f98b4-ddd1-4589-8b66-e2446690e697/Bake(3).webp?v=1644331344700" crossorigin="anonymous">-->


</a-assets>

<!--BUILDING, NAVMESH, and COLLIDERS--------------------------------------------------------------------------------------------------->
Expand Down Expand Up @@ -335,7 +347,7 @@
></a-plane>
</a-entity>

<!-- A piano model -->
<!-- A piano model, notice without physx-from-model, you cant put things -->
<a-gltf-model id="piano" rotation="0 100 0" position="0 0 4.5" shadow="receive:false;cast:true;"
src="https://cdn.glitch.global/d29f98b4-ddd1-4589-8b66-e2446690e697/piano.glb?v=1644414775118"
>
Expand Down Expand Up @@ -373,26 +385,9 @@



<!--SCRIPT TO ALLOW GLTF MODELS TO BECOME TRANSPARENT, well in this case INVISISBLE so they can act as colliders-->

<script>
AFRAME.registerComponent('make-transparent', {
init: function () {
this.el.addEventListener('model-loaded', (e) => {
const object3D = e.detail.model;

// Traverse the GLTF model and make all materials transparent
object3D.traverse((node) => {
if (node.isMesh && node.material) {
node.material.transparent = true; // Enable transparency
node.material.opacity = 0; // Set desired opacity
node.material.depthWrite = false; // Prevent depth issues
}
});
});
}
});
</script>




<!-- NESTED COLLIDERS IN MODEL, WAS BUILT AS SINGLE FILE IN BLENDER,(model with cubes as the colliders etc) AND THEN THE SEPERATE NAVMESHES IMPORTED IN and set visable to false. ORIGIN MUST ALWAYS BE SET TOO BLENDER WORLD ORIGIN-->
Expand Down Expand Up @@ -450,8 +445,7 @@
data-pick-up="parent"
class="magnet-left magnet-right"
position="0 0.2 -0"
rotation="90 180 0"
show-magnet-range="0.2,0.1">
rotation="90 180 0">
<box></box>
</a-entity>
</a-gltf-model>
Expand Down Expand Up @@ -479,8 +473,8 @@
data-pick-up="parent"
class="magnet-left magnet-right"
position="0.075 0 0"
rotation="90 180 0"
magnet-range-debug="range:0.1,0.05git">
w>
<!--magnet-range-debug="range:0.1,0.05"-->
<box></box>
</a-entity>
<a-entity
Expand All @@ -490,22 +484,23 @@
class="magnet-left magnet-right"
position=" -0.075 0 0"
rotation="90 180 0"
magnet-range-debug="range:0.1,0.05">
>
<box></box>
</a-entity>

</a-gltf-model>

<!-- TESTING EASE OF ADDING HANDLE TO NEW TEDDY OBJECT -->
<a-gltf-model
class="blocker"

id="teddy"
toggle-physics
shadow="receive:false;"
src="#teddy"
position="-4.14 1.099 6.256"
position="5 1.099 2"
physx-body-from-model="type:dynamic;mass:2;"
>

<a-entity
id="teddy-handle"
data-magnet-range="0.2,0.1,360,180"
Expand All @@ -526,11 +521,12 @@
class="magnet-left magnet-right"
data-magnet-range="0.2,0.1,360,180"
rotation="30 0 0"
position="-2.3 2 2.6"
magnet-range-debug="range:0.2,0.1"
position="5 0 2.6"

physx-body-from-model="type: dynamic; shape: box; mass:4;"
toggle-physics
>
<!-- magnet-range-debug="range:0.2,0.1"-->
</a-gltf-model>

<!-- A greenbox with two handles -->
Expand All @@ -547,23 +543,25 @@
<a-entity
id="box-handle-1"
data-magnet-range="0.2,0.1,360,180"
magnet-range-debug="range:0.2,0.1"

data-pick-up="parent"
class="magnet-left magnet-right"
position="0 0 -0.15"
rotation="90 180 90"
>

<box></box>
</a-entity>
<a-entity
id="box-handle-2"
data-magnet-range="0.2,0.1,360,180"
data-pick-up="parent"
magnet-range-debug="range:0.2,0.1"

class="magnet-left magnet-right"
position="0 0 0.15"
rotation="90 180 90"
>
<!--magnet-range-debug="range:0.2,0.1"-->
<box></box>
</a-entity>
</a-gltf-model>
Expand Down Expand Up @@ -596,23 +594,25 @@
<a-entity
id="stew-handle-1"
data-magnet-range="0.2,0.1,360,180"
magnet-range-debug="range:0.2,0.1"

data-pick-up="parent"
class="magnet-left magnet-right"
position="0 0.35 -0.35"
rotation="0 90 0"
>
<!--magnet-range-debug="range:0.2,0.1"-->
<box></box>
</a-entity>
<a-entity
id="stew-handle-2"
data-magnet-range="0.2,0.1,360,180"
data-pick-up="parent"
magnet-range-debug="range:0.2,0.1"

class="magnet-left magnet-right"
position="0 0.35 0.35"
rotation="0 90 0"
>
<!--magnet-range-debug="range:0.2,0.1"-->
<box></box>
</a-entity>
</a-gltf-model>
Expand Down Expand Up @@ -645,9 +645,11 @@
src="#table-gltf"
position="-2 0 0.8"
rotation="0 51 0"
scale="1.5 1.5 1.5"
physx-body-from-model="type: static;"

physx-body="type: static;"
>
<!-- -->

<!-- A navmesh-hole plane is used to exclude the area beneath it from navigation -->
<a-plane
id="tablenavmesh"
Expand All @@ -665,8 +667,8 @@
src="#table-gltf"
position="-2 0 3"
rotation="0 128 0"
scale="1.5 1.5 1.5"
physx-body-from-model="type: static;"

physx-body="type: static;"
>
<a-plane
id="tablenavmesh"
Expand Down Expand Up @@ -704,7 +706,7 @@
</a-cylinder>
</a-entity>
</a-box>
<!-- Event listener for the button -->
<!-- Event listener for the button
<script>
document.addEventListener('DOMContentLoaded', () => {
const buttonEl = document.querySelector('#teleport-button');
Expand All @@ -714,7 +716,7 @@
});
});
</script>

-->
<!-- A dynamic clock model -->
<a-gltf-model
id="clock"
Expand Down
77 changes: 0 additions & 77 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,84 +179,7 @@ AFRAME.registerComponent("toggle-physics", {
* When a hand "grabs" a ladder rung, movement constraints are adjusted so the user can "pull" themselves up.
* Releasing the ladder returns movement to normal navigation.
*/
AFRAME.registerComponent("ladder", {
schema: {
cameraRig: {
default: '' // Selector for the camera rig element
},
grabbables: {
default: '' // CSS selector for elements that can be grabbed on the ladder (like ladder handles)
}
},
init () {
// Bind event handler methods to keep 'this' context.
this.ladderGrab = this.ladderGrab.bind(this);
this.ladderRelease = this.ladderRelease.bind(this);

// Store initial positions and arrays for multiple hands.
this.startingRigPosition = new THREE.Vector3();
this.startingHandPosition = new THREE.Vector3();
this.ladderHands = []; // Hands currently on the ladder
this.grabbables = []; // List of ladder parts that can be grabbed
this.cameraRig = document.querySelector(this.data.cameraRig);

// If there are grabbable elements specified, set them up to listen for grab events.
if (this.data.grabbables) {
for (const el of this.el.querySelectorAll(this.data.grabbables)) {
this.grabbables.push(el);
// Listen for 'grabbed' and 'released' custom events to handle ladder interactions.
el.addEventListener('grabbed', this.ladderGrab);
el.addEventListener('released', this.ladderRelease);
}
}
},
ladderRelease(e) {
// On release, remove the hand from the ladderHands array.
const oldActiveHand = e.detail.byNoMagnet;
let index;
while ((index=this.ladderHands.indexOf(oldActiveHand))!==-1) this.ladderHands.splice(index,1);

const activeHand = this.ladderHands[0];
if (activeHand) {
// If there's still another hand on the ladder, reset starting positions for the camera rig.
this.startingHandPosition.copy(activeHand.object3D.position);
this.startingRigPosition.copy(this.cameraRig.object3D.position);
} else {
// If no hands remain on the ladder, re-enable normal navigation via navmesh constraint.
this.cameraRig.setAttribute('simple-navmesh-constraint', 'enabled', true);
}
},
ladderGrab(e) {
// On grab, store the current hand position and rig position as reference points.
const activeHand = e.detail.byNoMagnet;
this.startingHandPosition.copy(activeHand.object3D.position);
this.startingRigPosition.copy(this.cameraRig.object3D.position);
// Put this hand at the front of the ladderHands array
this.ladderHands.unshift(activeHand);
this.holdingLadder = true;
// Disable navmesh constraints to allow free "pulling" movement.
this.cameraRig.setAttribute('simple-navmesh-constraint', 'enabled', false);
},
tick () {
// Each frame, if at least one hand is on the ladder, adjust the cameraRig position so the user can simulate climbing.
const activeHand = this.ladderHands[0];
if (activeHand) {
// Calculate cameraRig position by offsetting its original position by how the hand moves.
this.cameraRig.object3D.position.subVectors(this.startingHandPosition, activeHand.object3D.position);
// Rotate this offset by the rig's current orientation
this.cameraRig.object3D.position.applyQuaternion(this.cameraRig.object3D.quaternion);
// Add the starting rig position to preserve the original reference frame
this.cameraRig.object3D.position.add(this.startingRigPosition);
}
},
remove () {
// Cleanup: remove event listeners from grabbables
this.grabbables.forEach(el => {
el.removeEventListener('grabbed', this.ladderGrab);
el.removeEventListener('released', this.ladderRelease);
});
}
});


// Once the DOM content is fully loaded, run this setup function.
Expand Down
19 changes: 19 additions & 0 deletions make-transparent.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@

//*SCRIPT TO ALLOW GLTF MODELS TO BECOME TRANSPARENT, well in this case INVISISBLE so they can act as colliders **//

AFRAME.registerComponent('make-transparent', {
init: function () {
this.el.addEventListener('model-loaded', (e) => {
const object3D = e.detail.model;

// Traverse the GLTF model and make all materials transparent
object3D.traverse((node) => {
if (node.isMesh && node.material) {
node.material.transparent = true; // Enable transparency
node.material.opacity = 0; // Set desired opacity
node.material.depthWrite = false; // Prevent depth issues
}
});
});
}
});

0 comments on commit 1f74085

Please sign in to comment.