I have such a model (screenshot below) that is added directly to the scene (via app.scene.addModel) by swipe and disappears after a while. Due to the fact that my camera moves forward in the location, the swipes remain behind and are not visible, is it possible to somehow attach this model to the camera so that the swipe is always in front of the camera?
I tried to just add the model to the camera via .addComponent(‘model’, model) but I didn’t see anything(
File that creates this model:
var Sprite = pc.createScript('spriteGeneration');
// initialize code called once per entity
Sprite.prototype.initialize = function() {
var SpriteGeneration = (function () {
var VERTS_PER_SPRITE = 6;
var spriteCapacity = 100;
var numVerts = VERTS_PER_SPRITE * spriteCapacity;
var vertexBuffer = null;
var shader = null;
var defaultTexture = null;
var defaultMaterial = null;
var node = null;
var model = null;
var scene = null;
var textures = [];
var materials = [];
var groups = [];
function SpriteGeneration() {
this.x = 0;
this.y = 0;
this.width = 1;
this.height = 1;
this.rotation = Math.PI * 0;
this.scale = [1, 1];
this.origin = {
x: this.width * 0.5,
y: this.height * 0.5
};
this.textureRect = [0, 0, 1, 1];
this.color = new Float32Array([1, 1, 1, 1]);
this.material = defaultMaterial;
this.group = null;
}
SpriteGeneration.sprites = [];
SpriteGeneration.add = function (sprite) {
if (SpriteGeneration.sprites.indexOf(sprite) === -1) {
SpriteGeneration.sprites.push(sprite);
SpriteGeneration.update();
}
};
SpriteGeneration.remove = function (sprite) {
var index = SpriteGeneration.sprites.indexOf(sprite);
if (index !== -1) {
SpriteGeneration.sprites.splice(index, 1);
SpriteGeneration.update();
}
};
SpriteGeneration.virtualPixelSpace = {
w: 1080,
h: 1920
};
SpriteGeneration.scene = null;
SpriteGeneration.init = function (graphicsDevice) {
if (this.initialized) {
return;
}
SpriteGeneration.graphicsDevice = graphicsDevice;
shaderDefinition = {
attributes: {
aVertex: pc.SEMANTIC_ATTR0,
aOrigin: pc.SEMANTIC_ATTR1,
aScale: pc.SEMANTIC_ATTR2,
aRotation: pc.SEMANTIC_ATTR3,
aPosition: pc.SEMANTIC_ATTR4,
aUv0: pc.SEMANTIC_ATTR5,
aColor: pc.SEMANTIC_ATTR6
},
vshader: [
"attribute vec3 aVertex;",
"attribute vec2 aOrigin;",
"attribute vec2 aScale;",
"attribute float aRotation;",
"attribute vec2 aPosition;",
"attribute vec2 aUv0;",
"attribute vec4 aColor;",
"",
"uniform vec2 uResolution;",
"",
"varying vec2 vUv0;",
"varying vec4 vColor;",
"",
"void main(void)",
"{",
" float ox = aOrigin.x;",
" float oy = aOrigin.y;",
" mat4 ogn = mat4(1.0, 0.0, 0.0, 0.0,",
" 0.0, 1.0, 0.0, 0.0,",
" 0.0, 0.0, 1.0, 0.0,",
" ox, oy, 0.0, 1.0 );",
"",
" float sx = aScale.x;",
" float sy = aScale.y;",
" mat4 scl = mat4( sx, 0.0, 0.0, 0.0,",
" 0.0, sy, 0.0, 0.0,",
" 0.0, 0.0, 1.0, 0.0,",
" 0.0, 0.0, 0.0, 1.0 );",
"",
" float ca = cos(aRotation);",
" float sa = sin(aRotation);",
" mat4 rot = mat4( ca, -sa, 0.0, 0.0,",
" sa, ca, 0.0, 0.0,",
" 0.0, 0.0, 1.0, 0.0,",
" 0.0, 0.0, 0.0, 1.0 );",
"",
" float tx = aPosition.x;",
" float ty = aPosition.y;",
" mat4 tra = mat4(1.0, 0.0, 0.0, 0.0,",
" 0.0, 1.0, 0.0, 0.0,",
" 0.0, 0.0, 1.0, 0.0,",
" tx, ty, 0.0, 1.0 );",
"",
" vec4 pos = tra * rot * scl * ogn * vec4(aVertex, 1.0);",
// Map to normalized device coordinates
" pos.x *= 1.0 / uResolution.x;",
" pos.y *= 1.0 / uResolution.y;",
" pos.xy = pos.xy * 2.0 - 1.0;",
" gl_Position = pos;",
"",
" vUv0 = aUv0;",
" vColor = aColor;",
"}"
].join("\n"),
fshader: [
"precision mediump float;",
"",
"varying vec2 vUv0;",
"varying vec4 vColor;",
"",
"uniform sampler2D uColorTexture;",
"uniform sampler2D uAlphaTexture;",
"",
"void main(void)",
"{",
" vec3 rgb = texture2D(uColorTexture, vUv0).rgb;",
" float a = texture2D(uAlphaTexture, vUv0).r;",
" gl_FragColor = vec4(rgb, a) * vColor;",
"}"
].join("\n")
};
shader = new pc.Shader(graphicsDevice, shaderDefinition);
// Create a default white texture for when the sprite is 'untextured'
defaultTexture = new pc.Texture(graphicsDevice, {
width: 1,
height: 1,
format: pc.PIXELFORMAT_R8_G8_B8_A8,
autoMipmap: false
});
defaultTexture.minFilter = pc.FILTER_NEAREST;
defaultTexture.magFilter = pc.FILTER_NEAREST;
defaultTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
defaultTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
var pixel = defaultTexture.lock();
pixel.set([255, 255, 255, 255]);
defaultTexture.unlock();
defaultMaterial = new pc.Material();
defaultMaterial.shader = shader;
// defaultMaterial.setShader(shader);
defaultMaterial.setParameter('uColorTexture', defaultTexture);
defaultMaterial.setParameter('uAlphaTexture', defaultTexture);
defaultMaterial.setParameter('uResolution', [SpriteGeneration.virtualPixelSpace.w, SpriteGeneration.virtualPixelSpace.h]);
groups.push({
texture: defaultTexture,
material: defaultMaterial,
sprites: []
});
// console.log(groups, 'groups');
// Create the vertex format
var vertexFormat = new pc.VertexFormat(graphicsDevice, [
{ semantic: pc.SEMANTIC_ATTR0, components: 3, type: pc.ELEMENTTYPE_FLOAT32 },
{ semantic: pc.SEMANTIC_ATTR1, components: 2, type: pc.ELEMENTTYPE_FLOAT32 },
{ semantic: pc.SEMANTIC_ATTR2, components: 2, type: pc.ELEMENTTYPE_FLOAT32 },
{ semantic: pc.SEMANTIC_ATTR3, components: 1, type: pc.ELEMENTTYPE_FLOAT32 },
{ semantic: pc.SEMANTIC_ATTR4, components: 2, type: pc.ELEMENTTYPE_FLOAT32 },
{ semantic: pc.SEMANTIC_ATTR5, components: 2, type: pc.ELEMENTTYPE_FLOAT32 },
{ semantic: pc.SEMANTIC_ATTR6, components: 4, type: pc.ELEMENTTYPE_FLOAT32 }
]);
// Create a vertex buffer
vertexBuffer = new pc.VertexBuffer(graphicsDevice, vertexFormat, numVerts, pc.USAGE_DYNAMIC);
node = new pc.GraphNode();
node.name = 'Sprite';
model = new pc.Model();
model.graph = node;
this.initialized = true;
};
SpriteGeneration.update = function () {
SpriteGeneration.scene.removeModel(model);
// Regenerate the vertex buffer data from the sprite info
var v = new Float32Array(vertexBuffer.lock());
var x = 0, i, s, p;
var numSprites = SpriteGeneration.sprites.length;
for (i = 0; i < numSprites; i++) {
s = SpriteGeneration.sprites[i];
SpriteGeneration.virtualPixelSpace.w = SpriteGeneration.graphicsDevice.width;
SpriteGeneration.virtualPixelSpace.h = SpriteGeneration.graphicsDevice.height;
s.material.setParameter('uResolution', [SpriteGeneration.virtualPixelSpace.w, SpriteGeneration.virtualPixelSpace.h]);
var t = s.material.getParameter('uColorTexture').data;
var tw = t.width;
var th = t.height;
var blX = s.textureRect[0];
var blY = s.textureRect[1];
var trX = s.textureRect[2];
var trY = s.textureRect[3];
var hw = s.width * 0.5;
var hh = s.height * 0.5;
var ox = s.origin.x;
var oy = s.origin.y;
var sx = s.scale[0];
var sy = s.scale[1];
var rz = s.rotation;
var px = s.x;
var py = s.y;
var r = s.color[0];
var g = s.color[1];
var b = s.color[2];
var a = s.color[3];
// Triangle 1
v[x++] = -hw;
v[x++] = -hh;
v[x++] = -1;
v[x++] = ox;
v[x++] = oy;
v[x++] = sx;
v[x++] = sy;
v[x++] = rz;
v[x++] = px;
v[x++] = py;
v[x++] = blX / tw;
v[x++] = blY / th;
v[x++] = r;
v[x++] = g;
v[x++] = b;
v[x++] = a;
v[x++] = hw;
v[x++] = -hh;
v[x++] = -1;
v[x++] = ox;
v[x++] = oy;
v[x++] = sx;
v[x++] = sy;
v[x++] = rz;
v[x++] = px;
v[x++] = py;
v[x++] = trX / tw;
v[x++] = blY / th;
v[x++] = r;
v[x++] = g;
v[x++] = b;
v[x++] = a;
v[x++] = -hw;
v[x++] = hh;
v[x++] = -1;
v[x++] = ox;
v[x++] = oy;
v[x++] = sx;
v[x++] = sy;
v[x++] = rz;
v[x++] = px;
v[x++] = py;
v[x++] = blX / tw;
v[x++] = trY / th;
v[x++] = r;
v[x++] = g;
v[x++] = b;
v[x++] = a;
// Triangle 2
v[x++] = hw;
v[x++] = -hh;
v[x++] = -1;
v[x++] = ox;
v[x++] = oy;
v[x++] = sx;
v[x++] = sy;
v[x++] = rz;
v[x++] = px;
v[x++] = py;
v[x++] = trX / tw;
v[x++] = blY / th;
v[x++] = r;
v[x++] = g;
v[x++] = b;
v[x++] = a;
v[x++] = hw;
v[x++] = hh;
v[x++] = -1;
v[x++] = ox;
v[x++] = oy;
v[x++] = sx;
v[x++] = sy;
v[x++] = rz;
v[x++] = px;
v[x++] = py;
v[x++] = trX / tw;
v[x++] = trY / th;
v[x++] = r;
v[x++] = g;
v[x++] = b;
v[x++] = a;
v[x++] = -hw;
v[x++] = hh;
v[x++] = -1;
v[x++] = ox;
v[x++] = oy;
v[x++] = sx;
v[x++] = sy;
v[x++] = rz;
v[x++] = px;
v[x++] = py;
v[x++] = blX / tw;
v[x++] = trY / th;
v[x++] = r;
v[x++] = g;
v[x++] = b;
v[x++] = a;
}
vertexBuffer.unlock();
var createBatchInstance = function (material) {
var mesh = new pc.Mesh();
mesh.vertexBuffer = vertexBuffer;
mesh.indexBuffer[0] = null;
mesh.primitive[0].type = pc.PRIMITIVE_TRIANGLES;
mesh.primitive[0].base = 0;
mesh.primitive[0].count = 0;
mesh.primitive[0].indexed = false;
var meshInstance = new pc.MeshInstance(node, mesh, material);
meshInstance.layer = pc.LAYER_HUD;
return meshInstance;
};
if (numSprites > 0) {
var batches = [];
batches.push(createBatchInstance(SpriteGeneration.sprites[0].material));
batches[0].mesh.primitive[0].count = 6;
for (i = 1; i < numSprites; i++) {
s = SpriteGeneration.sprites[i];
p = SpriteGeneration.sprites[i-1];
if (s.material !== p.material) {
batches.push(createBatchInstance(s.material));
batches[batches.length-1].mesh.primitive[0].base = batches[batches.length-2].mesh.primitive[0].base + batches[batches.length-2].mesh.primitive[0].count;
}
batches[batches.length-1].mesh.primitive[0].count += 6;
}
model.meshInstances = batches;
}
console.log(model, 'model');
SpriteGeneration.scene.addModel(model);
};
Object.defineProperty(SpriteGeneration.prototype, 'texture', {
get: function () { return this.material.getParameter('uColorTexture').data; },
set: function (texture) {
var material;
var textureIndex = textures.indexOf(texture);
if (textureIndex === -1) {
textures.push(texture);
material = new pc.Material();
material.shader = shader;
material.setParameter('uColorTexture', texture);
material.setParameter('uResolution', [SpriteGeneration.virtualPixelSpace.w, SpriteGeneration.virtualPixelSpace.h]);
material.blendType = pc.BLEND_NORMAL;
material.depthWrite = false;
material.depthTest = false;
materials.push(material);
} else {
material = materials[textureIndex];
}
this.material = material;
}
});
Object.defineProperty(SpriteGeneration.prototype, 'mask', {
get: function () { return this.material.getParameter('uAlphaTexture').data; },
set: function (texture) {
this.material.setParameter('uAlphaTexture', texture);
}
});
return SpriteGeneration;
} ());
pc.SpriteGeneration = SpriteGeneration;
};