forked from regl-project/regl
-
Notifications
You must be signed in to change notification settings - Fork 2
/
benchmark.light.color.ts
172 lines (132 loc) · 4.49 KB
/
benchmark.light.color.ts
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
import { Mat4, Vec3 } from "kiwi.matrix";
import { IPerformance, PipeGL, TAttribute, TUniform } from "../../src";
import { cubeElements, cubePositions } from "../util/createCube";
import { createNormals } from "../util/createNormals";
const RADIUS = 700;
const LIGHT_POSITION0 = [-3.5, 2.5, -3.5];
const CAMERA_POSTION0 = [5, 2.5, 5];
const VIEW: Mat4 = new Mat4()
.lookAt(
new Vec3().set(CAMERA_POSTION0[0], CAMERA_POSTION0[1], CAMERA_POSTION0[2]),
new Vec3().set(0, 0, 0),
new Vec3().set(0, 1, 0)
).invert();
const PROJECTION = Mat4.perspective(Math.PI / 4, RADIUS / RADIUS, 0.1, 100);
const MODEL = new Mat4().identity();
const pipegl0 = new PipeGL({
width: RADIUS,
height: RADIUS
});
interface LightUniform extends TUniform {
projection: number[];
view: number[];
position: number[];
}
const light0 = pipegl0.compile<TAttribute, LightUniform>({
vert: `precision mediump float;
uniform vec3 position;
uniform mat4 view, projection;
void main(){
gl_PointSize = 10.0;
gl_Position = projection * view *vec4(position, 1.0);
}`,
frag: `precision mediump float;
void main(){
gl_FragColor = vec4(1,1,1,1);
}`,
attributes: {
},
uniforms: {
position: LIGHT_POSITION0,
projection: PROJECTION.value,
view: VIEW.value
},
primitive: "POINTS",
count: 1
});
interface CubeAttribute extends TAttribute {
position: number[][];
normal: number[][];
}
interface CubeUniform extends TUniform {
projection: number[];
view: number[];
model: { (performance: IPerformance, batchId: number): number[] };
ambient: number; //light相关:环境光
lightColor: number[]; //light相关:光颜色
lightPosition: number[]; //light相关:光源位置
specular: number; //light相关:镜面反射率
viewPosition: number[]; //light相关:摄像头位置
}
const cube0 = pipegl0.compile<CubeAttribute, CubeUniform>({
vert: `precision mediump float;
attribute vec3 position;
attribute vec3 normal;
uniform mat4 projection, view, model;
varying vec3 vNormal; //物体法线
varying vec3 vPosition; //世界物体位置
void main(){
float scale = 1.0;
vPosition = (model*vec4(position,1.0)).xyz; //应用position后世界坐标
vNormal = mat3(model)*normal; //应用model后的法线
gl_Position = projection*view*model*vec4(scale*position, 1.0);
}`,
frag: `precision mediump float;
uniform float ambient; //环境光
uniform float specular; //镜面光
uniform vec3 lightColor;
uniform vec3 lightPosition;
uniform vec3 viewPosition;
varying vec3 vNormal;
varying vec3 vPosition; //世界物体位置
void main(){
//计算环境光结果
vec3 ambient0=ambient*lightColor;
//计算漫反射
vec3 lightDir=normalize(lightPosition-vPosition);
float diff=max(dot(vNormal,lightDir),0.0);
vec3 diffuse0=diff*lightColor;
//镜面反射
vec3 viewDir=normalize(viewPosition-vPosition);
vec3 reflectDir=reflect(-lightDir,vNormal);
float spec=max(dot(viewDir,reflectDir),0.0);
float spec32=pow(spec,32.0); //注意这里pow(float, float), 参数必须是float类型
vec3 specular0=specular*spec32*lightColor;
//颜色汇总
gl_FragColor=vec4(ambient0+diffuse0+specular0,1.0);
}
`,
attributes: {
position: cubePositions,
normal: createNormals(cubeElements, cubePositions),
},
uniforms: {
projection: PROJECTION.value,
view: VIEW.value,
model: (performance: IPerformance, batchId: number): number[] => {
return MODEL.rotateY(0.003).rotateX(0.002).value;
},
viewPosition: CAMERA_POSTION0, //视角位置
specular: 0.5, //镜面反射率
ambient: 0.1, //环境光
lightColor: [1, 1, 1], //白光
lightPosition: LIGHT_POSITION0, //光源位置
},
elements: cubeElements,
status: {
DEPTH_TEST: true,
CULL_FACE: true,
cullFace: [0x0404],
frontFace: [0x0900]
}
});
const anim = () => {
pipegl0.clear({
color: [0, 0, 0, 1],
depth: true,
})
light0.draw();
cube0.draw();
requestAnimationFrame(anim);
}
anim();