use DirectionalLights instead of PointLights for performance. and add ability to toggle anti-aliasing
This commit is contained in:
Stewart Allen
parent
44a785ee9d
commit
5107d1758c
7 changed files with 68 additions and 23 deletions
|
|
@ -682,6 +682,7 @@
|
|||
zoomSpeed: 1.0,
|
||||
lineType: "path",
|
||||
autoSave: true,
|
||||
antiAlias: true,
|
||||
reverseZoom: true,
|
||||
showOrigin: false,
|
||||
showRulers: true,
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@
|
|||
selectedTool = null,
|
||||
editTools = null,
|
||||
maxTool = 0,
|
||||
fpsTimer = null,
|
||||
platformColor,
|
||||
contextInt;
|
||||
|
||||
|
|
@ -162,6 +161,9 @@
|
|||
if (control.assembly != UI.assembly.checked) {
|
||||
KIRI.client.wasm(UI.assembly.checked);
|
||||
}
|
||||
if (control.antiAlias != UI.antiAlias.checked) {
|
||||
API.show.alert('Page Reload Required to Change Aliasing');
|
||||
}
|
||||
control.decals = UI.decals.checked;
|
||||
control.danger = UI.danger.checked;
|
||||
control.showOrigin = UI.showOrigin.checked;
|
||||
|
|
@ -169,6 +171,7 @@
|
|||
control.autoLayout = UI.autoLayout.checked;
|
||||
control.freeLayout = UI.freeLayout.checked;
|
||||
control.autoSave = UI.autoSave.checked;
|
||||
control.antiAlias = UI.antiAlias.checked;
|
||||
control.reverseZoom = UI.reverseZoom.checked;
|
||||
control.dark = UI.dark.checked;
|
||||
control.exportOcto = UI.exportOcto.checked;
|
||||
|
|
@ -190,7 +193,7 @@
|
|||
maxpass: control.decimate ? 10 : 0
|
||||
});
|
||||
UC.setHoverPop(false);
|
||||
updateFPS();
|
||||
updateStats();
|
||||
if (control.decals && !control.dark) {
|
||||
// disable decals in dark mode
|
||||
loadDeviceTexture(currentDevice, deviceTexture);
|
||||
|
|
@ -203,13 +206,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
function updateFPS() {
|
||||
clearTimeout(fpsTimer);
|
||||
UI.fps.style.display = 'block';
|
||||
function updateStats() {
|
||||
if (self.debug !== true) {
|
||||
return;
|
||||
}
|
||||
let { div, fps, rms } = UI.stats;
|
||||
div.style.display = 'flex';
|
||||
setInterval(() => {
|
||||
const nv = SPACE.view.getFPS().toFixed(2);
|
||||
if (nv !== UI.fps.innerText) {
|
||||
UI.fps.innerText = nv;
|
||||
const nfps = SPACE.view.getFPS().toFixed(2);
|
||||
const nrms = SPACE.view.getRMS().toFixed(2);
|
||||
if (nfps !== fps.innerText) {
|
||||
fps.innerText = nfps;
|
||||
}
|
||||
if (nrms !== rms.innerText) {
|
||||
rms.innerText = nrms;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
|
@ -1460,6 +1470,7 @@
|
|||
|
||||
SPACE.sky.showGrid(false);
|
||||
SPACE.sky.setColor(controller.dark ? 0 : 0xffffff);
|
||||
SPACE.setAntiAlias(controller.antiAlias);
|
||||
SPACE.init(container, function (delta) {
|
||||
let vars = API.var;
|
||||
if (vars.layer_max === 0 || !delta) return;
|
||||
|
|
@ -1521,7 +1532,12 @@
|
|||
faces: $('mesh-faces'),
|
||||
},
|
||||
|
||||
fps: $('fps'),
|
||||
stats: {
|
||||
fps: $('fps'),
|
||||
rms: $('rms'),
|
||||
div: $('stats'),
|
||||
},
|
||||
|
||||
load: $('load-file'),
|
||||
speeds: $('speeds'),
|
||||
speedbar: $('speedbar'),
|
||||
|
|
@ -1679,6 +1695,7 @@
|
|||
], {class:"ext-buttons f-row gcode-macros"}),
|
||||
|
||||
lprefs: UC.newGroup(LANG.op_menu, $('prefs-gen1'), {inline: true}),
|
||||
antiAlias: UC.newBoolean(LANG.op_anta_s, booleanSave, {title:LANG.op_anta_l}),
|
||||
reverseZoom: UC.newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l}),
|
||||
ortho: UC.newBoolean(LANG.op_orth_s, booleanSave, {title:LANG.op_orth_l}),
|
||||
dark: UC.newBoolean(LANG.op_dark_s, booleanSave, {title:LANG.op_dark_l}),
|
||||
|
|
@ -2516,6 +2533,7 @@
|
|||
UI.showSpeeds.checked = control.showSpeeds;
|
||||
UI.freeLayout.checked = control.freeLayout;
|
||||
UI.autoLayout.checked = control.autoLayout;
|
||||
UI.antiAlias.checked = control.antiAlias;
|
||||
UI.reverseZoom.checked = control.reverseZoom;
|
||||
UI.autoSave.checked = control.autoSave;
|
||||
UI.decimate.checked = control.decimate;
|
||||
|
|
@ -2526,7 +2544,7 @@
|
|||
UI.devel.checked = control.devel;
|
||||
lineTypeSave();
|
||||
detailSave();
|
||||
updateFPS();
|
||||
updateStats();
|
||||
|
||||
// optional set-and-lock mode (hides mode menu)
|
||||
let SETMODE = SETUP.mode ? SETUP.mode[0] : null;
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ function init() {
|
|||
db.admin.get("uses").then(v => db.admin.put("uses", (v||0) + 1));
|
||||
|
||||
// setup default workspace
|
||||
space.setAntiAlias(true);
|
||||
space.useDefaultKeys(false);
|
||||
space.init($('container'), delta => { }, ortho);
|
||||
space.sky.set({
|
||||
|
|
|
|||
|
|
@ -118,7 +118,9 @@
|
|||
hiddenKey,
|
||||
vizChange,
|
||||
docVisible = true,
|
||||
antiAlias = window.devicePixelRatio <= 1,
|
||||
lastAction = Date.now(),
|
||||
renderTime = 0,
|
||||
fps = 0;
|
||||
|
||||
if (typeof DOC.hidden !== "undefined") {
|
||||
|
|
@ -276,12 +278,12 @@
|
|||
}
|
||||
|
||||
function addLight(x,y,z,i) {
|
||||
let l = new THREE.PointLight(0xffffff, i, 0);
|
||||
let l = new THREE.DirectionalLight(0xffffff, i, 0);
|
||||
l.position.set(x,z,y);
|
||||
let b; l.add(b = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(1,1,1),
|
||||
new THREE.MeshBasicMaterial( {color: 0xff0000} )
|
||||
)); b.scale.set(5,5,5);
|
||||
// let b; l.add(b = new THREE.Mesh(
|
||||
// new THREE.BoxGeometry(1,1,1),
|
||||
// new THREE.MeshBasicMaterial( {color: 0xff0000} )
|
||||
// )); b.scale.set(5,5,5);
|
||||
SCENE.add(l);
|
||||
return l;
|
||||
}
|
||||
|
|
@ -1013,6 +1015,7 @@
|
|||
refresh: refresh,
|
||||
update: requestRefresh,
|
||||
|
||||
setAntiAlias(b) { antiAlias = b ? true : false },
|
||||
alignTracking: alignTracking,
|
||||
raycast: intersect,
|
||||
|
||||
|
|
@ -1114,14 +1117,15 @@
|
|||
viewControl.setMouse(viewControl.mouseDefault);
|
||||
}
|
||||
},
|
||||
getFPS: () => { return fps },
|
||||
getFocus: () => { return viewControl.getTarget() },
|
||||
setFocus: (v) => { viewControl.setTarget(v); refresh() },
|
||||
setHome: (r,u) => {
|
||||
getFPS () { return fps },
|
||||
getRMS() { return renderTime },
|
||||
getFocus() { return viewControl.getTarget() },
|
||||
setFocus(v) { viewControl.setTarget(v); refresh() },
|
||||
setHome(r,u) {
|
||||
home = r || 0;
|
||||
up = u || PI4;
|
||||
},
|
||||
spin: (then, count) => {
|
||||
spin(then, count) {
|
||||
Space.view.front(() => {
|
||||
Space.view.right(() => {
|
||||
Space.view.back(() => {
|
||||
|
|
@ -1195,10 +1199,11 @@
|
|||
domelement.style.height = height();
|
||||
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
antialias: antiAlias,
|
||||
preserveDrawingBuffer: true,
|
||||
logarithmicDepthBuffer: true
|
||||
});
|
||||
console.log({renderer});
|
||||
camera = ortho ?
|
||||
new THREE.OrthographicCamera(-100 * aspect(), 100 * aspect(), 100, -100, 0.1, 100000) :
|
||||
new THREE.PerspectiveCamera(perspective, aspect(), 0.1, 100000);
|
||||
|
|
@ -1278,6 +1283,10 @@
|
|||
let animates = 0;
|
||||
let rateStart = Date.now();
|
||||
|
||||
let renders = 0;
|
||||
let renderSum = 0;
|
||||
let renderStart;
|
||||
|
||||
function animate() {
|
||||
animates++;
|
||||
const now = Date.now();
|
||||
|
|
@ -1286,11 +1295,17 @@
|
|||
fps = 1000 * animates / delta;
|
||||
animates = 0;
|
||||
rateStart = now;
|
||||
renderTime = renders ? renderSum / renders : 0;
|
||||
renders = 0;
|
||||
renderSum = 0;
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
if (docVisible && !freeze && Date.now() - lastAction < 1500) {
|
||||
renderStart = Date.now();
|
||||
renderer.render(SCENE, camera);
|
||||
renderSum += Date.now() - renderStart;
|
||||
renders++;
|
||||
} else {
|
||||
fps = 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1781,12 +1781,17 @@ th, tr, td, label {
|
|||
padding: 5px 20px 5px 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#fps {
|
||||
#stats {
|
||||
position: fixed;
|
||||
font-size: 10px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
color: #000;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.dark #stats {
|
||||
color: #888;
|
||||
}
|
||||
#tool-info {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -504,7 +504,10 @@
|
|||
<div class="sep"></div>
|
||||
<button id="context-setfocus" lk="rc_focs">set focus</button>
|
||||
</div>
|
||||
<div id="fps" class="noshow"></div>
|
||||
<div id="stats">
|
||||
<div id="rms"></div>
|
||||
<div id="fps"></div>
|
||||
</div>
|
||||
<div id="layer-animate" class="f-col a-center"></div>
|
||||
<div id="layer-toolpos" class="f-row a-center"></div>
|
||||
<div id="alert-area">
|
||||
|
|
|
|||
|
|
@ -255,6 +255,8 @@ kiri.lang['en-us'] = {
|
|||
op_spcr_l: ["spacing between objects","during auto layout","in workspace units"],
|
||||
op_orth_s: "orthographic",
|
||||
op_orth_l: ["orthographic display","requires page refresh"],
|
||||
op_anta_s: "anti-alias",
|
||||
op_anta_l: ["smooth display. better but slower","requires a page refresh or reload"],
|
||||
op_invr_s: "invert zoom",
|
||||
op_invr_l: ["invert mouse wheel","scroll zoom"],
|
||||
op_save_s: "auto save",
|
||||
|
|
|
|||
Loading…
Reference in a new issue