Skip to content

Commit

Permalink
smooth render menu
Browse files Browse the repository at this point in the history
hrgdavor committed Jan 26, 2024
1 parent f4eaf64 commit 9e505d9
Showing 5 changed files with 32 additions and 8 deletions.
10 changes: 6 additions & 4 deletions apps/jscad-web/main.js
Original file line number Diff line number Diff line change
@@ -13,13 +13,15 @@ import * as remote from './src/remote.js'
import { formatStacktrace } from './src/stacktrace.js'
import { ViewState } from './src/viewState.js'
import * as welcome from './src/welcome.js'
import { runMain } from '../../packages/worker/worker.js'

export const byId = id => document.getElementById(id)
const appBase = document.baseURI
let currentBase = appBase
const toUrl = path => new URL(path, appBase).toString()

const viewState = new ViewState()
viewState.onRequireReRender = ()=>paramChangeCallback(lastParams)

const gizmo = (window.gizmo = new Gizmo())
byId('overlay').parentNode.appendChild(gizmo)
@@ -173,7 +175,7 @@ sendCmdAndSpin('init', {
},
}).then(() => {
if (loadDefault) {
runScript({ script: defaultCode })
runScript({ script: defaultCode, smooth: viewState.smoothRender })
}
})

@@ -189,18 +191,18 @@ const paramChangeCallback = async params => {
working = true
let result
try{
result = await sendCmdAndSpin('runMain', { params })
result = await sendCmdAndSpin('runMain', { params, smooth: viewState.smoothRender })
} finally{
working = false
}
handlers.entities(result)
handlers.entities(result, {smooth: viewState.smoothRender})
if(lastParams && lastParams != params) paramChangeCallback(lastParams)
}

const runScript = async ({ script, url = './index.js', base = currentBase, root }) => {
currentBase = base
loadDefault = false // don't load default model if something else was loaded
const result = await sendCmdAndSpin('runScript', { script, url, base, root })
const result = await sendCmdAndSpin('runScript', { script, url, base, root, smooth: viewState.smoothRender })
genParams({ target: byId('paramsDiv'), params: result.def || {}, callback: paramChangeCallback })
handlers.entities(result)
}
17 changes: 16 additions & 1 deletion apps/jscad-web/src/viewState.js
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ export class ViewState {
const darkMode = byId('dark-mode')
const showAxis = byId('show-axis')
const showGrid = byId('show-grid')
const smoothRender = byId('smooth-render')
darkMode.addEventListener('change', () => {
this.themeName = darkMode.checked ? 'dark' : 'light'
if (darkMode.checked) {
@@ -25,6 +26,9 @@ export class ViewState {
}
this.setTheme(this.themeName)
})
smoothRender.addEventListener('change', () => {
this.setSmoothRender(smoothRender.checked)
})
showAxis.addEventListener('change', () => this.setAxes(showAxis.checked))
showGrid.addEventListener('change', () => this.setGrid(showGrid.checked))
}
@@ -41,6 +45,12 @@ export class ViewState {
this.saveState()
}

setSmoothRender(smoothRender, fireEvent = true) {
this.smoothRender = smoothRender
this.saveState()
if(fireEvent) this.onRequireReRender()
}

setTheme(themeName) {
if (!themes[themeName]) throw new Error(`unknown theme ${themeName}`)
this.themeName = themeName
@@ -86,7 +96,7 @@ export class ViewState {
if (grid) items.push({ id: 'grid', items: grid })
if (model) items.push({ id: 'model', items: model })

this.viewer?.setScene({ items })
this.viewer?.setScene({ items }, {smooth:this.smoothRender})
}

setEngine(viewer) {
@@ -108,6 +118,8 @@ export class ViewState {
byId('show-axis').checked = this.showAxis
this.showGrid = localStorage.getItem('engine.showGrid') !== 'false'
byId('show-grid').checked = this.showGrid
this.smoothRender = !!localStorage.getItem('engine.smoothRender')
byId('smooth-render').checked = this.smoothRender
const cameraLocation = localStorage.getItem('camera.location')
this.camera = cameraLocation ? JSON.parse(cameraLocation) : { position: [180, -180, 220] }
}
@@ -116,5 +128,8 @@ export class ViewState {
localStorage.setItem('engine.theme', this.themeName)
localStorage.setItem('engine.showAxis', this.showAxis)
localStorage.setItem('engine.showGrid', this.showGrid)
localStorage.setItem('engine.smoothRender', this.smoothRender)
}

onRequireReRender(){}
}
1 change: 1 addition & 0 deletions apps/jscad-web/static/index.html
Original file line number Diff line number Diff line change
@@ -82,6 +82,7 @@ <h2>Options</h2>
<li><label for="dark-mode">Dark Mode</label><input type="checkbox" id="dark-mode"></li>
<li><label for="show-axis">Show Axis</label><input type="checkbox" id="show-axis" checked></li>
<li><label for="show-grid">Show Grid</label><input type="checkbox" id="show-grid" checked></li>
<li><label for="show-grid">Smooth render</label><input type="checkbox" id="smooth-render" checked></li>
</ul>

<h2>Documentation</h2>
2 changes: 1 addition & 1 deletion packages/format-threejs/index.js
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ export function CommonToThree({
materials.lines = materials.line
materials.instance = materials.mesh // todo support instances for lines

function _CSG2Three(obj, { smooth = true }) {
function _CSG2Three(obj, { smooth = false }) {
const { vertices, indices, normals, color, colors, isTransparent = false, opacity } = obj
let { transforms } = obj
const objType = obj.type || 'mesh'
10 changes: 8 additions & 2 deletions packages/render-threejs/index.js
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ export function RenderThreejs({
let _camera
let controls
let renderer
let smooth
const SHADOW = false
const shouldRender = Date.now()
const lastRender = true
@@ -100,6 +101,10 @@ export function RenderThreejs({
updateView()
}

function setSmooth(v){
smooth = v
}

function setMeshColor(bg = [1, 1, 1]) {
meshColor = new Color(...bg)
csgConvert.setDefColor(bg)
@@ -193,7 +198,8 @@ export function RenderThreejs({
}
}

function setScene(scene) {
function setScene(scene,{smooth}={}) {
console.warn('options', {smooth})
groups.forEach(group => {
_scene.remove(group)
})
@@ -205,7 +211,7 @@ export function RenderThreejs({
const group = new Group()
groups.push(group)
item.items.forEach(obj => {
const obj3d = csgConvert(obj, scene, meshColor)
const obj3d = csgConvert(obj, { smooth, scene, meshColor})
if (obj3d) {
entities.push(obj3d)
group.add(obj3d)

0 comments on commit 9e505d9

Please sign in to comment.