GLTF model rendering incorrectly when aframe-effects added to scene
up vote
0
down vote
favorite
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
three.js aframe post-processing gltf
edited Nov 12 at 16:56
gman
46k17109196
asked Nov 12 at 12:30
Eoin O Sullivan
3017
add a comment |
up vote
0
down vote
favorite
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
three.js aframe post-processing gltf
edited Nov 12 at 16:56
gman
46k17109196
asked Nov 12 at 12:30
Eoin O Sullivan
3017
In both of your screenshots the model is rendering. What is exactly the problem?
– Diego Marcos
Nov 12 at 15:50
Hey Diego, thank you so much for getting back to me. The problem is the wavy lines on the steps and if you look at the window box seems to be having an issue determining which face should be displayed if that makes sense? I may be misidentifying an issue and I apologise if that's the case.
– Eoin O Sullivan
Nov 12 at 16:41
That’s probably caused by the postprocessing effects you’re applying and how they combine. It’s not related to the model.
– Diego Marcos
Nov 12 at 16:49
Thanks Diego. Good to know. I'll monkey around with the settings and see if I can calm it down. I appreciate you getting back to me.
– Eoin O Sullivan
Nov 12 at 16:51
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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
three.js aframe post-processing gltf
edited Nov 12 at 16:56
gman
46k17109196
asked Nov 12 at 12:30
Eoin O Sullivan
3017
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
<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><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>three.js aframe post-processing gltf
three.js aframe post-processing gltf
edited Nov 12 at 16:56
gman
46k17109196
asked Nov 12 at 12:30
Eoin O Sullivan
3017
edited Nov 12 at 16:56
gman
46k17109196
asked Nov 12 at 12:30
Eoin O Sullivan
3017
edited Nov 12 at 16:56
gman
46k17109196
edited Nov 12 at 16:56
gman
46k17109196
edited Nov 12 at 16:56
gman
46k17109196
46k17109196
asked Nov 12 at 12:30
Eoin O Sullivan
3017
asked Nov 12 at 12:30
Eoin O Sullivan
3017
asked Nov 12 at 12:30
Eoin O Sullivan
3017
3017
In both of your screenshots the model is rendering. What is exactly the problem?
– Diego Marcos
Nov 12 at 15:50
Hey Diego, thank you so much for getting back to me. The problem is the wavy lines on the steps and if you look at the window box seems to be having an issue determining which face should be displayed if that makes sense? I may be misidentifying an issue and I apologise if that's the case.
– Eoin O Sullivan
Nov 12 at 16:41
That’s probably caused by the postprocessing effects you’re applying and how they combine. It’s not related to the model.
– Diego Marcos
Nov 12 at 16:49
Thanks Diego. Good to know. I'll monkey around with the settings and see if I can calm it down. I appreciate you getting back to me.
– Eoin O Sullivan
Nov 12 at 16:51
add a comment |
In both of your screenshots the model is rendering. What is exactly the problem?
– Diego Marcos
Nov 12 at 15:50
Hey Diego, thank you so much for getting back to me. The problem is the wavy lines on the steps and if you look at the window box seems to be having an issue determining which face should be displayed if that makes sense? I may be misidentifying an issue and I apologise if that's the case.
– Eoin O Sullivan
Nov 12 at 16:41
That’s probably caused by the postprocessing effects you’re applying and how they combine. It’s not related to the model.
– Diego Marcos
Nov 12 at 16:49
Thanks Diego. Good to know. I'll monkey around with the settings and see if I can calm it down. I appreciate you getting back to me.
– Eoin O Sullivan
Nov 12 at 16:51
In both of your screenshots the model is rendering. What is exactly the problem?
– Diego Marcos
Nov 12 at 15:50
In both of your screenshots the model is rendering. What is exactly the problem?
– Diego Marcos
Nov 12 at 15:50
Hey Diego, thank you so much for getting back to me. The problem is the wavy lines on the steps and if you look at the window box seems to be having an issue determining which face should be displayed if that makes sense? I may be misidentifying an issue and I apologise if that's the case.
– Eoin O Sullivan
Nov 12 at 16:41
Hey Diego, thank you so much for getting back to me. The problem is the wavy lines on the steps and if you look at the window box seems to be having an issue determining which face should be displayed if that makes sense? I may be misidentifying an issue and I apologise if that's the case.
– Eoin O Sullivan
Nov 12 at 16:41
That’s probably caused by the postprocessing effects you’re applying and how they combine. It’s not related to the model.
– Diego Marcos
Nov 12 at 16:49
That’s probably caused by the postprocessing effects you’re applying and how they combine. It’s not related to the model.
– Diego Marcos
Nov 12 at 16:49
Thanks Diego. Good to know. I'll monkey around with the settings and see if I can calm it down. I appreciate you getting back to me.
– Eoin O Sullivan
Nov 12 at 16:51
Thanks Diego. Good to know. I'll monkey around with the settings and see if I can calm it down. I appreciate you getting back to me.
– Eoin O Sullivan
Nov 12 at 16:51
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53262247%2fgltf-model-rendering-incorrectly-when-aframe-effects-added-to-scene%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53262247%2fgltf-model-rendering-incorrectly-when-aframe-effects-added-to-scene%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
In both of your screenshots the model is rendering. What is exactly the problem?
– Diego Marcos
Nov 12 at 15:50
Hey Diego, thank you so much for getting back to me. The problem is the wavy lines on the steps and if you look at the window box seems to be having an issue determining which face should be displayed if that makes sense? I may be misidentifying an issue and I apologise if that's the case.
– Eoin O Sullivan
Nov 12 at 16:41
That’s probably caused by the postprocessing effects you’re applying and how they combine. It’s not related to the model.
– Diego Marcos
Nov 12 at 16:49
Thanks Diego. Good to know. I'll monkey around with the settings and see if I can calm it down. I appreciate you getting back to me.
– Eoin O Sullivan
Nov 12 at 16:51