bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

custom shader for building gradian

Browse Source
This commit is contained in:
bachir
2020-09-11 11:40:39 +02:00
parent 2c673bef63
commit f73d3cceb7
5 changed files with 248 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mixins.js
+5 -3
View File
@@ -4,7 +4,7 @@ export default {
deg2rad (deg) {
return deg * (Math.PI / 180)
},
createLabelCanvas (text, fontsize, sizefactore, txtcolor) {
createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
// console.log('createLabelCanvas', this.data.Titre)
const size = fontsize
const borderSize = 5
@@ -27,8 +27,10 @@ export default {
ctx.font = font
ctx.textBaseline = 'top'
// ctx.fillStyle = 'red'
// ctx.fillRect(0, 0, width, height)
if (bgcolor) {
ctx.fillStyle = bgcolor
ctx.fillRect(0, 0, width, height)
}
ctx.fillStyle = txtcolor
for (var j = 0; j < lines.length; j++) {
ctx.fillText(lines[j], borderSize, borderSize + j * size)
src/components/objects/ContentBlock.vue
+35 -18
View File
@@ -117,7 +117,7 @@ export default {
}
},
created () {
console.log('ContentBlock created', this.data)
// console.log('ContentBlock created', this.data)
let txtcolor = '#000000'
// switch (this.type) {
// case 'visible':
@@ -138,44 +138,61 @@ export default {
this.size.y = this.label_size.y + 0.2
let y = 0
let top = this.prtPosition.y + this.prtSize.y / 2
let floor = this.prtPosition.y - this.prtSize.y / 2
switch (this.type) {
case 'visible':
y = (this.prtPosition.y + this.prtSize.y / 2) * Math.random()
y = top * Math.random()
break
case 'context':
y = (this.prtPosition.y - this.prtSize.y / 2) * Math.random()
y = floor / 3 * Math.random()
break
case 'process':
y = (this.prtPosition.y - this.prtSize.y / 2) * Math.random()
y = floor / 3 + floor / 3 * Math.random()
break
case 'concept':
y = (floor / 3) * 2 + floor / 3 * Math.random()
break
default:
}
this.position.y = y
let face = Math.random()
if (face < 0.25) {
// if (face < 0.25) {
// // gauche
// this.face = 'left'
// this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
// this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
// this.rotation.y = 90
// } else if (face >= 0.25 && face < 0.5) {
// // fond
// this.face = 'back'
// this.position.z = this.prtPosition.z - this.prtSize.z / 2 + 0.1
// this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
// } else if (face >= 0.5 && face < 0.75) {
// // droite
// this.face = 'right'
// this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
// this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
// this.rotation.y = -90
// } else {
// // face
// this.face = 'front'
// this.position.z = this.prtPosition.z + this.prtSize.z / 2 - 0.1
// this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
// this.rotation.y = 180
// }
if (face < 0.5) {
// gauche
this.face = 'left'
this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
this.rotation.y = 90
} else if (face >= 0.25 && face < 0.5) {
// fond
this.face = 'back'
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + 0.1
this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
} else if (face >= 0.5 && face < 0.75) {
} else {
// droite
this.face = 'right'
this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
this.rotation.y = -90
} else {
// face
this.face = 'front'
this.position.z = this.prtPosition.z + this.prtSize.z / 2 - 0.1
this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
this.rotation.y = 180
}
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
// this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1
src/components/objects/Project.vue
+138 -29
View File
@@ -32,6 +32,14 @@
type="process"
:data="item"
/>
<ContentBlock
v-for="item in data.concepts"
:key="item.id"
:prtPosition="position"
:prtSize="size"
type="concept"
:data="item"
/>
</div>
</div>
</template>
@@ -44,6 +52,9 @@ import { ThreeBSP } from 'three-js-csg-es6'
import mixins from 'components/mixins'
import ContentBlock from 'components/objects/ContentBlock'
import BgVertex from 'assets/glsl/BgVertex'
import BuildingFragment from 'assets/glsl/BuildingFragment'
export default {
name: 'Project',
components: {
@@ -58,39 +69,106 @@ export default {
let size = { ...this.data.size }
let position = { ...this.data.position }
let materialOpts = {
color: 0xffffff,
side: THREE.DoubleSide
// wireframe: true,
// transparent: true,
// opacity: 0.6
// renderOrder: 0
}
let material = new THREE.MeshLambertMaterial(materialOpts)
// http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
console.log('ThreeBSP', ThreeBSP)
// console.log('ThreeBSP', ThreeBSP)
let wallW = 0.001
let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
let topMesh = new THREE.Mesh(topGeom)
topMesh.position.y = -0.5 * size.y
let topBSP = new ThreeBSP(topMesh)
let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
let floorMesh = new THREE.Mesh(floorGeom)
floorMesh.position.y = 0.5 * size.y
let floorBSP = new ThreeBSP(floorMesh)
let backGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
let backMesh = new THREE.Mesh(backGeom)
backMesh.position.z = -0.5 * size.z
let backBSP = new ThreeBSP(backMesh)
// dig windows on face and back
let winW = 4
let winH = 8
let margin = 2
let nbrWinX = 0
let paddingX = 0
let a = 0
// removing windows until padding is enough
while (paddingX < 0.4) {
nbrWinX = Math.floor((size.x - 2 * margin) / winW) - a
paddingX = (size.x - 2 * margin - winW * nbrWinX) / (nbrWinX - 1)
a++
}
// console.log('paddingX', paddingX)
let nbrWinY = 0
let paddingY = 0
a = 0
// removing windows until padding is enough
while (paddingY < 0.4) {
nbrWinY = Math.floor((size.y - 2 * margin) / winH) - a
paddingY = (size.y - 2 * margin - winH * nbrWinY) / (nbrWinY - 1)
a++
}
let winGeom = new THREE.BoxGeometry(winW, winH, wallW)
let winMesh, winBSP
for (var i = 0; i < nbrWinX; i++) {
for (var j = 0; j < nbrWinY; j++) {
// back
winMesh = new THREE.Mesh(winGeom)
winMesh.position.z = -0.5 * size.z
winMesh.position.x = -0.5 * size.x + margin + winW * 0.5 + i * (winW + paddingX)
winMesh.position.y = 0.5 * size.y - margin - winH * 0.5 - j * (winH + paddingY)
winBSP = new ThreeBSP(winMesh)
backBSP = backBSP.subtract(winBSP)
}
}
// let abovewWaterH = position.y + size.y / 2
// let underWaterHThd = (-1 * position.y - size.y / 2) / 3
// let levelH = 4
// let levelGeom = new THREE.BoxGeometry(size.x, levelH, wallW)
// let levelMesh, levelBSP
// for (var l = 0; l < 2; l++) {
// levelMesh = new THREE.Mesh(levelGeom)
// levelMesh.position.z = -0.5 * size.z
// levelMesh.position.y = 0.5 * size.y - abovewWaterH - underWaterHThd - underWaterHThd * l + levelH * 0.5
// levelBSP = new ThreeBSP(levelMesh)
// backBSP = backBSP.union(levelBSP)
// }
backMesh = backBSP.toMesh()
let faceMesh = backMesh.clone()
faceMesh.position.z = 0.5 * size.z
let faceBSP = new ThreeBSP(faceMesh)
let rightGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
let rightMesh = new THREE.Mesh(rightGeom)
rightMesh.position.x = 0.5 * size.x
// rightMesh.position.z = 0.5 * size.z
let rightBSP = new ThreeBSP(rightMesh)
let faceGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
let faceMesh = new THREE.Mesh(faceGeom)
faceMesh.position.z = 0.5 * size.z
let faceBSP = new ThreeBSP(faceMesh)
// WE MAY NO NEED TO DIG WINDOWS ON SIDE WALLS
// // dig windows on right
// let nbrWinZ = Math.floor((size.z - 2 * margin) / winW)
// let paddingZ = (size.z - 2 * margin - winW * nbrWinZ) / (nbrWinX - 1)
// winGeom = new THREE.BoxGeometry(wallW, winH, winW)
// for (i = 0; i < nbrWinZ; i++) {
// for (j = 0; j < nbrWinY; j++) {
// // right
// winMesh = new THREE.Mesh(winGeom)
// winMesh.position.x = 0.5 * size.x
// winMesh.position.z = -0.5 * size.z + margin + winW * 0.5 + i * (winW + paddingZ)
// winMesh.position.y = 0.5 * size.y - margin - winH * 0.5 - j * (winH + paddingY)
// winBSP = new ThreeBSP(winMesh)
// rightBSP = rightBSP.subtract(winBSP)
// }
// }
// rightMesh = rightBSP.toMesh()
let leftGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
let leftMesh = new THREE.Mesh(leftGeom)
let leftMesh = rightMesh.clone()
leftMesh.position.x = -0.5 * size.x
// leftMesh.position.z = 0.5 * size.z
let leftBSP = new ThreeBSP(leftMesh)
@@ -98,17 +176,47 @@ export default {
let buildingBSP = backBSP.union(rightBSP)
buildingBSP = buildingBSP.union(faceBSP)
buildingBSP = buildingBSP.union(leftBSP)
buildingBSP = buildingBSP.union(topBSP)
buildingBSP = buildingBSP.union(floorBSP)
let holeGeom = new THREE.BoxGeometry(1000, 5, 5)
let holeMesh = new THREE.Mesh(holeGeom)
holeMesh.position.y = 50
let holeBSP = new ThreeBSP(holeMesh)
buildingBSP = buildingBSP.subtract(holeBSP)
// convert back to three.js mesh
let building = buildingBSP.toMesh()
building.material = material
// building.geometry.computeVertexNormals()
// create a custom shaderMaterial to had gradian colors
var uniforms = THREE.UniformsUtils.merge([
THREE.UniformsLib['lights'],
{
'topColor': { value: new THREE.Color(0xffffff) },
'groundColor': { value: new THREE.Color(0xbcd6e4) },
'bottomColor': { value: new THREE.Color(0x07223b) },
// 'bottomColor': { value: new THREE.Color(0x000000) },
// 'groundColor': { value: new THREE.Color(0xff0000) },
// 'bottomColor': { value: new THREE.Color(0x00ff00) },
lightIntensity: { type: 'f', value: 1.0 }
}
])
var buildingMat = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: BgVertex,
fragmentShader: BuildingFragment,
side: THREE.DoubleSide,
lights: true
})
building.material = buildingMat
// create a classical material for building
// let materialOpts = {
// color: 0xffffff,
// side: THREE.DoubleSide
// // wireframe: true,
// // transparent: true,
// // opacity: 0.6
// // renderOrder: 0
// }
// building.material = new THREE.MeshLambertMaterial(materialOpts)
// building.castShadow = true
// building.receiveShadow = true
// let buildingGeom = fromCSG(boxCSG)
// buildingGeom.computeVertexNormals()
@@ -119,8 +227,6 @@ export default {
//
let buildingPos = { ...position }
buildingPos.z -= 0.5 * size.z
// building.castShadow = true
// building.receiveShadow = true
return {
block3d: null,
@@ -160,7 +266,7 @@ export default {
created () {
console.log('Project created: data', this, this.data)
this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000')
this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
this.label_position.z = this.position.z + this.size.z / 2 + 0.5
@@ -171,6 +277,9 @@ export default {
// record self references
this.block3d = this.$refs.block3d.curObj
// this.block3d.castShadow = true
// this.block3d.receiveShadow = true
this.block3d.userData = {
vnode: this
}