Easy 3D scanning tools for iOS in 2022

The task of making 3d models for games can feel daunting. In 2022, we have many tools to rapidly creating 3d models using scanning methods. I’m amazed how this robust computer science and computer vision technology has become accessible to makers and creatives. Let’s say you need to create a 3d model of a statue and 3d print a copy. In our post today, I wanted to connect our readers to a wonderful app called Trnio and a few others. For IPhone and Ipad users that have ARKit, maker can create impressive 3d models by recording a scan of their target objects or capturing pictures. The following video outlines the process for Trnio.

Under the hood, 3d scanning works by exploring each frame and computing the estimated camera position of the device. Using the camera position and feature points extracted from the frame, the system can do analysis of the movement of feature points over time. Using algorithms that extract 3d structure from motion, the app can estimate a model of the 3d object. Really cool stuff.

When testing this application with my kitchen table and few other car parts, I found the app easy to use with notable results. You can inspect some of the results of scans on SketchFab.

https://sketchfab.com/trnio

In the more recent editions of iOS devices, users have access to LIDAR scanners on these devices. The LIDAR sensor provides depth information more robustly to algorithms increasing 3d model quality. Fernado Herrera does a nice review of a few other scanning options that leverage LIDAR. He mentioned that the LIDAR scans worked best on large structures. I appreciated his comments on Qlone which focuses on scanning smaller items using a QR code template. The reviews looked a bit mixed on the app stores though.

We love to hear from our readers. If there’s another tool that you love for 3d scanning, please share in the comments. If you make something cool, please share that with us too!!

Related apps:
TRNIO

Quick start for Phaser 3 and TypeScript

As I have time for small project experiments for myself, I decided to explore new developments with Phaser JS. In general, Phaser JS seems like a fun framework to enable novice game makers to build fun 2D games. The javascript language has become a popular choice since the language exists in every web browser.

What can you build with Phaser 3? Check out some examples here.
Tetris
Robowhale
Fun Math Game

In this blog post, we walk through building a small space shooter game.

As you start Phaser JS development, many tutorials walk you through some process to setup a web server to serve html and javascript content. Unfortunately, plain JavaScript alone does not guide makers to create well formed code. In plain Javascript, coders need to create stuff in baby steps. In this process, you should test stuff at each step. If you use a tool like Visual Studio code, the tool provides awesome guidance and autocomplete for devs. It would be nice if tools could improve to help you find more code faults and common syntax mistakes.

The TypeScript language invented by Anders Hejlsberg comes to the rescue. The TypeScript language and related coding tools provides robust feedback to the coder while constructing code. The JavaScript language does not support ideas like class structures or interfaces. Classes enable makers to describe a consistent template for making objects, their related methods, and properties. In a similar way, interfaces enable coders to describe the properties and methods connected to an object, but does not define implementations of methods. It turns out these ideas provide an increased structure and guidance to professional developers to create large applications using JavaScript. When your tools help you find mistakes faster, you feel like you move faster. This provides great support for early stage devs. TypeScript borrows patterns and ideas from C#, another popular language for game developers and business developers.

I found a pretty nice starter kit that integrates TypeScript, a working web server, and Phaser 3 JS together. Here’s the general steps for setting up your Phaser 3 development environment.

Install Visual Studio Code

Install NodeJs and NPM

  • NodeJs enables coders to create JavaScript tools outside of the browser.
  • npm – When you build software in modern times, tools that you build will depend upon other lego blocks. Those lego blocks may depend upon others. The node package manager makes it easy to install NodeJs tools and their related dependences.
  • Use the following blog post to install NodeJs and NPM
  • Installing NodeJs and NPM from kinsta.com

Install Yarn

  • Install Yarn
  • Yarn is a package manager that provides more project organization tools.

Download Phaser 3+TypeScript repository

On my environment, I have unziped the files to /home/michaelprosario/phaser3-rollup-typescript-master.

Finish the setup and run

cd /home/michaelprosario/phaser3-rollup-typescript-master
yarn install
yarn dev

At this point, you should see that the system has started a web server using vite. Open your browser to http://localhost:3000. You should see a bouncing Phaser logo.

Open up Visual Studio Code and start hacking

  • Type CTRL+C in the terminal to stop the web server.
  • In the terminal, type ‘code .’ to load Visual Studio Code for the current folder.
  • Once Visual Studio Code loads, select “Terminal > New Terminal”
  • In the terminal, execute ‘yarn dev’
  • This will run your development web server and provide feedback to the coder on syntax errors every time a file gets saved.
  • If everything compiles, the web server serves your game at http://localhost:3000

TypeScript Sample Code

Open src/scenes/Game.ts using Visual Studio Code. If you’ve done Java or some C#, the code style should feel more familiar.

import Phaser from 'phaser';

// Creates a scene called demo as a class
export default class Demo extends Phaser.Scene {
  constructor() {
    super('GameScene');
  }

  preload() {
    // preload image asset into memory
    this.load.image('logo', 'assets/phaser3-logo.png');
  }

  create() {
    // add image to scene
    const logo = this.add.image(400, 70, 'logo');
    // bounce the logo using a tween
    this.tweens.add({
      targets: logo,
      y: 350,
      duration: 1500,
      ease: 'Sine.inOut',
      yoyo: true,
      repeat: -1
    });
  }
}