Interactive Web 3D

At work lately, I have been given the job to create an interactive 3D model framework. Sure, I have done stuff in Blender3D and OpenGL in the past, but I thought, how can I do this on the web (most browser support), tablet/mobile friendly and make some things dynamic. Back when I started web development, VRML was a thing, and sure it was awesome for its time (albeit not many browsers supported). I needed something which had the power of what I can do in Blender3D and OpenGL, and I came across this cool Javascript API called WebGL. Programming directly in the WebGL API I found to be very complicated and messy, but lucky for us there are libraries that simplified this for me. I came across this cool and lightweight one called Three.js by mrdoob. Three.js is an awesome 3D library that hides a lot of the WebGL complexities and makes it very simple to get started with 3D programming on the web. You can use Three.js in any way you could use canvas, including full-screen animations, so long as the device supports WebGL. It reminded me a bit of OpenGL and Renderman when I started reading the documentation.

The process of creating 3D using Three.js could be likened to how a movie set works. You start with an empty stage and add some things to it to create a scene. For example, we could add some actors, props, and a backdrop so it looks like we’re inside. Each actor puts on a costume so they look like the character they’re playing. Lights are added so we can see and to set the mood. Finally a camera is positioned to shoot the scene from the desired perspective.

So the actors and props are made by a collection of vertices and faces, which combined is called a geometry. Then from this step, you assign a material to a geometry. A material can be a flat colour, or it could be a texture such as a photo of rock, or wood, or skin. When a geometry and material are combined you have a mesh. A mesh is a complete object that can then be added to a scene. You can move and orientate the whole mesh in your scene as a single object, but you can still access its individual parts if you need to.

Anyways, I can talk more about this another time, lots of work to do. Ciao for now.

Published by theirishduck

I love the ability where I can plan, prioritise, design, develop and deliver blended learning solutions for a variety of markets. I love to consult and advise about the best use of digital learning and improve design standards in line with evolving ways of working. I also enjoy to keep up to date with, understand and regularly recommend emerging technologies and practice to improve individuals, teams and organisational capabilities. With over 12 years digital learning experience and demonstrated experience in both instructional design and eLearning development, I have also a lot of experience conducting training needs analysis including how to leverage principles such as design thinking and root cause analysis to understand and address performance gaps. I also have led many facilitation workshops and even presented at iDesignX and Game Developers Conferences both here in Australia, Wales and in the United States. I bring loads of coding experience in Java, ASM, C++, HTML, JavaScript, SCORM and xAPI, as well as proven capability using Adobe Captivate, Trivantis Lectora and Articulate Storyline 360 Studio authoring programs. Of course, Adobe Creative Cloud is also part of my toolbox which I also use daily. Being taught traditional and advanced 3D animation techniques, I love hand drawing and polymer clay sculpture, but can also use the Blender, 3D Studio Max, Maya and Softimage applications. With strong multimedia, training and programming backgrounds, I understand modern learner behaviour including micro and social learning, I am very familiar with most LMSes and app-based (XCode and Android Studio), adult learning models and e-solutions. I also possess the ability to manage multiple projects simultaneously, whilst being pro-active in delivering work independently with minimal supervision, but enjoy working in teams. I've been told I am a resilient, relationship focused guy which can manage and navigate conflicting views and stakeholders/subject matter experts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: