how to create a billboard .i3dm file?

Hi everyone

I see the example Tileset with tree billboards in 3d-tiles-samples. It is nice.

I wonder how can I embed billboard effect into a glTF model.

Or as the example description says, using a vector tile (is there any example of vector tile?)

Thanks

Chris

The billboard effect is part of the shader. The vertex shader looks like:

attribute vec3 a_position;
attribute vec3 a_normal;
varying vec3 v_normal;
uniform mat3 u_normalMatrix;
uniform mat4 u_modelViewMatrix;
uniform mat4 u_projectionMatrix;
attribute vec2 a_texcoord0;
varying vec2 v_texcoord0;
void main(void) {
// Billboard code. Remove all rotation and scaling from the modelView matrix
mat4 modelViewMatrix = mat4(1.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0);
modelViewMatrix[3] = u_modelViewMatrix[3];
vec4 pos = modelViewMatrix * vec4(a_position, 1.0);
v_normal = u_normalMatrix * a_normal;
v_texcoord0 = a_texcoord0;
gl_Position = u_projectionMatrix * pos;
}

``

And yeah, in the future it would be a vector tile instead but that area of 3D Tiles is still a work-in-progress.

Hi Sean

Thanks for answering. I have seen the shader code in treebillboard.i3dm.

Is the billboard an ordinary gltf model but with no rotation and scaling in the vertex shader.

If so, can I convert any 3d model in .i3dm file into billboard by specifying the modelViewMatrix in the shader.

Thanks

Chris

在 2016年10月10日星期一 UTC+8下午9:45:22,Sean Lilley写道:

Yeah exactly, any 3D model can be made into a billboard by editing the shader like that.

Hi Sean
I have made my own treebillboard 3d-tiles.

The treebillboard.glb is extracted from the treebillboard.i3dm in 3d-tiles-samples. The billboards can be displayed when the camera is close to them.

But when the camera is far away, they become too small to distinguish.

I assume the rotation and scaling are both removed in a billboard.i3dm. As myresult shows, only rotation is removed but not scaling.

I have upload my .i3dm file.

Can you tell me how to remove the scaling of billboards.

Chris

在 2016年10月11日星期二 UTC+8下午9:27:09,Sean Lilley写道:

gridlowID_0.i3dm (438 KB)

Yeah the vertex shader would need to be modified to apply a scale that is independent of distance.

Try this out. Tweak the value 50.0 to your liking.

precision highp float;

attribute vec3 a_position;

attribute vec3 a_normal;

varying vec3 v_normal;

uniform mat3 u_normalMatrix;

uniform mat4 u_modelViewMatrix;

uniform mat4 u_projectionMatrix;

attribute vec2 a_texcoord0;

varying vec2 v_texcoord0;

void main(void) {

// Billboard code. Remove all rotation and scaling from the modelView matrix

mat4 modelViewMatrix = mat4(1.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0);

modelViewMatrix[3] = u_modelViewMatrix[3];

float distance = -modelViewMatrix[3][2]; // Get z value in eye-space

float scale = distance / 50.0;

vec4 pos = modelViewMatrix * vec4(scale * a_position, 1.0);

v_normal = u_normalMatrix * a_normal;

v_texcoord0 = a_texcoord0;

gl_Position = u_projectionMatrix * pos;

}

``

Thanks Sean,
I have removed scaling from my treebillboard by modifying shaders as you said. It works.

But there is a new problem. Now the billboard is deformed like the following image. It is not directly facing the camera.

在 2016年10月19日星期三 UTC+8上午8:22:37,Sean Lilley写道:

Oh hm, I only tested the new changes with a single glTF but there may be something I overlooked with i3dm. I’ll check this out later.