Skip to content

Commit ad8c4a1

Browse files
hmthanhhmthanh
committed
add test
1 parent 3723581 commit ad8c4a1

File tree

5 files changed

+504
-25
lines changed

5 files changed

+504
-25
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545

4646
<body>
4747
<canvas id="scene"></canvas>
48-
<script type="module" src="/src/main.js"></script>
48+
<script type="module" src="/test/test.js"></script>
4949
</body>
5050

5151
</html>

‎index_origin.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Human Render Engine</title>
8+
<link rel="icon" type="image/x-icon" href="/favicon.ico">
9+
<link rel="stylesheet" href="/lil-gui.css">
10+
<style>
11+
body {
12+
margin: 0;
13+
overflow: hidden;
14+
}
15+
16+
canvas {
17+
width: 100%;
18+
height: 100%;
19+
display: block;
20+
}
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
html,
29+
body {
30+
height: 100%;
31+
}
32+
33+
body {
34+
overflow: hidden;
35+
background: #000;
36+
}
37+
38+
#scene {
39+
position: absolute;
40+
width: 100%;
41+
height: 100%;
42+
}
43+
</style>
44+
</head>
45+
46+
<body>
47+
<canvas id="scene"></canvas>
48+
<script type="module" src="/src/main.js"></script>
49+
</body>
50+
51+
</html>

‎src/main.js‎

Lines changed: 191 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,16 @@ import { WebGLRenderer } from "./renderers/WebGLRenderer"
1717
import GUI from "./gui/GUI"
1818
import { AnimationClip } from "./animation/AnimationClip"
1919
import { NumberKeyframeTrack } from "./animation/tracks/NumberKeyframeTrack"
20-
import { ACESFilmicToneMapping, DoubleSide, EquirectangularReflectionMapping, LinearSRGBColorSpace, LinearToneMapping, NormalAnimationBlendMode, SRGBColorSpace } from "./constants"
20+
import {
21+
ACESFilmicToneMapping,
22+
DoubleSide,
23+
EquirectangularReflectionMapping,
24+
FrontSide,
25+
LinearSRGBColorSpace,
26+
LinearToneMapping,
27+
NormalAnimationBlendMode,
28+
SRGBColorSpace,
29+
} from "./constants"
2130
import { aniTime, aniValues } from "./data"
2231
import { RGBELoader } from "./jsm/loaders/RGBELoader"
2332
import { EXRLoader } from "./jsm/loaders/EXRLoader"
@@ -61,6 +70,9 @@ import { CylinderGeometry } from "./geometries/CylinderGeometry"
6170
import { Bone } from "./objects/Bone"
6271
import { SkinnedMesh } from "./objects/SkinnedMesh"
6372
import { Skeleton } from "./objects/Skeleton"
73+
import { ShaderLib } from "./renderers/shaders/ShaderLib"
74+
import { UniformsUtils } from "./renderers/shaders/UniformsUtils"
75+
import { ShaderMaterial } from "./materials/ShaderMaterial"
6476

