# 3D world gui

**URL:** <https://forum.defold.com/t/3d-world-gui/74906>\
**Category:** Questions\
**Created:** [November 9, 2023, 11:01pm UTC](https://forum.defold.com/t/3d-world-gui/74906 "2023-11-09T23:01:54Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [November 10, 2023, 6:42am UTC](https://forum.defold.com/t/3d-world-gui/74906/3 "2023-11-10T06:42:32Z")

</div>

You can read here about gui in world coordinates

> [@How to GUI in Defold](https://forum.defold.com/t/how-to-gui-in-defold/73256):
>
> How to GUI in Defold [intro] Introglowing_star Hello! I’m Insality glowing_star In this thread, I’ll be sharing some notes on How to make GUI in Defold. I’ve been working with Defold for over 6 years now, and during this time, I’ve gained a lot of experience with GUI. I hope some of my notes can be helpful for you! Feel free to share your own tips and notes as well. A big part of this section will be about [Druid](https://github.com/Insality/druid), as I believe it can make your GUI life much easier if you use it correctly. …

About 3d it worked same, but you have new problems.

1)You need to fix distance field shader. Shader worked in pixels not in meters so df font will be blurry

```lua

varying lowp vec2 var_texcoord0;
varying lowp vec4 var_face_color;
varying lowp vec4 var_outline_color;
varying lowp vec4 var_sdf_params;

uniform mediump sampler2D texture_sampler;

void main()
{
    lowp float distance = texture2D(texture_sampler, var_texcoord0).x;

    lowp float sdf_edge = var_sdf_params.x;
    lowp float sdf_outline = var_sdf_params.y;
    lowp float sdf_smoothing = var_sdf_params.z/100.0;

    lowp float alpha = smoothstep(sdf_edge - sdf_smoothing, sdf_edge + sdf_smoothing, distance);
    lowp float outline_alpha = smoothstep(sdf_outline - sdf_smoothing, sdf_outline + sdf_smoothing, distance);
    lowp vec4 color = mix(var_outline_color, var_face_color, alpha);

    gl_FragColor = color * outline_alpha;
}

```

2)you need enable depth test for gui in your shader. To avoid gui rendered on top of models

3)you need to enable depth write for gui, or make your own sort of gui nodes. To avoid far gui rendered on top of near gui.

4)About look at camera. You need convert camera rotation quaternion to euler.

```lua
player.camera.rotation_euler.x, player.camera.rotation_euler.y, player.camera.rotation_euler.z = COMMON.LUME.quat_to_euler_degrees(player.camera.rotation)

--[[
https://android.googlesource.com/platform/external/jmonkeyengine/+/59b2e6871c65f58fdad78cd7229c292f6a177578/engine/src/core/com/jme3/math/Quaternion.java
Convert a quaternion into euler angles (roll, pitch, yaw)
roll is rotation around x in radians (counterclockwise)
pitch is rotation around y in radians (counterclockwise)
yaw is rotation around z in radians (counterclockwise)
--]]
function lume.quat_to_euler_degrees(q)
	-- Extract the quaternion components
	local x, y, z, w = q.x, q.y, q.z, q.w

	local sqw = w * w;
	local sqx = x * x;
	local sqy = y * y;
	local sqz = z * z;
	-- normalized is one, otherwise is correction factor
	local unit = sqx + sqy + sqz + sqw

	local test = x * y + z * w;
	local roll, pitch, yaw
	-- singularity at north pole
	if (test > 0.499 * unit) then
		roll = 2 * MATH_ATAN2(x, w);
		pitch = PI_HALF;
		yaw = 0;
		--// singularity at south pole
	elseif (test < -0.499 * unit) then
		roll = -2 * MATH_ATAN2(x, w);
		pitch = -PI_HALF;
		yaw = 0;
	else
		roll = MATH_ATAN2(2 * y * w - 2 * x * z, sqx - sqy - sqz + sqw); -- roll or heading
		pitch = MATH_ASIN(2 * test / unit); -- pitch or attitude
		yaw = MATH_ATAN2(2 * x * w - 2 * y * z, -sqx + sqy - sqz + sqw); -- yaw or bank
	end
	--something wrong with names
	--return roll, pitch, yaw
	return MATH_DEG(yaw), MATH_DEG(roll), MATH_DEG(pitch)
end

```

---

_[View the full topic](https://forum.defold.com/t/3d-world-gui/74906)._