Using shader attribute to define vertices locations

Hello,

I am trying to draw a instanced triangles by using a vertex shader.

I have build an mesh using this code:

var lines = new BABYLON.Mesh(“custom”, scene);
var positions = [0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0];
var indices = [0, 1, 2,3,4,5];
var vertexData = new BABYLON.VertexData();
vertexData.positions = positions;
vertexData.indices = indices;
vertexData.applyToMesh(lines);

Then I create two instances:

var InstanceA = lines.createInstance("SphereInstanceA");
var InstanceB = lines.createInstance("SphereInstanceB");

I have defined a vertices positions by using typed array (it has vector4 data, 3 points):

var shaderpos=Float32Array.from([0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1,0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1]);

I pass those locations to my vertex shader with this code:

var customInstancesBuffer = new BABYLON.Buffer(engine, shaderpos , true, 4*Float32Array.BYTES_PER_ELEMENT, 1, 1,1);
var customVertBuffer = customInstancesBuffer.createVertexBuffer("customattr", 0, 4,4*Float32Array.BYTES_PER_ELEMENT,1);
lines.setVerticesBuffer(customVertBuffer);

Finally my shader code is

precision highp float;\
attribute vec4 customattr;\
attribute vec3 position;\
attribute vec2 uv;\
attribute vec4 world0;\

attribute vec4 world1;
attribute vec4 world2;
attribute vec4 world3;
uniform mat4 viewProjection;
varying vec2 vUV;
void main(void) {
gl_Position = viewProjection * mat4(world0, world1, world2, world3) * vec4(customattr.x,customattr.y,customattr.z, 1.0);\

I shoud see 3 triangles to be draw at exactly at same position (so basically seeing one triangle), but I see nothing. Here is the sandbox: https://www.babylonjs-playground.com/#G3P9LH#4

Thank you :slight_smile:

So the error in console is

drawElementsInstanced: no buffer is bound to enabled attribute

What would cause that to happen?

Not sure it is related yet but you only provide position and customattr

where are the others mentioned in your shader? like world1, normal, etc…

world0 to world3 is provided by Babylonjs when using instances. “Normal” on the other hand, is not needed. There are really no documentation in the internet, only source to learn was this thread; Custom Attributes for Instanced Mesh to be used with Custom Shaders
and this sandbox: https://www.babylonjs-playground.com/#G3P9LH#2

After doing little more research I figured out that I need to apply all vertex data per instance, like this for 3 instances:

var shaderpos=Float32Array.from([
    0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1,0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1,
    0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1,0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1,
    0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1,0, 0, 0,1, 1, 2, 0,1, 1, 0, 0,1
    ]);

However, this attribute is passed as vector 4. Obivoisly, it should be splitted by vertex (So each vertex get one 4 number from array). However it is not splitted and whole 72 size array is passed into vec4 variable causing program to crash. Sandbox:
https://www.babylonjs-playground.com/#E6QDXB

Ok sorry I was on my phone :slight_smile:
so you need to use 4 and not 4 as the Buffer expects the stride in float (not in bytes):
https://www.babylonjs-playground.com/#E6QDXB#2