Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix rendering issues for line, stamp, and geometry brushes #265

Merged
merged 9 commits into from
Mar 8, 2022
Next Next commit
Fix triangle rendering for line brushes.
This removes the remaining references to TriangleStripDrawMode.
In its place is a vertex index buffer that seems to be working.
Still currently an issue with strokes made after an undo action.
  • Loading branch information
msub2 committed Mar 4, 2022
commit 80690b0dad0edcc7f227323a001c183afa9436dd
12 changes: 6 additions & 6 deletions src/brushes/line.js
Original file line number Diff line number Diff line change
@@ -30,9 +30,9 @@ var onLoaded = require('../onloaded.js');
alphaTest: 0.5
};

sharedBufferGeometryManager.addSharedBuffer('strip-flat', new THREE.MeshBasicMaterial(optionsBasic), THREE.TriangleStripDrawMode);
sharedBufferGeometryManager.addSharedBuffer('strip-shaded', new THREE.MeshStandardMaterial(optionsStandard), THREE.TriangleStripDrawMode);
sharedBufferGeometryManager.addSharedBuffer('strip-textured', new THREE.MeshStandardMaterial(optionTextured), THREE.TriangleStripDrawMode);
sharedBufferGeometryManager.addSharedBuffer('strip-flat', new THREE.MeshBasicMaterial(optionsBasic));
sharedBufferGeometryManager.addSharedBuffer('strip-shaded', new THREE.MeshStandardMaterial(optionsStandard));
sharedBufferGeometryManager.addSharedBuffer('strip-textured', new THREE.MeshStandardMaterial(optionTextured));
});

var line = {
@@ -113,12 +113,12 @@ var onLoaded = require('../onloaded.js');
this.idx = Object.assign({}, this.sharedBuffer.idx);

this.sharedBuffer.update();
this.computeStripVertexNormals();
this.computeVertexNormals();
return true;
};
})(),

computeStripVertexNormals: (function () {
computeVertexNormals: (function () {
var pA = new THREE.Vector3();
var pB = new THREE.Vector3();
var pC = new THREE.Vector3();
@@ -167,7 +167,7 @@ var onLoaded = require('../onloaded.js');
}

/*
first and last vertice (0 and 8) belongs just to one triangle
first and last vertices (0 and 8) belongs just to one triangle
second and penultimate (1 and 7) belongs to two triangles
the rest of the vertices belongs to three triangles

22 changes: 13 additions & 9 deletions src/sharedbuffergeometry.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
function SharedBufferGeometry (material, primitiveMode) {
function SharedBufferGeometry (material) {
this.material = material;
this.primitiveMode = primitiveMode;

this.maxBufferSize = 1000000;
this.geometries = [];
@@ -56,14 +55,13 @@ SharedBufferGeometry.prototype = {
var geometry = new THREE.BufferGeometry();

var vertices = new Float32Array(this.maxBufferSize * 3);
var indices = new Uint32Array(this.maxBufferSize * 1.5);
var normals = new Float32Array(this.maxBufferSize * 3);
var uvs = new Float32Array(this.maxBufferSize * 2);
var colors = new Float32Array(this.maxBufferSize * 3);

var mesh = new THREE.Mesh(geometry, this.material);

mesh.drawMode = this.primitiveMode;

mesh.frustumCulled = false;
mesh.vertices = vertices;

@@ -79,10 +77,11 @@ SharedBufferGeometry.prototype = {
this.object3D.add(mesh);

geometry.setDrawRange(0, 0);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3).setDynamic(true));
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2).setDynamic(true));
geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3).setDynamic(true));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3).setDynamic(true));
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3).setUsage(THREE.DynamicDrawUsage));
geometry.setIndex(new THREE.BufferAttribute(indices, 3).setUsage(THREE.DynamicDrawUsage));
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2).setUsage(THREE.DynamicDrawUsage));
geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3).setUsage(THREE.DynamicDrawUsage));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3).setUsage(THREE.DynamicDrawUsage));


this.previous = null;
@@ -138,19 +137,24 @@ SharedBufferGeometry.prototype = {
buffer = this.current.attributes.position;
}
buffer.setXYZ(this.idx.position++, x, y, z);
if ((this.idx.position + 1) % 2 == 0 && this.idx.position > 1) {
this.current.index.setXYZ(this.idx.position - 3, this.idx.position - 3, this.idx.position - 2, this.idx.position - 1);
this.current.index.setXYZ(this.idx.position - 2, this.idx.position - 1, this.idx.position - 2, this.idx.position);
}
},

addUV: function (u, v) {
this.current.attributes.uv.setXY(this.idx.uv++, u, v);
},

update: function () {
this.current.setDrawRange(0, this.idx.position);
this.current.setDrawRange(0, this.idx.position * 3);

this.current.attributes.color.needsUpdate = true;
this.current.attributes.normal.needsUpdate = true;
this.current.attributes.position.needsUpdate = true;
this.current.attributes.uv.needsUpdate = true;
this.current.index.needsUpdate = true;
}
};

4 changes: 2 additions & 2 deletions src/sharedbuffergeometrymanager.js
Original file line number Diff line number Diff line change
@@ -5,8 +5,8 @@ function SharedBufferGeometryManager () {
}

SharedBufferGeometryManager.prototype = {
addSharedBuffer: function (name, material, primitiveMode) {
var bufferGeometry = new SharedBufferGeometry(material, primitiveMode);
addSharedBuffer: function (name, material) {
var bufferGeometry = new SharedBufferGeometry(material);
this.sharedBuffers[name] = bufferGeometry;
},