-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebGL-test.html
95 lines (85 loc) · 3.11 KB
/
webGL-test.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> obj to dracos </title>
<style>
body,html {
margin:0; padding:0;
overflow: hidden;
}
#info {
position: fixed;
top:0; left:0;
z-index:999999999999;
}
#info > code {
background: #000;
color:#fff;
display: block;
}
</style>
</head>
<body>
<div id="info">
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
</div>
<script src="js/threejs_libs/three.min.js"></script>
<script>
function gpuInfo(){
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl')
let dbgRenNfo = gl.getExtension("WEBGL_debug_renderer_info")
let vendor = gl.getParameter(gl.VENDOR)
let renderer = gl.getParameter(gl.RENDERER)
if(dbgRenNfo){
vendor = gl.getParameter(dbgRenNfo.UNMASKED_VENDOR_WEBGL)
renderer = gl.getParameter(dbgRenNfo.UNMASKED_RENDERER_WEBGL)
}
return [
`GPU-vendor: ${vendor}`,
`GPU-renderer: ${renderer}`
]
}
const info = document.querySelector('#info')
let gpu = gpuInfo()
info.children[0].textContent = gpu[0]
info.children[1].textContent = gpu[1]
if( typeof require == "function"){
info.children[2].textContent = `node: ${process.versions.node}`
info.children[3].textContent = `chromium: ${process.versions.chrome}`
info.children[4].textContent = `electron: ${process.versions.electron}`
}
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, innerWidth/innerHeight, 0.1, 1000 )
const renderer = new THREE.WebGLRenderer()
let cube
function resize() {
camera.aspect = innerWidth / innerHeight
camera.updateProjectionMatrix()
renderer.setSize(innerWidth, innerHeight)
}
function setup(){
renderer.setSize( innerWidth, innerHeight )
document.body.appendChild( renderer.domElement )
window.addEventListener('resize', resize, false)
camera.position.z = 2
let geometry = new THREE.BoxGeometry( 1, 1, 1 )
let material = new THREE.MeshNormalMaterial()
cube = new THREE.Mesh( geometry, material )
scene.add( cube )
draw()
}
function draw() {
requestAnimationFrame( draw )
cube.rotation.y += 0.01
renderer.render( scene, camera )
}
setup()
</script>
</body>
</html>