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
|
define.class(function(require, $ui$, view){
this.attributes = {
morphweight: Config({type: float, value: 0}),
bgcolor: Config({type: vec4, value: vec4(1, 1, 1, 1)}),
opacity: Config({value: 1.0, type: float})
}
this.bgcolorfn = function(pos){
return this.bgcolor
}
define.class(this, 'shape3d', this.Shader, function(){
this.draworder = 0
this.depth_test = 'src_depth < dst_depth'
this.vertexstruct = define.struct({
pos: vec3,
norm: vec3,
uv: vec2,
data: vec4
})
this.diffusecolor = vec4("#ffffff")
this.mesh0 = this.vertexstruct.array()
this.mesh1 = this.vertexstruct.array()
this.update = function () {
var t0 = this.view.children[0]
var t1 = this.view.children[1]
t0.shaders.shape3d.update()
t1.shaders.shape3d.update()
this.mesh0 = t0.shaders.shape3d.mesh
this.mesh1 = t1.shaders.shape3d.mesh
if (this.mesh0.array.length !== this.mesh1.array.length) {
throw new Error('Morph geometries mismatch buffer length.')
} else if (this.mesh0.array.length % 8 !== 0) {
throw new Error('Morph targets should encode pos (vec3), norm (vec3), uv (vec2).')
}
}
this.position = function(){
pos = mesh0.pos * view.morphweight
pos += mesh1.pos * (1 - view.morphweight)
norm = mesh0.norm * view.morphweight
norm += mesh1.norm * (1 - view.morphweight)
uv = mesh0.uv * view.morphweight
uv += mesh1.uv * (1 - view.morphweight)
return vec4(pos, 1) * view.totalmatrix * view.viewmatrix
}
this.color = function(){
var col = view.bgcolorfn(uv)
return vec4(col.rgb, col.a * view.opacity)
}
})
this.shape3d = true
this.hardrect = false
this.render = function () {
if (this.children.length !== 2) {
throw new Error('Morphtargets attribute should have exatly 2 elements.')
}
this.children[0].visible = false
this.children[1].visible = false
return this.children
}
var morph3d = this.constructor;
var circle = require("$3d/circle")
var rect = require("$3d/rect")
this.constructor.examples = {
Usage: function () {
return [
morph3d({
bgcolor: vec4('blue'),
top:100,
left:100,
oninit: function () {
this.morphweight = Animate({
repeat: Infinity,
0: {value: 1, motion: "sine"},
1: {value: 0, motion: "sine"},
2: {value: 1, motion: "sine"}
})
}
},
circle({radius: 100, detail: 64}),
rect({width: 100, height: 100, radius: 4, detail: 64})
)
]
}
}
})
|