Skip to content

Commit

Permalink
Merge branch 'threejs' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@syoyo
syoyo committed Aug 16, 2024
2 parents fdcc045 + 6cd6910 commit cf70e4c
Show file tree
Hide file tree
Showing 43 changed files with 785 additions and 3 deletions.
4 changes: 4 additions & 0 deletions sandbox/emscripten/embind/Makefile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
EMCC=emcc

all:
${EMCC} --bind -Os simple.cc -sMODULARIZE -sEXPORT_ES6=1 -s ALLOW_MEMORY_GROWTH=1 -o myloader.js
15 changes: 15 additions & 0 deletions sandbox/emscripten/embind/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script>
</script>
<script type="module" src="/main.js"></script>
</body>
</html>
24 changes: 24 additions & 0 deletions sandbox/emscripten/embind/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "simple-loader",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"@types/three": "^0.160.0",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"@types/bun": "latest"
},
"dependencies": {
"gsap": "^3.12.4",
"lil-gui": "^0.19.1",
"stats.js": "^0.17.0",
"three": "^0.160.0"
},
"module": "index.ts"
}
40 changes: 40 additions & 0 deletions sandbox/emscripten/embind/simple.cc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
#include <emscripten/bind.h>

#include <vector>

using namespace emscripten;

///
/// Simple C++ wrapper class for Emscripten
///
class MyLoader {
public:
MyLoader(const std::string &binary) {
binary_ = binary;
}
~MyLoader() {}

bool ok() const { return binary_.size(); }

const std::string error() const { return error_; }

private:
std::string binary_;
std::string warn_;
std::string error_;

};

// Register STL
EMSCRIPTEN_BINDINGS(stl_wrappters) {
register_vector<float>("VectorFloat");
register_vector<int>("VectorInt");
register_vector<uint32_t>("VectorUInt");
}

EMSCRIPTEN_BINDINGS(myloader_module) {
class_<MyLoader>("MyLoader")
.constructor<const std::string &>()
.function("ok", &MyLoader::ok)
.function("error", &MyLoader::error);
}
17 changes: 14 additions & 3 deletions sandbox/threejs/CMakeLists.txt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Assume this project is invoked by emcmake.
cmake_minimum_required(VERSION 3.5.1)

set(BUILD_TARGET "tinyusdzjs")
set(BUILD_TARGET "tinyusdz")

if (NOT EMSCRIPTEN)
message(FATAL "Must be compiled with emscripten")
Expand Down Expand Up @@ -30,6 +30,9 @@ list(

add_executable(${BUILD_TARGET} ${SOURCES})
add_sanitizers(${BUILD_TARGET})

set(EXT_COMPILE_OPTIONS "-sTOTAL_MEMORY=1024MB")

target_compile_options(${BUILD_TARGET} PRIVATE ${EXT_COMPILE_OPTIONS})

# tinyusdz dir
Expand All @@ -43,7 +46,15 @@ target_link_libraries(${BUILD_TARGET} PRIVATE tinyusdz::tinyusdz_static
source_group("Source Files" FILES ${SOURCES})

if (EMSCRIPTEN)
set(CMAKE_EXECUTABLE_SUFFIX ".html")
set_target_properties(
${BUILD_TARGET}
PROPERTIES OUTPUT_NAME tinyusdz
SUFFIX ".js"
RUNTIME_OUTPUT_DIRECTORY ${PROJECT_SOURCE_DIR}/dist)
#set(CMAKE_EXECUTABLE_SUFFIX ".html")
endif()

set_target_properties(${BUILD_TARGET} PROPERTIES LINK_FLAGS " --bind")
set_target_properties(${BUILD_TARGET} PROPERTIES LINK_FLAGS "-s INITIAL_MEMORY=128MB -s TOTAL_MEMORY=1GB -sTOTAL_STACK=256MB -sASSERTIONS -s ALLOW_MEMORY_GROWTH=1 -s WASM=1 -sMODULARIZE -sEXPORT_ES6=1 --bind")

# ENVIRONMENT=web
# SINGLE_FILE=1
16 changes: 16 additions & 0 deletions sandbox/threejs/simple/TinyUSDZLoader.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
let TinyUSDZ = null;

const TINYUSDZ_PATH = './tinyusdz.js';

async function TinyUSDZLoader() {
if ( TinyUSDZ === null ) {

const { default: initTinyUSDZ } = await import( TINYUSDZ_PATH );
TinyUSDZ = await initTinyUSDZ();

}

console.log( TinyUSDZ );
}

export { TinyUSDZLoader };
15 changes: 15 additions & 0 deletions sandbox/threejs/simple/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script>
</script>
<script type="module" src="/main.js"></script>
</body>
</html>
60 changes: 60 additions & 0 deletions sandbox/threejs/simple/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import * as THREE from 'three';

import initTinyUSDZ from './tinyusdz.js';

const USDZ_FILEPATH = './suzanne.usdc';
//const USDZ_FILEPATH = './cube.usdz';
//const USDZ_FILEPATH = './texture-cat-plane.usda';
//const USDZ_FILEPATH = './LemonMeringuePie.usdz';
//const USDZ_FILEPATH = './robot.usda';
//const USDZ_FILEPATH = './teapot.usdz';
//const USDZ_FILEPATH = './DamagedHelmet.usdz';

const usd_res = await fetch(USDZ_FILEPATH);
const usd_data = await usd_res.arrayBuffer();

const usd_binary = new Uint8Array(usd_data);

initTinyUSDZ().then(function(TinyUSDZLoader) {

const usd = new TinyUSDZLoader.TinyUSDZLoader(usd_binary);
console.log(usd.numMeshes());

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

// First mesh only
const mesh = usd.getMesh(0);
console.log(mesh);

//const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.BufferAttribute( mesh.points, 3 ) );
// TODO: set normal from mesh

// Assume triangulated indices.
geometry.setIndex( new THREE.Uint32BufferAttribute(mesh.faceVertexIndices, 1) );

geometry.computeVertexNormals();

//const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render( scene, camera );

}
});
24 changes: 24 additions & 0 deletions sandbox/threejs/simple/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "simple-threejs-tinyusdzloader",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"@types/three": "^0.160.0",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"@types/bun": "latest"
},
"dependencies": {
"gsap": "^3.12.4",
"lil-gui": "^0.19.1",
"stats.js": "^0.17.0",
"three": "^0.160.0"
},
"module": "index.ts"
}
2 changes: 2 additions & 0 deletions sandbox/threejs/web/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
based on threejs-starter-bun https://github.com/j1m-ryan/threejs-starter-bun
(MIT license)
14 changes: 14 additions & 0 deletions sandbox/threejs/web/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./src/style.css" />
<link rel="stylesheet" type="text/css" href="./src/reset.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ThreeJS Starter</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<canvas id="c"></canvas>
</body>
</html>
24 changes: 24 additions & 0 deletions sandbox/threejs/web/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "simple-threejs-tinyusdzloader-demo",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"@types/three": "^0.160.0",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"@types/bun": "latest"
},
"dependencies": {
"gsap": "^3.12.4",
"lil-gui": "^0.19.1",
"stats.js": "^0.17.0",
"three": "^0.160.0"
},
"module": "index.ts"
}
11 changes: 11 additions & 0 deletions sandbox/threejs/web/src/camera.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as THREE from "three";
import { cameraFolder } from "./lilgui";
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 100);

