Brush et radius de couleur sur un terrain 3d

**dad72** · 13/12/2013, 15h26

Je travaille sur un projet une application web 3d en utilisant babylon.js (moteur 3d) et je cherche donc a savoir comment ajouter une couleur sur les vertex sélectionner, mais je ne c'est pas comment faire et où le faire.

Voici en image ce que je voudrais faire (juste la partie en rouge) :

Voici le code qui permet d’élever les sommets. Ou doit je mettre la couleur et comment ? Merci pour votre aide s'il vous plais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
var WORLDCASTOR = WORLDCASTOR || {};
(function () {
/*
**********************
elevation control
********************
*/	
    WORLDCASTOR.ElevationControl = function (ground)
	{
        this._ground = ground;
        this.radius = 5.0;		
        this._invertDirection = 1.0;
        this.heightMin = -5.0;
        this.heightMax = 20.0;         
    };
 
    WORLDCASTOR.ElevationControl.prototype.direction = 1;
 
    WORLDCASTOR.ElevationControl.prototype.attachControl = function (canvas)
	{
        var currentPosition;
        var that = this;
 
        this._onBeforeRender = function () {
            if (!currentPosition) return;
 
            var pickInfo = that._ground.getScene().pick(currentPosition.x, currentPosition.y);
 
            if (!pickInfo.hit) return;
            if (pickInfo.pickedMesh != that._ground) return;
 
            that._elevateFaces(pickInfo, that.radius, 0.2);
        };
        this._onPointerDown = function (evt) {
            evt.preventDefault();
            currentPosition = {
                x: evt.clientX,
                y: evt.clientY
            };            
        };
        this._onPointerUp = function (evt) {
            evt.preventDefault();
            currentPosition = null;
        };
        this._onPointerMove = function (evt) {
            evt.preventDefault();
            if (!currentPosition) return;
            that._invertDirection = evt.button == 2 ? -1 : 1;
            currentPosition = {
                x: evt.clientX,
                y: evt.clientY
            };
        };
 
        this._onLostFocus = function () { currentPosition = null; };
 
        canvas.addEventListener("pointerdown", this._onPointerDown, true);
        canvas.addEventListener("pointerup", this._onPointerUp, true);
        canvas.addEventListener("pointerout", this._onPointerUp, true);
        canvas.addEventListener("pointermove", this._onPointerMove, true);
        window.addEventListener("blur", this._onLostFocus, true);
 
        this._ground.getScene().registerBeforeRender(this._onBeforeRender);
    };
 
    WORLDCASTOR.ElevationControl.prototype.detachControl = function (canvas)
	{
        canvas.removeEventListener("pointerdown", this._onPointerDown);
        canvas.removeEventListener("pointerup", this._onPointerUp);
        canvas.removeEventListener("pointerout", this._onPointerUp);
        canvas.removeEventListener("pointermove", this._onPointerMove);
        window.removeEventListener("blur", this._onLostFocus);
 
        this._ground.getScene().unregisterBeforeRender(this._onBeforeRender);
    };
 
    WORLDCASTOR.ElevationControl.prototype._prepareDataModelForElevation = function ()
	{
        if (this._facesOfVertices == null) {
            this._facesOfVertices = [];
 
            this._groundVerticesPositions = this._ground.getVerticesData(BABYLON.VertexBuffer.PositionKind);
            this._groundVerticesNormals = this._ground.getVerticesData(BABYLON.VertexBuffer.NormalKind);
            this._groundIndices = this._ground.getIndices();
 
            this._groundPositions = [];
            var index;
            for (index = 0; index < this._groundVerticesPositions.length; index += 3) 
                this._groundPositions.push(new BABYLON.Vector3(this._groundVerticesPositions[index], this._groundVerticesPositions[index + 1], this._groundVerticesPositions[index + 2]));            
 
            this._groundFacesNormals = [];
            for (index = 0; index < this._ground.getTotalIndices() / 3; index++) this._computeFaceNormal(index);
 
            this._getFacesOfVertices();
        }
    };
 
    WORLDCASTOR.ElevationControl.prototype._getFaceVerticesIndex = function (faceID) 
	{
        return {
            v1: this._groundIndices[faceID * 3],
            v2: this._groundIndices[faceID * 3 + 1],
            v3: this._groundIndices[faceID * 3 + 2]
        };
    };
 
    WORLDCASTOR.ElevationControl.prototype._computeFaceNormal = function (face)
	{
        var faceInfo = this._getFaceVerticesIndex(face);
 
        var v1v2 = this._groundPositions[faceInfo.v1].subtract(this._groundPositions[faceInfo.v2]);
        var v3v2 = this._groundPositions[faceInfo.v3].subtract(this._groundPositions[faceInfo.v2]);
 
        this._groundFacesNormals[face] = BABYLON.Vector3.Normalize(BABYLON.Vector3.Cross(v1v2, v3v2));
    };
 
    WORLDCASTOR.ElevationControl.prototype._getFacesOfVertices = function ()
	{
        this._facesOfVertices = [];
        this._subdivisionsOfVertices = [];
        var index;
 
        for (index = 0; index < this._groundPositions.length; index++) {
            this._facesOfVertices[index] = [];
            this._subdivisionsOfVertices[index] = [];
        }
 
        for (index = 0; index < this._groundIndices.length; index++) this._facesOfVertices[this._groundIndices[index]].push((index / 3) | 0);
 
        for (var subIndex = 0; subIndex < this._ground.subMeshes.length; subIndex++) {
            var subMesh = this._ground.subMeshes[subIndex];
            for (index = subMesh.verticesStart; index < subMesh.verticesStart + subMesh.verticesCount; index++) this._subdivisionsOfVertices[index].push(subMesh);
        }
    };
 
    WORLDCASTOR.ElevationControl.prototype._isBoxSphereIntersected = function(box, sphereCenter, sphereRadius)
	{
        var vector = BABYLON.Vector3.Clamp(sphereCenter, box.minimumWorld, box.maximumWorld);
        var num = BABYLON.Vector3.DistanceSquared(sphereCenter, vector);
        return (num <= (sphereRadius * sphereRadius));
    };
 
    WORLDCASTOR.ElevationControl.prototype._elevateFaces = function (pickInfo, radius, height)
	{
        this._prepareDataModelForElevation();
        this._selectedVertices = [];
 
        // Impact zone
        var sphereCenter = pickInfo.pickedPoint;
        sphereCenter.y = 0;
        var index;
 
        // Determine list of vertices
        for (var subIndex = 0; subIndex < this._ground.subMeshes.length; subIndex++)
		{
            var subMesh = this._ground.subMeshes[subIndex];
 
            if (!this._isBoxSphereIntersected(subMesh.getBoundingInfo().boundingBox, sphereCenter, radius)) continue;
 
            for (index = subMesh.verticesStart; index < subMesh.verticesStart + subMesh.verticesCount; index++) {
                var position = this._groundPositions[index];
                sphereCenter.y = position.y;
 
                var distance = BABYLON.Vector3.Distance(position, sphereCenter);
 
                if (distance < radius) this._selectedVertices[index] = distance;
            }
        }
 
        // Elevate vertices
        for (var selectedVertice in this._selectedVertices)
		{
            var position = this._groundPositions[selectedVertice];
            var distance = this._selectedVertices[selectedVertice];
 
            var fullHeight = height * this.direction * this._invertDirection;
            if (distance < radius * 0.3) position.y += fullHeight;
            else  position.y += fullHeight * (1.0 - (distance - radius * 0.3) / (radius * 0.7));
 
            if (position.y > this.heightMax) position.y = this.heightMax;
            else if (position.y < this.heightMin) position.y = this.heightMin;
 
            this._groundVerticesPositions[selectedVertice * 3 + 1] = position.y;
 
            this._updateSubdivisions(selectedVertice);
        }
 
        // Normals
        this._reComputeNormals();
 
        // Update vertex buffer
        this._ground.updateVerticesData(BABYLON.VertexBuffer.PositionKind, this._groundVerticesPositions);
        this._ground.updateVerticesData(BABYLON.VertexBuffer.NormalKind,this._groundVerticesNormals);        
    };
 
    WORLDCASTOR.ElevationControl.prototype._reComputeNormals = function ()
	{
        var faces = [];
        var face;
 
        for (var selectedVertice in this._selectedVertices) {
            var faceOfVertices = this._facesOfVertices[selectedVertice];
            for (var index = 0; index < faceOfVertices.length; index++) faces[faceOfVertices[index]] = true;            
        }
 
        for (face in faces) this._computeFaceNormal(face);
 
        for (face in faces) {
            var faceInfo = this._getFaceVerticesIndex(face);
            this._computeNormal(faceInfo.v1);
            this._computeNormal(faceInfo.v2);
            this._computeNormal(faceInfo.v3);
        }
    };
 
    WORLDCASTOR.ElevationControl.prototype._computeNormal = function(vertexIndex)
	{
        var faces = this._facesOfVertices[vertexIndex];
 
        var normal = BABYLON.Vector3.Zero();
        for (var index = 0; index < faces.length; index++) normal = normal.add(this._groundFacesNormals[faces[index]]);
 
        normal = BABYLON.Vector3.Normalize(normal.scale(1.0 / faces.length));
 
        this._groundVerticesNormals[vertexIndex * 3] = normal.x;
        this._groundVerticesNormals[vertexIndex * 3 + 1] = normal.y;
        this._groundVerticesNormals[vertexIndex * 3 + 2] = normal.z;
    };
 
    WORLDCASTOR.ElevationControl.prototype._updateSubdivisions = function (vertexIndex)
	{
        for (var index = 0; index < this._subdivisionsOfVertices[vertexIndex].length; index++) {
            var sub = this._subdivisionsOfVertices[vertexIndex][index];
            var boundingBox = sub.getBoundingInfo().boundingBox;
            var boundingSphere = sub.getBoundingInfo().boundingSphere;
 
            if (this._groundPositions[vertexIndex].y < boundingBox.minimum.y) {
                boundingSphere.radius += Math.abs(this._groundPositions[vertexIndex].y - boundingBox.minimum.y);
                boundingBox.minimum.y = this._groundPositions[vertexIndex].y;
            } else if (this._groundPositions[vertexIndex].y > boundingBox.maximum.y) boundingBox.maximum.y = this._groundPositions[vertexIndex].y;
        }
 
        var boundingBox = this._ground.getBoundingInfo().boundingBox;
        var boundingSphere = this._ground.getBoundingInfo().boundingSphere;
        if (this._groundPositions[vertexIndex].y < boundingBox.minimum.y) {
            boundingSphere.Radius += Math.abs(this._groundPositions[vertexIndex].y - boundingBox.minimum.y);
            boundingBox.minimum.y = this._groundPositions[vertexIndex].y;
        } else if (this._groundPositions[vertexIndex].y > boundingBox.maximum.y) boundingBox.maximum.y = this._groundPositions[vertexIndex].y;
    };
})();

