{"action":"created","issue":{"url":"https://api.github.com/repos/thothbot/parallax/issues/24","labels_url":"https://api.github.com/repos/thothbot/parallax/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/thothbot/parallax/issues/24/comments","events_url":"https://api.github.com/repos/thothbot/parallax/issues/24/events","html_url":"https://github.com/thothbot/parallax/issues/24","id":58497158,"number":24,"title":"Rendering differences with transparency & fog","user":{"login":"bartolomiew","id":2544970,"avatar_url":"https://avatars.githubusercontent.com/u/2544970?v=3","gravatar_id":"","url":"https://api.github.com/users/bartolomiew","html_url":"https://github.com/bartolomiew","followers_url":"https://api.github.com/users/bartolomiew/followers","following_url":"https://api.github.com/users/bartolomiew/following{/other_user}","gists_url":"https://api.github.com/users/bartolomiew/gists{/gist_id}","starred_url":"https://api.github.com/users/bartolomiew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bartolomiew/subscriptions","organizations_url":"https://api.github.com/users/bartolomiew/orgs","repos_url":"https://api.github.com/users/bartolomiew/repos","events_url":"https://api.github.com/users/bartolomiew/events{/privacy}","received_events_url":"https://api.github.com/users/bartolomiew/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-02-22T09:50:02Z","updated_at":"2015-02-23T20:49:55Z","closed_at":null,"body":"While trying to port this demo : http://stemkoski.github.io/Three.js/Translucence.html I can see several differences with Three.js. Fog doesn't work as expected so I've to add skybox to the scene, when looking at the scene in front rendering is almost the same, but behind doesn't work as expected either.\r\n````xml\r\nimport thothbot.parallax.core.client.AnimatedScene;\r\nimport thothbot.parallax.core.client.controls.OrbitControls;\r\nimport thothbot.parallax.core.client.gl2.enums.TextureWrapMode;\r\nimport thothbot.parallax.core.client.textures.Texture;\r\nimport thothbot.parallax.core.shared.cameras.PerspectiveCamera;\r\nimport thothbot.parallax.core.shared.geometries.BoxGeometry;\r\nimport thothbot.parallax.core.shared.geometries.PlaneGeometry;\r\nimport thothbot.parallax.core.shared.geometries.SphereGeometry;\r\nimport thothbot.parallax.core.shared.lights.AmbientLight;\r\nimport thothbot.parallax.core.shared.lights.PointLight;\r\nimport thothbot.parallax.core.shared.materials.Material.BLENDING;\r\nimport thothbot.parallax.core.shared.materials.Material.SIDE;\r\nimport thothbot.parallax.core.shared.materials.MeshBasicMaterial;\r\nimport thothbot.parallax.core.shared.materials.MeshLambertMaterial;\r\nimport thothbot.parallax.core.shared.materials.MeshPhongMaterial;\r\nimport thothbot.parallax.core.shared.math.Color;\r\nimport thothbot.parallax.core.shared.math.Vector2;\r\nimport thothbot.parallax.core.shared.objects.Mesh;\r\nimport thothbot.parallax.core.shared.scenes.FogExp2;\r\n\r\npublic class Sample15Translucence extends AnimatedScene {\r\n\r\n\t// field of view\r\n\tprivate static final double VIEW_ANGLE = 45d;\r\n\r\n\t// near\r\n\tprivate static final double NEAR = 0.1d;\r\n\r\n\t// far\r\n\tprivate static final double FAR = 20000d;\r\n\r\n\t// camera\r\n\tprivate PerspectiveCamera camera;\r\n\r\n\t// control\r\n\tOrbitControls controls;\r\n\r\n\tprivate static final String texture_floor = \"./static/textures/checkerboard.jpg\";\r\n\tprivate static final String texture_moon = \"./static/textures/moon.jpg\";\r\n\tprivate static final String texture_redball = \"./static/textures/redball.png\";\r\n\t\r\n\t@Override\r\n\tprotected void onStart() {\r\n\r\n\t\t// CAMERA\r\n\t\tcamera = new PerspectiveCamera(VIEW_ANGLE, getRenderer()\r\n\t\t\t\t.getAbsoluteAspectRation(), NEAR, FAR);\r\n\t\tgetScene().add(camera);\r\n\t\tcamera.getPosition().set(0, 150, 400);\r\n\t\tcamera.lookAt(getScene().getPosition());\r\n\r\n\t\t// CONTROLS\r\n\t\tcontrols = new OrbitControls(camera, getCanvas());\r\n\r\n\t\t// LIGHT\r\n\t\tPointLight light = new PointLight(0xffffff);\r\n\t\tlight.getPosition().set(0,250,0);\r\n\t\tgetScene().add(light);\r\n\r\n\t\t// FLOOR\r\n\t\tTexture floorTexture = new Texture(texture_floor);\r\n\t\tfloorTexture.setWrapS(TextureWrapMode.REPEAT);\r\n\t\tfloorTexture.setWrapT(TextureWrapMode.REPEAT);\r\n\t\tfloorTexture.setRepeat(new Vector2(10, 10));\r\n\t\tMeshBasicMaterial floorMaterial = new MeshBasicMaterial();\r\n\t\tfloorMaterial.setMap(floorTexture);\r\n\t\tfloorMaterial.setSide(SIDE.DOUBLE);\r\n\r\n\t\tPlaneGeometry floorGeometry = new PlaneGeometry(1000, 1000, 10, 10);\r\n\t\tMesh floor = new Mesh(floorGeometry, floorMaterial);\r\n\t\tfloor.getPosition().setY(-0.5);\r\n\t\tfloor.getRotation().setX(Math.PI / 2);\r\n\t\tgetScene().add(floor);\r\n\r\n\t\t// SKYBOX/FOG\r\n\t\tBoxGeometry skyBoxGeometry = new BoxGeometry(10000, 10000, 10000);\r\n\t\tMeshBasicMaterial skyBoxMaterial = new MeshBasicMaterial();\r\n\t\tskyBoxMaterial.setColor(new Color(0x9999ff));\r\n\t\tskyBoxMaterial.setSide(SIDE.BACK);\r\n\t\tMesh skyBox = new Mesh(skyBoxGeometry, skyBoxMaterial);\r\n\t\tgetScene().add(skyBox);\t\t\t\t\t\t\t\t\t// <---\t\t\r\n\t\tgetScene().setFog(new FogExp2( 0x9999ff, 0.00025 ));\t// <---\r\n\t\t\r\n\t\t////////////\r\n\t\t// CUSTOM //\r\n\t\t////////////\r\n\t\t\r\n\t\t// radius, segments along width, segments along height\r\n\t\tSphereGeometry sphereGeom =  new SphereGeometry( 40, 32, 16 );\r\n\t\t\r\n\t\t// overlapping translucent red/green/blue spheres\r\n\t\tMeshBasicMaterial redMaterial = new MeshBasicMaterial();\r\n\t\tredMaterial.setColor(new Color(0xff0000));\r\n\t\tredMaterial.setTransparent(true);\r\n\t\tredMaterial.setOpacity(0.5); \r\n\t\tMesh sphere = new Mesh( sphereGeom.clone(), redMaterial );\r\n\t\tsphere.getPosition().set(-100, 50, 50);\r\n\t\tgetScene().add( sphere );\t\r\n\t\t\r\n\t\tMeshBasicMaterial greenMaterial = new MeshBasicMaterial();\r\n\t\tgreenMaterial.setColor(new Color(0x00ff00));\r\n\t\tgreenMaterial.setTransparent(true);\r\n\t\tgreenMaterial.setOpacity(0.5); \r\n\t\tsphere = new Mesh( sphereGeom.clone(), greenMaterial );\r\n\t\tsphere.getPosition().set(-100, 50, -50);\r\n\t\tgetScene().add( sphere );\t\r\n\t\t\r\n\t\tMeshBasicMaterial blueMaterial = new MeshBasicMaterial();\r\n\t\tblueMaterial.setColor(new Color(0x0000ff));\r\n\t\tblueMaterial.setTransparent(true);\r\n\t\tblueMaterial.setOpacity(0.5); \r\n\t\tsphere = new Mesh( sphereGeom.clone(), blueMaterial );\r\n\t\tsphere.getPosition().set(-100, 50, -150);\r\n\t\tgetScene().add( sphere );\t\r\n\t\t\r\n\t\t// basic material translucence\r\n\t\tMeshBasicMaterial darkMaterial = new MeshBasicMaterial();\r\n\t\tdarkMaterial.setColor(new Color(0x333333));\r\n\t\tdarkMaterial.setTransparent(true);\r\n\t\tdarkMaterial.setOpacity(0.95); \r\n\t\tsphere = new Mesh( sphereGeom.clone(), darkMaterial );\r\n\t\tsphere.getPosition().set(0, 50, 0);\r\n\t\tgetScene().add( sphere );\t\t\r\n\t \r\n\t\t// phong material translucence\r\n\t\tMeshPhongMaterial darkMaterialPhong = new MeshPhongMaterial();\r\n\t\tdarkMaterialPhong.setColor(new Color(0x333333));\r\n\t\tdarkMaterialPhong.setTransparent(true);\r\n\t\tdarkMaterialPhong.setOpacity(0.95); \r\n\t\tsphere = new Mesh( sphereGeom.clone(), darkMaterialPhong );\r\n\t\tsphere.getPosition().set(100, 50, 0);\r\n\t\tgetScene().add( sphere );\r\n\t\t\r\n\t\t// image material translucence\r\n\t\tTexture moonTexture = new Texture( texture_moon );\r\n\t\tMeshLambertMaterial moonMaterial = new MeshLambertMaterial();\r\n\t\tmoonMaterial.setMap(moonTexture);\r\n\t\tmoonMaterial.setTransparent(true);\r\n\t\tmoonMaterial.setOpacity(0.75);\r\n\t\tMesh moon = new Mesh( sphereGeom.clone(), moonMaterial );\r\n\t\tmoon.getPosition().set(200, 50, 0);\r\n\t\tgetScene().add( moon );\t\r\n\t\t\r\n\t\t// translucent blue sphere with additive blending for \"glow\" effect\r\n\t\tdarkMaterial = new MeshBasicMaterial();\r\n\t\tdarkMaterial.setColor(new Color(0x0000ff));\r\n\t\tdarkMaterial.setTransparent(true);\r\n\t\tdarkMaterial.setOpacity(0.8); \r\n\t\tdarkMaterial.setBlending(BLENDING.ADDITIVE);\r\n\t\tsphere = new Mesh( sphereGeom.clone(), darkMaterial );\r\n\t\tsphere.getPosition().set(0, 50, -100);\r\n\t\tgetScene().add( sphere );\t\r\n\t\t\r\n\t\t// translucent blue sphere with additive blending and phong shading\r\n\t\t// added ambient light and color for better results\r\n\t\tAmbientLight ambientLight = new AmbientLight(0x444444);\r\n\t\tgetScene().add(ambientLight);\r\n\t\t\r\n\t\tdarkMaterialPhong = new MeshPhongMaterial();\r\n\t\tdarkMaterialPhong.setColor(new Color(0x0000ff));\r\n\t\tdarkMaterialPhong.setAmbient(new Color(0xff0000));\r\n\t\tdarkMaterialPhong.setTransparent(true);\r\n\t\tdarkMaterialPhong.setBlending(BLENDING.ADDITIVE);\r\n\t\tsphere = new Mesh( sphereGeom.clone(), darkMaterialPhong );\r\n\t\tsphere.getPosition().set(100, 50, -100);\r\n\t\tgetScene().add( sphere );\t\r\n\t\t\r\n\t\t// image with transparency on a plane\r\n\t\t\r\n\t\tTexture ballTexture = new Texture( texture_redball );\t// <--- look behind to see bug\r\n\t\tMeshBasicMaterial ballMaterial = new MeshBasicMaterial();\r\n\t\tballMaterial.setMap(ballTexture);\r\n\t\tballMaterial.setTransparent(true);\r\n\t\tballMaterial.setSide(SIDE.DOUBLE);\r\n\t\tPlaneGeometry planeGeometry = new PlaneGeometry(100,100,1,1);\r\n\t\tMesh plane = new Mesh( planeGeometry, ballMaterial );\r\n\t\tplane.getPosition().set( 200, 50, -100 );\r\n\t\tgetScene().add(plane);\t\t\r\n\t}\r\n\r\n\t@Override\r\n\tprotected void onUpdate(double duration) {\r\n\t\t// Called when the animation should be updated.\r\n\t\tcontrols.update();\r\n\t\tgetRenderer().render(getScene(), camera);\r\n\t}\r\n\r\n}\r\n````"},"comment":{"url":"https://api.github.com/repos/thothbot/parallax/issues/comments/75628723","html_url":"https://github.com/thothbot/parallax/issues/24#issuecomment-75628723","issue_url":"https://api.github.com/repos/thothbot/parallax/issues/24","id":75628723,"user":{"login":"bartolomiew","id":2544970,"avatar_url":"https://avatars.githubusercontent.com/u/2544970?v=3","gravatar_id":"","url":"https://api.github.com/users/bartolomiew","html_url":"https://github.com/bartolomiew","followers_url":"https://api.github.com/users/bartolomiew/followers","following_url":"https://api.github.com/users/bartolomiew/following{/other_user}","gists_url":"https://api.github.com/users/bartolomiew/gists{/gist_id}","starred_url":"https://api.github.com/users/bartolomiew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bartolomiew/subscriptions","organizations_url":"https://api.github.com/users/bartolomiew/orgs","repos_url":"https://api.github.com/users/bartolomiew/repos","events_url":"https://api.github.com/users/bartolomiew/events{/privacy}","received_events_url":"https://api.github.com/users/bartolomiew/received_events","type":"User","site_admin":false},"created_at":"2015-02-23T20:49:55Z","updated_at":"2015-02-23T20:49:55Z","body":"Nice to see you are able to find what's wrong so quickly"}}