camera.position.z = 2;

cameraFolder.add(camera.position, "x").min(-3).max(3).step(0.001).name("X");
cameraFolder.add(camera.position, "y").min(-3).max(3).step(0.001).name("Y");
cameraFolder.add(camera.position, "z").min(-3).max(3).step(0.001).name("Z");

export default camera;
3 changes: 3 additions & 0 deletions sandbox/threejs/web/src/canvas.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const canvas = document.getElementById("c") as HTMLCanvasElement;

export default canvas;
8 changes: 8 additions & 0 deletions sandbox/threejs/web/src/controls.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { OrbitControls } from "three/examples/jsm/Addons.js";
import camera from "./camera";
import canvas from "./canvas";

const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

export default controls;
5 changes: 5 additions & 0 deletions sandbox/threejs/web/src/helpers/axesHelper.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import * as THREE from "three";

const axesHelper = new THREE.AxesHelper();

export default axesHelper;
14 changes: 14 additions & 0 deletions sandbox/threejs/web/src/helpers/lightHelpers.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as THREE from "three";
import { directionalLight, hemisphereLight } from "../lights";

const hemisphereLightHelper = new THREE.HemisphereLightHelper(
hemisphereLight,
0.1
);

const directionalLightHelper = new THREE.DirectionalLightHelper(
directionalLight,
0.3
);

export { hemisphereLightHelper, directionalLightHelper };
9 changes: 9 additions & 0 deletions sandbox/threejs/web/src/helpers/shadowCameraHelpers.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as THREE from "three";

import { directionalLight } from "../lights";

const directionalLightShadowCameraHelper = new THREE.CameraHelper(
directionalLight.shadow.camera
);

export { directionalLightShadowCameraHelper };
56 changes: 56 additions & 0 deletions sandbox/threejs/web/src/lights.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import * as THREE from "three";
import {
directionalLightFolder,
ambientLightFolder,
hemisphereLightFolder,
} from "./lilgui";

const ambientLight = new THREE.AmbientLight("white", 1);

ambientLightFolder
.add(ambientLight, "intensity")
.min(0)
.max(5)
.step(0.01)
.name("Intensity");

const hemisphereLight = new THREE.HemisphereLight("white", "green", 1);
hemisphereLightFolder
.add(hemisphereLight, "intensity")
.min(0)
.max(10)
.step(0.01)
.name("Intensity");

const directionalLight = new THREE.DirectionalLight("white", 2);
directionalLight.position.set(2, 2, 2);
directionalLightFolder
.add(directionalLight, "intensity")
.min(0)
.max(10)
.step(0.01)
.name("Intensity");

directionalLight.castShadow = true;
directionalLight.shadow.camera.far = 10;

const directionalLightShadowMapSizeResolution = 2048;
directionalLight.shadow.mapSize.set(
directionalLightShadowMapSizeResolution,
directionalLightShadowMapSizeResolution
);

directionalLightFolder
.add(
directionalLight.shadow.mapSize,
"x",
[1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048]
)
.onChange((v: number) => {
directionalLight.shadow.mapSize.y = v;
directionalLight.shadow.map && directionalLight.shadow.map.dispose();
directionalLight.shadow.map = null;
})
.name("Shadow Map Resolution");

export { ambientLight, hemisphereLight, directionalLight };
Loading

0 comments on commit cf70e4c

Please sign in to comment.