En vous remerciant d'avance pour votre aide et votre temps.

**LittleWhite** · 14/12/2013, 10h04

Bonjour,

Pourquoi parlez vous d'enlever les sommets ? Ne faut-il pas juste changer leur couleur ?

**dad72** · 15/12/2013, 00h19

Bonjour,
je parlais d’élévation "d'élevé les sommets". c'est ce que je li dans mon post. mais ça c'est bon mon code le gère.

Le code permet de créer des montagnes (d'élevé les sommets) et je voudrais que le rayon de sélection des sommets, le pinceaux quoi, soit de couleurs rouge ou bleu (comme le montre l'image d'exemple). C’est ce que je souhaite faire, mais je ne c'est pas où et comment?

Merci pour l'aide.

**LittleWhite** · 15/12/2013, 09h50

Ah pardon.
Bref, normalement, vous avez une fonction pour connaitre les sommets sous le pinceau.
Vous pouvez la réutiliser pour détecter les sommets et leur ajouter une couleur afin que l'on voit la zone du pinceau.
Sinon, vous pouvez simplement afficher une texture semi transparente pour montrer le pinceau.

**dad72** · 15/12/2013, 13h24

Merci.
J'imagine que c'est dans cette fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

WORLDCASTOR.ElevationControl.prototype._elevateFaces = function (pickInfo, radius, height)

mais concrètement ou est ce que j'ajoute la couleur. Je ne suis pas sur de la fonction non plus.

Ce qui me permet d'ajouter une couleur est ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

objet.diffuse = new BABYLON.Color3(0, 0.6, 1); // Couleur rouge

Mais ce que je ne sais pas c'est où l'ajouter dans le code.

Brush et radius de couleur sur un terrain 3d

API graphiques

Discussions similaires

Partager

Partager