-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (125 loc) · 5.93 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>png-image-to-glb-formated-file-gen</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/gltf-js-utils/dist/gltfjsutils.js"></script> -->
<script src="https://cesswairimu.github.io/glTF-js-utils/dist/gltfjsutils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<link rel="shortcut icon" type="image/png" href="#" />
<link rel="stylesheet" href="src/main.css">
<script src="src/main.js"></script>
</head>
<body>
<form id="inputForm" name="inputForm" method="post">
<div class="container d-flex align-items-center justify-content-center h-100">
<div class="text-center">
<h3 class="fs-2 text-black-50">Create a textured surface</h3>
<p class="fs-4 text-muted">Upload a JPG or PNG and get a textured, light-able<br> GLB model
usable in Mozilla
Hubs.<br> <a href="#gif" class="link-secondary fs-5"> { See bottom of the page for an example }</a><br>
(also check <a href="http://ambientcg.com" class="link-info">ambientcg.com</a> for image sources)
</p><br>
<!-- <p class="fs-6 text-muted text-center">(<a href="https://github.com/cesswairimu/png-to-glb-utility">Open -->
<!-- Source</a> by <a href="https://github.com/cesswairimu">Cess Wairimu</a>)</p> -->
<div class="btn-group btn-group-md pb-3 h-30">
<label class="btn btn-outline-secondary text-dark box-bg">
Choose an Image
<input type="file" id="fileInput" name="fileInput1" style="display: none;" accept=".jpg,.png">
</label>
<textarea class="btn btn-outline-secondary box-bg" id="fileNameOutput" name="preview" readonly></textarea>
</div><br>
<div class="d-inline-flex w-auto pb-2">
<div class="box rounded box-bg" style="height: 150px; width: 150px;">
<img id="imagePreview" class="img-thumbnail" alt="Image Preview">
</div>
<div class="d-flex flex-column mb-3">
<div class="btn-group btn-group-md h-30 pt-3 ps-2">
<label class="btn btn-outline-secondary disabled bg-light text-dark">
Tile image width by:
</label>
<input type="number" min="1" max="100" value="1" class="btn btn-outline-secondary" name="repeatWidth">
</div> <br>
<div class="btn-group btn-group-md h-30 pt-2 ps-2">
<div class="btn btn-outline-secondary disabled text-dark">
Tile image height by:
</div>
<input type="number" min="1" max="100" value="1" class="btn btn-outline-secondary" name="repeatHeight">
</div>
</div>
</div>
<div class="mt-10 pl-10 flex items-center">
<label class="items-center cursor-pointer">
<input type="checkbox" id="checkboxRoughness"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="ml-2 text-sm font-medium text-gray-700 fs-5 text-muted">Add roughness texture</span>
</label>
</div>
<div class="row justify-content-center align-items-center w-500">
<div id="roughness-section" class="col-4 bg-gray-500 text-center p-4 rounded box-bg" style="display: none;">
<div class="btn-group btn-group-sm pb-2">
<label class="btn btn-outline-secondary text-dark">
Choose a Texture
<input type="file" id="fileInput1" name="fileInput2" style="display: none;" accept=".jpg,.png">
</label>
<textarea class="btn btn-outline-secondary" id="fileNameOutput1" readonly></textarea>
</div>
<p class="mt-3">The texture image will be used as roughness and will scale/tile with the original image..
</p>
</div>
</div>
<div class="mt-10 pl-10 flex items-center">
<label class="items-center cursor-pointer">
<input type="checkbox" id="normalTexture"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<span class="ml-2 font-medium text-gray-700 fs-5 text-muted">Add a normal texture</span>
</label>
</div>
<div class="row justify-content-center align-items-center w-500">
<div id="normal-section" class="col-4 bg-gray-500 text-center p-4 rounded box-bg" style="display: none;">
<div class="btn-group btn-group-sm pb-2">
<label class="btn btn-outline-secondary text-secondary text-dark">
Choose a normal Texture
<input type="file" id="fileInput2" name="fileInput3" style="display: none;" accept=".jpg,.png">
</label>
<textarea class="btn btn-outline-secondary" id="fileNameOutput2" readonly></textarea>
</div>
<p class="mt-3">The normal image will help stimulate the fine surface detail of the base image..
</p>
</div>
</div>
<div class="mt-3 mb-5">
<button type="submit" id="submitBtn" class="btn btn-outline-info fs-5 disabled" onclick="">Create
a Model
</button>
</div>
<div class="row">
<div class="col g-5 mt-5"> </div>
<div class="col g-5 mt-5"> </div>
<hr>
</div>
<div class="d-flex flex-column mt-5">
<div class="align-items-center justify-content-center h-100">
<p class="text-muted font-monospace">Example of a textured lightable surface as viewed in Mozilla Hubs</p>
<div id="gif">
<img src="examples/glb-lit.gif" alt="gltf-gif-example">
</div>
</div>
</div>
<br>
<p class="fs-6 text-muted text-center"><a class="link-info" href="https://github.com/cesswairimu/png-to-glb-utility">Open
Source</a> by <a class="link-info" href="https://github.com/cesswairimu">Cess Wairimu</a></p>
<img id="display-image" height="800" width="1000" class="invisible">
<img id="texture-image" height="800" width="1000" class="invisible">
<img id="normal-image" height="800" width="1000" class="invisible">
</div>
</div>
</form>
<script>
init();
</script>
</body>
</html>