6577
const loadingManager = new LoadingManager()
6678
loadingManager.onProgress = (url, loaded, total) => {
@@ -198,6 +210,7 @@ export class App {
198210
}
199211

200212
// components
213+
rootGroup = new Group()
201214
brows = {
202215
mesh: null,
203216
material: null,
@@ -297,14 +310,16 @@ export class App {
297310
this.createControls()
298311
this.createLights()
299312
// this.createCube()
300-
this.createCylinder()
301-
// this.loadTexure()
302-
// this.loadMaterial()
313+
// this.createCylinder()
314+
this.loadTexure()
315+
this.loadMaterial()
316+
this.loadGLSLShader()
303317
// this.loadModel()
304318
// this.loadGLTF()
305319
// this.loadHair()
306320
// this.loadJSON()
307321
// this.loadCustomModel()
322+
308323
if (this.state.postProcessing) {
309324
this.createPostProcessing()
310325
}
@@ -807,16 +822,15 @@ export class App {
807822
}
808823

809824
async loadModel() {
810-
const group = new Group()
811-
const loader = new GLTFLoader(loadingManager)
812-
loader.load("/hair/hair.glb", (gltf) => {
813-
window.OPENHUMAN.gltf = gltf
814-
let scene = gltf.scene || gltf.scenes[0]
815-
group.add(scene)
816-
// this.loadContent(scene, clips)
817-
})
825+
// const loader = new GLTFLoader(loadingManager)
826+
// loader.load("/hair/hair.glb", (gltf) => {
827+
// window.OPENHUMAN.gltf = gltf
828+
// let scene = gltf.scene || gltf.scenes[0]
829+
// group.add(scene)
830+
// // this.loadContent(scene, clips)
831+
// })
818832

819-
this.scene.add(group)
833+
this.scene.add(this.rootGroup)
820834
// const textureLoader = new TextureLoader(loadingManager)
821835

822836
const models = [
@@ -882,22 +896,22 @@ export class App {
882896
const objloader = new OBJLoader(loadingManager)
883897
Promise.all(models.map((model) => this.loadAndApplyMaterial(objloader, model))).then((meshes) => {
884898
meshes.forEach(({ name, mesh }) => {
885-
group.add(mesh)
899+
this.rootGroup.add(mesh)
886900
meshMap.set(name, mesh)
887901
})
888902

889-
group.updateMatrixWorld()
890-
const box = new Box3().setFromObject(group)
903+
this.rootGroup.updateMatrixWorld()
904+
const box = new Box3().setFromObject(this.rootGroup)
891905
const size = box.getSize(new Vector3()).length()
892906
const center = box.getCenter(new Vector3())
893907

894908
this.controls.reset()
895909

896910
// this.addMeshHelpers(group)
897911

898-
group.position.x -= center.x
899-
group.position.y -= center.y
900-
group.position.z -= center.z
912+
this.rootGroup.position.x -= center.x
913+
this.rootGroup.position.y -= center.y
914+
this.rootGroup.position.z -= center.z
901915

902916
this.controls.maxDistance = size * 10
903917

@@ -932,6 +946,132 @@ export class App {
932946
})
933947
}
934948

949+
loadGLSLShader() {
950+
// Trigger compilation by rendering once
951+
console.log("this.face.material", this.face.material)
952+
this.face.material.onBeforeCompile = (shader) => {
953+
// Save or log the raw GLSL source
954+
console.log("Vertex Shader:", shader.vertexShader)
955+
console.log("Fragment Shader:", shader.fragmentShader)
956+
957+
// Optionally modify shader code here
958+
// shader.vertexShader = shader.vertexShader.replace(...);
959+
// shader.fragmentShader = shader.fragmentShader.replace(...);
960+
}
961+
this.camera.position.set(0, 48, 20)
962+
963+
const objloader = new OBJLoader(loadingManager)
964+
objloader.load("/obj1/Head.obj", (obj) => {
965+
let mesh = null
966+
console.log("obj", obj)
967+
968+
obj.traverse((child) => {
969+
if (child.isMesh) {
970+
child.material = this.face.material
971+
child.name = name
972+
mesh = child
973+
}
974+
})
975+
976+
this.scene.add(obj)
977+
// if (mesh) {
978+
// resolve({ name, mesh })
979+
// } else {
980+
// reject(new Error(`No mesh found in ${path}`))
981+
// }
982+
})
983+
984+
// const geometry = new BoxGeometry(10, 10, 10)
985+
// const material = new MeshPhysicalMaterial({ color: 0x00ff00 })
986+
// const customMaterial = new ShaderMaterial({
987+
// uniforms: UniformsUtils.merge([
988+
// ShaderLib.physical.uniforms,
989+
// {
990+
// // You can add additional custom uniforms here
991+
// time: { value: 0 },
992+
// },
993+
// ]),
994+
// vertexShader: ShaderLib.physical.vertexShader,
995+
// fragmentShader: ShaderLib.physical.fragmentShader,
996+
997+
// // Physical material properties
998+
// defines: {
999+
// PHYSICAL: "",
1000+
// },
1001+
// clearcoat: 0.5,
1002+
// clearcoatRoughness: 0.1,
1003+
// metalness: 0.8,
1004+
// roughness: 0.3,
1005+
// color: new Color(0x156289),
1006+
// emissive: new Color(0x000000),
1007+
// ior: 1.5,
1008+
// transmission: 0.0,
1009+
// side: FrontSide,
1010+
// transparent: false,
1011+
// envMapIntensity: 1.0,
1012+
// })
1013+
// this.camera.position.set(0, 48, 1)
1014+
// this.cube = new Mesh(geometry, material)
1015+
// this.scene.add(this.cube)
1016+
1017+
// // Force compilation by rendering once
1018+
// this.renderer.render(this.scene, this.camera)
1019+
1020+
// // Access the program object after render
1021+
// const program = this.renderer.properties.get(this.cube.material)?.program
1022+
// console.log("program", program)
1023+
1024+
// if (program) {
1025+
// const vertexShaderFinal = program.vertexShader
1026+
// const fragmentShaderFinal = program.fragmentShader
1027+
// console.log("Full Vertex Shader:", vertexShaderFinal)
1028+
// console.log("Full Fragment Shader:", fragmentShaderFinal)
1029+
// } else {
1030+
// console.error("Shader program not compiled yet or material missing.")
1031+
// }
1032+
1033+
// material.onBeforeCompile = (shader) => {
1034+
// // Save or log the raw GLSL source
1035+
// console.log("Vertex Shader:", shader.vertexShader)
1036+
// console.log("Fragment Shader:", shader.fragmentShader)
1037+
1038+
// // Optionally modify shader code here
1039+
// // shader.vertexShader = shader.vertexShader.replace(...);
1040+
// // shader.fragmentShader = shader.fragmentShader.replace(...);
1041+
// }
1042+
1043+
// this.renderer.compile(this.scene, this.camera)
1044+
// console.log("material", material.vertexShader, material.fragmentShader)
1045+
// this.rootGroup.children.forEach((child) => {
1046+
// console.log('child', child)
1047+
// if (child.isMesh) {
1048+
// console.log("Mesh Name:", child.name)
1049+
// console.log("Material:", child.material)
1050+
// // console.log("Geometry:", child.geometry)
1051+
// // console.log("Attributes:", child.geometry.attributes)
1052+
// }
1053+
// })
1054+
// const headMesh = this.rootGroup.traverse(function (object) {
1055+
// if (object.isMesh && object.name === "Head") {
1056+
// return object
1057+
// }
1058+
// })
1059+
// // const mesh = meshMap.get("Head")
1060+
// console.log("Mesh:", headMesh)
1061+
1062+
// // Get internal compiled program
1063+
// const material = headMesh.material
1064+
// console.log(material)
1065+
// const program = this.renderer.properties.get(material).program
1066+
// console.log("program", program)
1067+
1068+
// // const vertexShader = program.vertexShader
1069+
// const fragmentShader = program.fragmentShader
1070+
1071+
// // console.log("Vertex Shader:", vertexShader)
1072+
// console.log("Fragment Shader:", fragmentShader)
1073+
}
1074+
9351075
loadAndApplyMaterial(objloader, { name, path, material }) {
9361076
return new Promise((resolve, reject) => {
9371077
objloader.load(
@@ -971,11 +1111,30 @@ export class App {
9711111

9721112
async loadGLTF() {
9731113
const loader = new GLTFLoader(loadingManager)
974-
loader.load("/facetoy/facetoy.glb", (gltf) => {
975-
window.OPENHUMAN.gltf = gltf
976-
let scene = gltf.scene || gltf.scenes[0]
977-
let clips = gltf.animations || []
978-
this.loadContent(scene, clips)
1114+
// /facetoy/facetoy.glb facecap_output.gltf
1115+
loader.load("/facecap_output.gltf", (gltf) => {
1116+
// window.OPENHUMAN.gltf = gltf
1117+
// let scene = gltf.scene || gltf.scenes[0]
1118+
// let clips = gltf.animations || []
1119+
// this.loadContent(scene, clips)
1120+
const mesh = gltf.scene.children[0]
1121+
console.log("gltf", gltf)
1122+
1123+
this.scene.add(mesh)
1124+
1125+
this.mixer = new AnimationMixer(mesh)
1126+
this.mixer.clipAction(gltf.animations[0]).play()
1127+
1128+
// GUI
1129+
// const head = mesh.getObjectByName("mesh_2")
1130+
// const influences = head.morphTargetInfluences
1131+
1132+
// const gui = new GUI()
1133+
// gui.close()
1134+
1135+
// for (const [key, value] of Object.entries(head.morphTargetDictionary)) {
1136+
// gui.add(influences, value, 0, 1, 0.01).name(key.replace("blendShape1.", "")).listen()
1137+
// }
9791138
})
9801139
}
9811140

@@ -1138,10 +1297,18 @@ export class App {
11381297
this.backgroundColor.set(this.state.bgColor)
11391298
}
11401299

1300+
logGLSL = false
1301+
11411302
createGUI() {
11421303
this.gui = new GUI()
11431304

11441305
const displaceFolder = this.gui.addFolder("Display")
1306+
displaceFolder
1307+
.add(this, "logGLSL")
1308+
.name("Log GLSL")
1309+
.onChange((value) => {
1310+
this.loadGLSLShader()
1311+
})
11451312
displaceFolder.close()
11461313
const envBackgroundCtrl = displaceFolder.add(this.state, "background")
11471314
envBackgroundCtrl.onChange(() => this.updateEnvironment())

0 commit comments

Comments
 (0)