diff --git a/brushes/bristles0.png b/brushes/bristles0.png index 384d308a1..d83ed27e6 100644 Binary files a/brushes/bristles0.png and b/brushes/bristles0.png differ diff --git a/brushes/fur0.png b/brushes/fur0.png deleted file mode 100644 index 0cffed0f3..000000000 Binary files a/brushes/fur0.png and /dev/null differ diff --git a/brushes/fur1.png b/brushes/fur1.png deleted file mode 100644 index 63131a090..000000000 Binary files a/brushes/fur1.png and /dev/null differ diff --git a/brushes/grunge0.png b/brushes/grunge0.png deleted file mode 100644 index 82e888bc4..000000000 Binary files a/brushes/grunge0.png and /dev/null differ diff --git a/brushes/line_gradient.png b/brushes/line_gradient.png new file mode 100644 index 000000000..73f844d9b Binary files /dev/null and b/brushes/line_gradient.png differ diff --git a/brushes/line_grunge1.png b/brushes/line_grunge1.png new file mode 100644 index 000000000..ba92886dc Binary files /dev/null and b/brushes/line_grunge1.png differ diff --git a/brushes/line_grunge2.png b/brushes/line_grunge2.png new file mode 100644 index 000000000..78368abb8 Binary files /dev/null and b/brushes/line_grunge2.png differ diff --git a/brushes/line_grunge3.png b/brushes/line_grunge3.png new file mode 100644 index 000000000..125c56d8f Binary files /dev/null and b/brushes/line_grunge3.png differ diff --git a/brushes/lines1.png b/brushes/lines1.png new file mode 100644 index 000000000..0f87ac6d1 Binary files /dev/null and b/brushes/lines1.png differ diff --git a/brushes/lines2.png b/brushes/lines2.png new file mode 100644 index 000000000..8f30d5be2 Binary files /dev/null and b/brushes/lines2.png differ diff --git a/brushes/lines3.png b/brushes/lines3.png new file mode 100644 index 000000000..03e46df5e Binary files /dev/null and b/brushes/lines3.png differ diff --git a/brushes/lines4.png b/brushes/lines4.png new file mode 100644 index 000000000..436ebd0df Binary files /dev/null and b/brushes/lines4.png differ diff --git a/brushes/lines5.png b/brushes/lines5.png new file mode 100644 index 000000000..6ec75727c Binary files /dev/null and b/brushes/lines5.png differ diff --git a/brushes/roundflat.png b/brushes/roundflat.png deleted file mode 100644 index 2c96c7d51..000000000 Binary files a/brushes/roundflat.png and /dev/null differ diff --git a/brushes/roundsoft.png b/brushes/roundsoft.png deleted file mode 100644 index 16bb0ce5c..000000000 Binary files a/brushes/roundsoft.png and /dev/null differ diff --git a/brushes/silky_flat.png b/brushes/silky_flat.png new file mode 100644 index 000000000..7ff1cd46e Binary files /dev/null and b/brushes/silky_flat.png differ diff --git a/brushes/silky_textured.png b/brushes/silky_textured.png new file mode 100644 index 000000000..7cf41d537 Binary files /dev/null and b/brushes/silky_textured.png differ diff --git a/brushes/smoke0.png b/brushes/smoke0.png deleted file mode 100644 index 499e1d53a..000000000 Binary files a/brushes/smoke0.png and /dev/null differ diff --git a/brushes/squared_textured.png b/brushes/squared_textured.png new file mode 100644 index 000000000..c5d2df3a3 Binary files /dev/null and b/brushes/squared_textured.png differ diff --git a/brushes/stamp_bush1.png b/brushes/stamp_bush1.png new file mode 100644 index 000000000..9e194081d Binary files /dev/null and b/brushes/stamp_bush1.png differ diff --git a/brushes/stamp_column1.png b/brushes/stamp_column1.png new file mode 100644 index 000000000..83159719e Binary files /dev/null and b/brushes/stamp_column1.png differ diff --git a/brushes/stamp_dots.png b/brushes/stamp_dots.png new file mode 100644 index 000000000..6db01a0a2 Binary files /dev/null and b/brushes/stamp_dots.png differ diff --git a/brushes/stamp_fur1.png b/brushes/stamp_fur1.png new file mode 100644 index 000000000..1b7f53067 Binary files /dev/null and b/brushes/stamp_fur1.png differ diff --git a/brushes/stamp_fur2.png b/brushes/stamp_fur2.png new file mode 100644 index 000000000..385888ca5 Binary files /dev/null and b/brushes/stamp_fur2.png differ diff --git a/brushes/stamp_gear1.png b/brushes/stamp_gear1.png new file mode 100644 index 000000000..ed3b52fd1 Binary files /dev/null and b/brushes/stamp_gear1.png differ diff --git a/brushes/stamp_grass1.png b/brushes/stamp_grass1.png new file mode 100644 index 000000000..0180ee2fa Binary files /dev/null and b/brushes/stamp_grass1.png differ diff --git a/brushes/stamp_grunge1.png b/brushes/stamp_grunge1.png new file mode 100644 index 000000000..b8157eb72 Binary files /dev/null and b/brushes/stamp_grunge1.png differ diff --git a/brushes/stamp_grunge2.png b/brushes/stamp_grunge2.png new file mode 100644 index 000000000..2de111c44 Binary files /dev/null and b/brushes/stamp_grunge2.png differ diff --git a/brushes/stamp_grunge3.png b/brushes/stamp_grunge3.png new file mode 100644 index 000000000..2dfee4a57 Binary files /dev/null and b/brushes/stamp_grunge3.png differ diff --git a/brushes/stamp_grunge4.png b/brushes/stamp_grunge4.png new file mode 100644 index 000000000..7630bf0a9 Binary files /dev/null and b/brushes/stamp_grunge4.png differ diff --git a/brushes/stamp_grunge5.png b/brushes/stamp_grunge5.png new file mode 100644 index 000000000..554751321 Binary files /dev/null and b/brushes/stamp_grunge5.png differ diff --git a/brushes/stamp_leaf1.png b/brushes/stamp_leaf1.png new file mode 100644 index 000000000..54be02428 Binary files /dev/null and b/brushes/stamp_leaf1.png differ diff --git a/brushes/stamp_leaf2.png b/brushes/stamp_leaf2.png new file mode 100644 index 000000000..f81e08dff Binary files /dev/null and b/brushes/stamp_leaf2.png differ diff --git a/brushes/stamp_leaf3.png b/brushes/stamp_leaf3.png new file mode 100644 index 000000000..8af0f29d9 Binary files /dev/null and b/brushes/stamp_leaf3.png differ diff --git a/brushes/stamp_rain1.png b/brushes/stamp_rain1.png new file mode 100644 index 000000000..87c73aa60 Binary files /dev/null and b/brushes/stamp_rain1.png differ diff --git a/brushes/stamp_snow1.png b/brushes/stamp_snow1.png new file mode 100644 index 000000000..74b718310 Binary files /dev/null and b/brushes/stamp_snow1.png differ diff --git a/brushes/stamp_squares.png b/brushes/stamp_squares.png new file mode 100644 index 000000000..ba5355055 Binary files /dev/null and b/brushes/stamp_squares.png differ diff --git a/brushes/stamp_star1.png b/brushes/stamp_star1.png new file mode 100644 index 000000000..973a66ceb Binary files /dev/null and b/brushes/stamp_star1.png differ diff --git a/brushes/stroke1.png b/brushes/stroke1.png deleted file mode 100644 index c1bcb24dc..000000000 Binary files a/brushes/stroke1.png and /dev/null differ diff --git a/brushes/thumb_fur0.png b/brushes/thumb_fur0.png deleted file mode 100644 index 9e0c1d522..000000000 Binary files a/brushes/thumb_fur0.png and /dev/null differ diff --git a/brushes/thumb_fur1.png b/brushes/thumb_fur1.png deleted file mode 100644 index 6c98c4d4b..000000000 Binary files a/brushes/thumb_fur1.png and /dev/null differ diff --git a/brushes/thumb_grunge0.png b/brushes/thumb_grunge0.png deleted file mode 100644 index 9987c6146..000000000 Binary files a/brushes/thumb_grunge0.png and /dev/null differ diff --git a/brushes/thumb_roundflat.png b/brushes/thumb_roundflat.png deleted file mode 100644 index d8137faa4..000000000 Binary files a/brushes/thumb_roundflat.png and /dev/null differ diff --git a/brushes/thumb_roundsoft.png b/brushes/thumb_roundsoft.png deleted file mode 100644 index baf69fde8..000000000 Binary files a/brushes/thumb_roundsoft.png and /dev/null differ diff --git a/brushes/thumb_smoke0.png b/brushes/thumb_smoke0.png deleted file mode 100644 index 851b3c80f..000000000 Binary files a/brushes/thumb_smoke0.png and /dev/null differ diff --git a/index.html b/index.html index 7ba127b03..144cef1b6 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ + diff --git a/src/brushes/line.js b/src/brushes/line.js index f8b61c24d..37222af8f 100644 --- a/src/brushes/line.js +++ b/src/brushes/line.js @@ -41,8 +41,8 @@ var line = { if (type === 'shaded') { defaultOptions = { color: this.data.color, - roughness: 0.5, - metalness: 0.5, + roughness: 0.75, + metalness: 0.25, side: THREE.DoubleSide, }; } @@ -178,77 +178,117 @@ var line = { }; var lines = [ - { - name: 'flat', + { + name: 'flat', materialOptions: { type: 'flat' - }, - thumbnail: '' + }, + thumbnail: '' }, - { - name: 'shaded', + { + name: 'smooth', materialOptions: { - type: 'shaded' - }, - thumbnail: '' + type: 'smooth' + }, + thumbnail: '' }, - { - name: 'bristles', + { + name: 'squared-textured', materialOptions: { - type: 'shaded', - textureSrc: 'brushes/bristles0.png' - }, - thumbnail: 'brushes/thumb_bristles0.png' + type: 'textured', + textureSrc: 'brushes/squared_textured.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' + }, + { + name: 'line-gradient', + materialOptions: { + type: 'textured', + textureSrc: 'brushes/line_gradient.png' + }, + thumbnail: 'brushes/line_gradient.png' + }, + { + name: 'silky-flat', + materialOptions: { + type: 'textured', + textureSrc: 'brushes/silky_flat.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' + }, + { + name: 'silky-textured', + materialOptions: { + type: 'textured', + textureSrc: 'brushes/silky_textured.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' + }, + { + name: 'lines1', + materialOptions: { + type: 'textured', + textureSrc: 'brushes/lines1.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' }, - { - name: 'fur', + { + name: 'lines2', materialOptions: { - type: 'shaded', - textureSrc: 'brushes/fur0.png' - }, - thumbnail: 'brushes/thumb_fur0.png' + type: 'textured', + textureSrc: 'brushes/lines2.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' }, - { - name: 'fur 2', + { + name: 'lines3', materialOptions: { - type: 'shaded', - textureSrc: 'brushes/fur1.png' - }, - thumbnail: 'brushes/thumb_fur1.png' + type: 'textured', + textureSrc: 'brushes/lines3.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' }, - { - name: 'grunge', + { + name: 'lines4', materialOptions: { - type: 'shaded', - textureSrc: 'brushes/grunge0.png' - }, - thumbnail: 'brushes/thumb_grunge0.png' + type: 'textured', + textureSrc: 'brushes/lines4.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' }, - { - name: 'roundflat', + { + name: 'lines5', materialOptions: { - type: 'shaded', - textureSrc: 'brushes/roundflat.png' - }, - thumbnail: 'brushes/thumb_roundflat.png' + type: 'textured', + textureSrc: 'brushes/lines5.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' }, - { - name: 'roundsoft', + { + name: 'line-grunge1', materialOptions: { - type: 'shaded', - textureSrc: 'brushes/roundsoft.png' - }, - thumbnail: 'brushes/thumb_roundsoft.png' + type: 'textured', + textureSrc: 'brushes/line_grunge1.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' }, - { - name: 'smoke', + { + name: 'line-grunge2', materialOptions: { - type: 'textured', - textureSrc: 'brushes/smoke0.png' - }, - thumbnail: 'brushes/thumb_smoke0.png' + type: 'textured', + textureSrc: 'brushes/line_grunge2.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' }, -] + { + name: 'line-grunge3', + materialOptions: { + type: 'textured', + textureSrc: 'brushes/line_grunge3.png' + }, + thumbnail: 'brushes/thumb_bristles0.png' + } +]; for (var i = 0; i < lines.length; i++) { var definition = lines[i]; diff --git a/src/brushes/stamp.js b/src/brushes/stamp.js new file mode 100644 index 000000000..aa396d7cf --- /dev/null +++ b/src/brushes/stamp.js @@ -0,0 +1,363 @@ +var stamp = { + init: function(color, brushSize) { + this.idx = 0; + this.geometry = new THREE.BufferGeometry(); + this.vertices = new Float32Array(this.options.maxPoints * 3 * 3 * 2); + this.normals = new Float32Array(this.options.maxPoints * 3 * 3 * 2 ); + this.uvs = new Float32Array(this.options.maxPoints * 2 * 3 * 2 ); + this.texture = null; + + this.geometry.setDrawRange(0, 0); + this.geometry.addAttribute('position', new THREE.BufferAttribute(this.vertices, 3).setDynamic(true)); + this.geometry.addAttribute('uv', new THREE.BufferAttribute(this.uvs, 2).setDynamic(true)); + this.geometry.addAttribute('normal', new THREE.BufferAttribute(this.normals, 3).setDynamic(true)); + + var mesh = new THREE.Mesh(this.geometry, this.getMaterial()); + this.currAngle= 0; + this.subTextures= 1; + this.angleJitter= 0; + this.autoRotate= false; + + if(this.materialOptions['subTextures']!==undefined){ + this.subTextures= this.materialOptions['subTextures']; + } + if(this.materialOptions['autoRotate']===true){ + this.autoRotate= true; + } + if(this.materialOptions['angleJitter']!==undefined){ + this.angleJitter= this.materialOptions['angleJitter']; + this.angleJitter= this.angleJitter*2 - this.angleJitter; + } + + mesh.frustumCulled = false; + mesh.vertices = this.vertices; + this.object3D.add(mesh); + }, + getMaterial: function() { + var textureLoader = new THREE.TextureLoader(); + this.texture = textureLoader.load(this.materialOptions.textureSrc); + var type = this.materialOptions.type; + + if (type === 'shaded') { + return new THREE.MeshStandardMaterial({ + color: this.data.color, + side: THREE.DoubleSide, + map: this.texture, + transparent: true, + alphaTest: 0.5, + roughness: 0.75, + metalness: 0.25, + side: THREE.DoubleSide, + }); + } + return new THREE.MeshBasicMaterial({ + color: this.data.color, + side: THREE.DoubleSide, + map: this.texture, + transparent: true, + alphaTest: 0.5, + side: THREE.DoubleSide, + }); + }, + addPoint: function (position, rotation, pointerPosition, pressure, timestamp) { + //brush side + var pi2= Math.PI/2; //90 degrees + var dir = new THREE.Vector3(); + dir.set(1, 0, 0); + dir.applyQuaternion(rotation); + dir.normalize(); + + //brush normal + var axis = new THREE.Vector3(); + axis.set(0, 1, 0); + axis.applyQuaternion(rotation); + axis.normalize(); + + var brushSize = this.data.size * pressure /2; + var brushAngle= Math.PI/4 + Math.random() * this.angleJitter; + + if (this.autoRotate){ + this.currAngle+= 0.1; + brushAngle+= this.currAngle; + } + + var a= pointerPosition.clone().add(dir.applyAxisAngle(axis, brushAngle).clone().multiplyScalar(brushSize)); + var b= pointerPosition.clone().add(dir.applyAxisAngle(axis, pi2).clone().multiplyScalar(brushSize)); + var c= pointerPosition.clone().add(dir.applyAxisAngle(axis, pi2).clone().multiplyScalar(brushSize)); + var d= pointerPosition.clone().add(dir.applyAxisAngle(axis, pi2).multiplyScalar(brushSize)); + + var nidx= this.idx; + //triangle 1 + this.vertices[ this.idx++ ] = a.x; + this.vertices[ this.idx++ ] = a.y; + this.vertices[ this.idx++ ] = a.z; + + this.vertices[ this.idx++ ] = b.x; + this.vertices[ this.idx++ ] = b.y; + this.vertices[ this.idx++ ] = b.z; + + this.vertices[ this.idx++ ] = c.x; + this.vertices[ this.idx++ ] = c.y; + this.vertices[ this.idx++ ] = c.z; + + //triangle 2 + + this.vertices[ this.idx++ ] = c.x; + this.vertices[ this.idx++ ] = c.y; + this.vertices[ this.idx++ ] = c.z; + + this.vertices[ this.idx++ ] = d.x; + this.vertices[ this.idx++ ] = d.y; + this.vertices[ this.idx++ ] = d.z; + + this.vertices[ this.idx++ ] = a.x; + this.vertices[ this.idx++ ] = a.y; + this.vertices[ this.idx++ ] = a.z; + + //normals + for (var i = 0; i<6; i++) { + this.normals[ nidx++ ]= axis.x; + this.normals[ nidx++ ]= axis.y; + this.normals[ nidx++ ]= axis.z; + } + + //UVs + var uv= this.data.numPoints*6*2; + + // subTextures? + var Umin= 0; + var Umax= 1; + if (this.subTextures>1) + { + var subt= Math.floor(Math.random()*this.subTextures); + Umin= 1.0/this.subTextures*subt; + Umax= Umin+1.0/this.subTextures; + } + //triangle 1 uv + this.uvs[ uv++ ] = Umin; + this.uvs[ uv++ ] = 1; + this.uvs[ uv++ ] = Umin; + this.uvs[ uv++ ] = 0; + this.uvs[ uv++ ] = Umax; + this.uvs[ uv++ ] = 0; + + //triangle2 uv + this.uvs[ uv++ ] = Umax; + this.uvs[ uv++ ] = 0; + this.uvs[ uv++ ] = Umax; + this.uvs[ uv++ ] = 1; + this.uvs[ uv++ ] = Umin; + this.uvs[ uv++ ] = 1; + + this.geometry.attributes.normal.needsUpdate = true; + this.geometry.attributes.position.needsUpdate = true; + this.geometry.attributes.uv.needsUpdate = true; + + this.geometry.setDrawRange(0, this.data.numPoints * 6); + + + return true; + } + +}; + +var stamps = [ + { + name: 'dots', + materialOptions: { + type:'shaded', + textureSrc: 'brushes/stamp_dots.png' + }, + thumbnail: 'brushes/stamp_dots.png', + spacing: 0.01 + }, + { + name: 'squares', + materialOptions: { + type:'shaded', + textureSrc: 'brushes/stamp_squares.png' + }, + thumbnail: 'brushes/stamp_squares.png', + spacing: 0.01 + }, + { + name: 'column', + materialOptions: { + type:'shaded', + autoRotate: true, + textureSrc: 'brushes/stamp_column1.png' + }, + thumbnail: 'brushes/stamp_column1.png', + spacing: 0.01 + }, + { + name: 'gear1', + materialOptions: { + type:'shaded', + angleJitter: Math.PI*2, + subTextures: 2, + textureSrc: 'brushes/stamp_gear1.png' + }, + thumbnail: 'brushes/stamp_gear1.png', + spacing: 0.01 + }, + { + name: 'grunge1', + materialOptions: { + type: 'shaded', + angleJitter: Math.PI*2, + textureSrc: 'brushes/stamp_grunge1.png' + }, + thumbnail: 'brushes/stamp_grunge1.png', + spacing: 0.01 + }, + { + name: 'grunge2', + materialOptions: { + type: 'shaded', + angleJitter: Math.PI*2, + textureSrc: 'brushes/stamp_grunge2.png' + }, + thumbnail: 'brushes/stamp_grunge2.png', + spacing: 0.01 + }, + { + name: 'grunge3', + materialOptions: { + type: 'shaded', + angleJitter: Math.PI*2, + textureSrc: 'brushes/stamp_grunge3.png' + }, + thumbnail: 'brushes/stamp_grunge3.png', + spacing: 0.01 + }, + { + name: 'grunge4', + materialOptions: { + type: 'shaded', + angleJitter: Math.PI*2, + textureSrc: 'brushes/stamp_grunge4.png' + }, + thumbnail: 'brushes/stamp_grunge4.png', + spacing: 0.01 + }, + { + name: 'grunge5', + materialOptions: { + type: 'shaded', + angleJitter: Math.PI*2, + textureSrc: 'brushes/stamp_grunge5.png' + }, + thumbnail: 'brushes/stamp_grunge5.png', + spacing: 0.01 + }, + { + name: 'leaf1', + materialOptions: { + type: 'shaded', + angleJitter: Math.PI, + textureSrc: 'brushes/stamp_leaf1.png' + }, + thumbnail: 'brushes/stamp_leaf1.png', + spacing: 0.01 + }, + { + name: 'leaf2', + materialOptions: { + type: 'shaded', + angleJitter: 60*Math.PI/180.0, + textureSrc: 'brushes/stamp_leaf2.png' + }, + thumbnail: 'brushes/stamp_leaf2.png', + spacing: 0.01 + }, + { + name: 'leaf3', + materialOptions: { + type: 'shaded', + angleJitter: 60*Math.PI/180.0, + textureSrc: 'brushes/stamp_leaf3.png' + }, + thumbnail: 'brushes/stamp_leaf3.png', + spacing: 0.01 + }, + { + name: 'fur1', + materialOptions: { + type: 'shaded', + angleJitter: 40*Math.PI/180.0, + subTextures: 2, + textureSrc: 'brushes/stamp_fur1.png' + }, + thumbnail: 'brushes/stamp_fur1.png', + spacing: 0.01 + }, + { + name: 'fur2', + materialOptions: { + type: 'shaded', + angleJitter: 10*Math.PI/180.0, + subTextures: 3, + textureSrc: 'brushes/stamp_fur2.png' + }, + thumbnail: 'brushes/stamp_fur2.png', + spacing: 0.01 + }, + { + name: 'grass1', + materialOptions: { + type: 'shaded', + angleJitter: 10*Math.PI/180.0, + subTextures: 3, + textureSrc: 'brushes/stamp_grass1.png' + }, + thumbnail: 'brushes/stamp_grass1.png', + spacing: 0.01 + }, + { + name: 'bush1', + materialOptions: { + type: 'shaded', + subTextures: 2, + textureSrc: 'brushes/stamp_bush1.png' + }, + thumbnail: 'brushes/stamp_bush1.png', + spacing: 0.01 + }, + { + name: 'star1', + materialOptions: { + type: 'shaded', + textureSrc: 'brushes/stamp_star1.png' + }, + thumbnail: 'brushes/stamp_star1.png', + spacing: 0.01 + }, + { + name: 'snow1', + materialOptions: { + type: 'shaded', + angleJitter: Math.PI*2, + textureSrc: 'brushes/stamp_snow1.png' + }, + thumbnail: 'brushes/stamp_snow1.png', + spacing: 0.01 + } +]; + +for (var i = 0; i < stamps.length; i++) { + var definition = stamps[i]; + AFRAME.APAINTER.registerBrush(definition.name, Object.assign({}, stamp, {materialOptions: definition.materialOptions}), {thumbnail: definition.thumbnail, spacing: definition.spacing, maxPoints:3000 }); +} + +/* +- type: <'flat'|'shaded'> + Flat: constant, just color. Shaded: phong shading with subtle speculars +- autoRotate: + The brush rotates incrementally at 0.1rad per point +- angleJitter: + The brush rotates randomly from -r to r +- subTextures: + textureSrc is divided in n horizontal pieces, and the brush picks one randomly on each point +*/ +