This is my first question about Aframe so please let me know if you need additional info.
I have tried adding this gltf model to my project https://poly.google.com/view/1O6BWfUB6ta
I am having issues with how my gltf models are rendering when I add the aframe effects into my scene.
When I remove the effects the model renders perfect.
You can see a demo of my project here http://www.applaudlabs.com/belvedere/
I saw an example here that is working with gltf models and the effects so I know it should work. https://curious-electric.com/w/experiments/aframe/campfirevr/
And I also checked th model in the gltf view with no issues https://gltf-viewer.donmccurdy.com/
Please see my code below
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script>
<!-- Bootstrap JS Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- plugins -->
<!-- ocean -->
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/aframe-extras.min.js"></script>
<!-- post processing effects -->
<script src="aframe-effects.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="vr_bg">
<div class="overlay_container">
<a class="logo_link" href=""><img class="logo_svg" src="logo.svg" alt="Continuous Ventures"></a>
</div>
<!-- scene working without effects -->
<a-scene>
<!-- scene not working with effects
<a-scene effects="bloom, godrays, fxaa"
godrays="src:#moon; threshold: 0.0 0.0; intensity: 0.6"
bloom="strength:0.6; radius: 0.066;"
fxaa class="fullscreen"
fog="type: linear; far:1000; color: #ffc595; density:0.0025">
-->
<a-assets>
<!-- ocean-->
<img id="water-normal" src="https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg" crossorigin="anonymous" preload="true"/>
<!-- sky -->
<img id="sky" src="sky.jpg" crossorigin="anonymous" preload="true"/>
<img id="sky_reflection" src="water_reflection_sky.jpg" crossorigin="anonymous" preload="true"/>
<!-- Lighthouse-->
<a-asset-item id="lighthouse" src="lighthouse/Lighthouse.gltf"></a-asset-item>
<!-- animation-->
<a-mixin id="fogtransition" dur="8000" easing="ease-in" direction="forward" repeat="0"></a-mixin>
<a-mixin id="cameratransition" dur="36000" easing="ease-out" direction="forward" repeat="0"></a-mixin>
<a-mixin id="suntransition" dur="18000" direction="forward" repeat="0"></a-mixin>
</a-assets>
<!-- fog -->
<a-animation attribute="fog.color"
from="#000"
to="#ec5151"
mixin="fogtransition">
</a-animation>
<a-animation attribute="fog.far"
from="10"
to="20000"
mixin="fogtransition">
</a-animation>
<!-- camera-->
<a-entity id="camera" position="0 0.81 0" rotation="2.9220847551671985 90.98569786677473 0">
<a-camera>
</a-camera>
</a-entity>
<!-- ocean -->
<a-ocean material="metalness:1; normalMap:#water-normal; normalTextureRepeat:10 10;
normalScale:1 1;"
width="400" depth="400"
density="20" speed="0.125"
color="#333" opacity="1"
position="0 -0.4 0"
amplitude= .25"
amplitudeVariance= "1" wobble-normal="">
<a-animation attribute="material.normalTextureOffset"
from="0 0"
to="100 100"
easing="linear"
dur="10000"
fill="both"
repeat="indefinite">
</a-animation>
</a-ocean>
<!-- Lighthouse -->
<a-entity id="Lighthouse" gltf-model="#lighthouse" position="-72.005 0 -25.964" scale="2 2 2">
</a-entity>
<!-- light beam cylinder -->
<a-entity id="LIGHTBEAM" position="-72.005 -9.036 -25.964">
<a-cylinder material="fog:false; color:#fff; opacity:0.5; flatShading:true; emissive:#fff; emissiveIntensity:5"
rotation="-90 0 0"
height="30"
position="0 36 0"radius="10.5"
material=""
geometry="height:900;
radius:1.5">
</a-cylinder>
<a-animation attribute="rotation"
from="0 0 0"
to="0 360 0"
easing="linear"
dur="10000"
fill="forwards"
repeat="indefinite">
</a-animation>
</a-entity>
<!-- sky -->
<a-sky src="#sky" material="" geometry="" scale="300 300 300" radius="5" position="" rotation="0 185 0" visible="">
</a-sky>
<!-- SKY AND AMBIENT-LIKE LIGHT -->
<a-entity light="type: hemisphere; color: #0E192B; groundColor: #1D0A57; intensity: 1"></a-entity>
<a-entity light="type: directional; color: #EEE; intensity: 0.5" position="-1 1 0">
<a-entity position="100.0 100.0 -100.0" geometry="primitive: sphere; radius: 10.0;" material="shader: flat; color: #fff;" id="moon" rotation="" scale="" visible="">
<a-animation attribute="position"
from="-1046.095 -40.092 -14.131"
to="-1046.095 150.092 -14.131"
mixin="suntransition">
</a-animation>
<a-animation attribute="intensity"
from="0"
to="1"
mixin="suntransition">
</a-animation>
<a-animation attribute="color"
from="#ec5151"
to="#e2705a"
mixin="suntransition">
</a-animation>
</a-entity>
</a-entity>
</a-scene>
</div>
</body>
</html>Thank you in advance
Eoin
