Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending parameters and methods for ThreejsRenderer #143

Merged
merged 19 commits into from
Dec 6, 2020
Merged

Extending parameters and methods for ThreejsRenderer #143

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
39d2e19
extending paramters for the ThreejsRenderer
kalwalt Dec 1, 2020
ca03542
this.renderer and renderer getter
kalwalt Dec 1, 2020
1ede866
getThreejsRenderer CustomEvent
kalwalt Dec 1, 2020
5743754
testing internal _renderGet function
kalwalt Dec 1, 2020
27dc552
less flickering with sRGB Encoding
kalwalt Dec 1, 2020
bd6858a
jsonObjParser inside Utils.js to parse json object during initialization
kalwalt Dec 1, 2020
c64f7a1
PerspectiveCamera instead of the basic Camera
kalwalt Dec 2, 2020
0e649c1
adding some lights
kalwalt Dec 2, 2020
e14d55f
tryng to fix the getRenderer method
kalwalt Dec 2, 2020
df684cd
renderUpdate do nothing
kalwalt Dec 2, 2020
f8889c4
ambient light already created
kalwalt Dec 2, 2020
5d70d79
new CustomEvent getInitThreejsRenderer
kalwalt Dec 2, 2020
b6d94ab
Merge branch 'dev'
kalwalt Dec 4, 2020
6620870
Merge branch 'master' into feature-extends-threejsrenderer
kalwalt Dec 4, 2020
a95a6c0
rebuild libs after merging
kalwalt Dec 4, 2020
f95a321
changing the name of the listeners
kalwalt Dec 6, 2020
7451b2f
rename getThreejsRenderer to onAfterInitThreejsRendering
kalwalt Dec 6, 2020
b35e5b8
moving renderer settings inside onInitThreejsRendering
kalwalt Dec 6, 2020
4bce356
removing a console log
kalwalt Dec 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/ARnft.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added examples/Data/models/brave_robot/gLTF/brave_robot.glb
View file
Open in desktop
Binary file not shown.
33 changes: 33 additions & 0 deletions examples/arNFT_gltf_brave_robot_example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ARnft example with a gltf model</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
<link rel="stylesheet" href="css/nft-style.css">
</head>
<body>

<a
href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
class="ui marker"
target="_blank">
🖼 Marker Image
</a>

<script src="js/third_party/three.js/three.min.js"></script>
<script src="../dist/ARnft.js"></script>

<script>
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config_brave_robot.json', true)
.then((nft) => {
let renderer = nft.renderer;
console.log(renderer);
kalwalt marked this conversation as resolved.
Show resolved Hide resolved
nft.addModel('./Data/models/brave_robot/gLTF/brave_robot.glb', 40, 80, 80, 80);
}).catch((error) => {
console.log(error);
});
</script>
</body>

</html>
34 changes: 34 additions & 0 deletions examples/config_brave_robot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"addPath": "",
"cameraPara": "examples/Data/camera_para.dat",
"videoSettings": {
"width": {
"min": 640,
"max": 800
},
"height": {
"min": 480,
"max": 600
},
"facingMode": "environment"
},
"loading": {
"logo": {
"src": "Data/arNFT-logo.gif",
"alt": "arNFT.js logo"
},
"loadingMessage": "Loading, please wait..."
},
"renderer": {
"type": "three",
"alpha": true,
"antialias": true,
"context": null,
"precision": "mediump",
"premultipliedAlpha": true,
"stencil": true,
"depth": true,
"logarithmicDepthBuffer": true
}
}

9 changes: 9 additions & 0 deletions src/ARnft.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export default class ARnft {
this.width = width
this.height = height
this.root = new THREE.Object3D()
this.renderer = null
this.root.matrixAutoUpdate = false
this.config = config
this.listeners = {}
Expand Down Expand Up @@ -72,6 +73,8 @@ export default class ARnft {
if (configData.renderer.type === 'three') {
const renderer = new ThreejsRenderer(configData, canvas, root)
renderer.initRenderer()
this.renderer = renderer
kalwalt marked this conversation as resolved.
Show resolved Hide resolved
console.log(this.renderer);
const tick = () => {
renderer.draw()
window.requestAnimationFrame(tick)
Expand All @@ -87,6 +90,12 @@ export default class ARnft {
return await nft._initialize(markerUrl, stats)
}

renderer () {
kalwalt marked this conversation as resolved.
Show resolved Hide resolved
const renderer = this.renderer
console.log(renderer);
return renderer.renderer
}

add (obj) {
const root = this.root
document.addEventListener('getNFTData', (ev) => {
Expand Down
7 changes: 6 additions & 1 deletion src/renderers/ThreejsRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@ export default class ThreejsRenderer {
this.root = root
this.renderer = new THREE.WebGLRenderer({
canvas: canvasDraw,
context: configData.renderer.context,
alpha: configData.renderer.alpha,
premultipliedAlpha: configData.renderer.premultipliedAlpha,
antialias: configData.renderer.antialias,
precision: configData.renderer.precision
stencil: configData.renderer.stencil,
precision: configData.renderer.precision,
depth: configData.renderer.depth,
logarithmicDepthBuffer: configData.renderer.logarithmicDepthBuffer
})
this.renderer.setPixelRatio(window.devicePixelRatio)
this.scene = new THREE.Scene()
Expand Down