OK. So here we go… I’ve created a personal list of hands-on, self-empowering journeys in digital literacy on which I shall now embark. My aim is to design thick, rich learning1 that’s memorable.
As I’ve mentioned earlier, for many years, some number of educators have been intrigued by what they believe might be a special potential 3D can have for gamification and visualization—its “immersiveness”—in learning. Historically it’s been difficult to achieve.
My take on that is, if we’re waiting for a cadre of teachers who can keep up with current practice in tech-driven sectors and can teach it well in K-12, we’ll be waiting a long time. But there are many people doing those things who can teach well, and others just need an opportunity. Wonderfully blended situations can arise with modest support of professional educators. Educators can be familiar with current practice and keep up with lists of credible experts and other sources, hand that information over to learners, and turn them loose. It’s been called “planned serendipity.”
In order to create a more perfect HTML5–rich learning situation…
I plan to learn…
- Three.js
- Blender
- VFX For Filmmakers
What’s Three.js?
Three.js is a JavaScript library, which means it’s a set of commands sometimes, as in this case, for the purpose of interacting with a specific API, presumed to be in plainer English than without a library. The specific API ThreeJS interacts with is called WebGL, and that basically interfaces with your computer’s graphics card, using complex geometry—so you don’t have to! This allows you to do things like draw in 3D on an HTML5 canvas—and to import and adapt the freely available and donated creations of others who draw much better than you do. My first foray is here and the next here.
HTML5 <canvas>
The amazing magic of the HTML5 canvas tag includes the ability to draw dynamically, and create “game loops,” used to animate nearly all modern computer games. The bad news is, with very few exceptions, what happens on the canvas stays on the canvas. But rather than go off on a tangent explaining exactly what I mean by that, I’ll just tell you it impacts interactions, and then jump straight to my own solution…
In order to make either pure MP4 video or HTML5 canvas interactive I’ll do DOM manipulation and CSS overlays. This seems to be the general conclusion elsewhere in the community. Coursera and YouTube do the same thing, allowing links and other transparent or translucent items to float over top of the video. As browser support for all the HTML5 video and audio standards, like captioning and subtitles increases this means less and less additional work. But it highlights the foundationsl roles of the three “once and future” coding areas: HTML, JavaScript and CSS. These three aren’t going away anytime soon.
What will I do with Blender?
Among the first things I’m learning to do is create UVMaps of 3d meshes and paint them with a two dimensional texture, to create 3-D characters and scenery. these might become parts of standalone webpages, or pieces of videos.
UVMaps and “Painting” with Textures
UVMaps are an ingenious way of translating 2 dimensions into 3, for the purpose of wrapping a flat image onto a known geometry. The known geometry might be a free model from a growing list of repositories, the flat image a photo of a prize race horse. Using a two tone checkerboard pattern mapped to the model as an intermediary, we can calculate the warp and apply it to the photo of the horse. Check this out!
Which digital ‘video effects’ do I mean?
Tracking, keying by color matching (green screen) or luminosity and other masking techniques, and compositing—including media created using browser-based scenes created on open source libraries.
Let’s look at each one.
Tracking
Tracking means placing various 2D objects, like images or movies, onto 3D planes, and assigning markers to identifiable features on the object. Then you assign a virtual camera that tracks those spots. Once you have this information you can use it to align other layers, place them relative to each other, and keep them in perspective in the camera’s view. Tracking can be used, for example, to stabilize a camera, or attach a movie to a flat image of a television screen.
Keying
Keying is usually short for “chroma-keying,” referring to colour-matching and replacement techniques, which quite often involve using greenscreens.
Norwich University of the Art‘s and HitFilm‘s 4-week MOOC “VFX for Guerilla Filmmakers” included a valuable look at the history of matte and masking techniques, highlighting their direct evolution to the digital analogies of today. Such perspective informs choosing where, or how to shoot scenes or employ screens of different colors, or why and when to key on luminosity or some other property.
Combining keying and tracking you can create rich scenes that tell exciting stories. It’s far from impossible, nor unheard of, for a creative person with a computer perhaps no more powerful than the one you’re using to read this post, possesed of free and/or inexpensive software and their imagination, to accomplish the sorts of things that once took Walt Disney Studios a dozen or more highly accomplished artists and engineers three months.
Compositing
Compositing is putting it all together. Walt Disney used to stack glass paintings on top of each other and photograph them from above. Video compositing software like Blender and (free) HitFilm 3 Express (and still-image editors like Photoshop and Gimp) use layers.
Wrapping up
So I’m out to create characters and scenery using Blender, rig and animate these scenes and tell stories using ThreeJS, and put it altogether using HitFilm. HitFilm 3 Express is free and will do all the masking, keying and compositing you need, and get you started tracking. I upgraded to version 4 Pro to get even more in the way of 3D tracking.
The right tools in the right hands…
Who’s a geurrilla filmmaker?
Certainly not I! If I can learn to use it purposefully, I think it can grab attention that might translate to engagement, and I can make things memorable in some of the elearning I expect to produce. All of this is a lot of fun, and I might get good enough at it to get some personal amusement, but I have no ambitions to see my work at TIFF.
But I just know there are future filmmakers and other storytellers to be out there, who only need access to this kind information, and the kind of start I’ve had using Internet resources, to get their imaginations pumping. I think there’s possibly a great deal of value in handing it over and turning them loose.
3-D animation can go into movies, and movies can go into 3-D animation, that can be rendered into semi permanent forms and standalone artifacts, or utilized and engaged with using a web browser. With this short list, it’s already within reach.
- Learning design (LD) is distinguished from “instructional design” (ID) by a more holistic approach to achieving effective pedagogy and appropriate use of technology: “Learning Design aimed to provide practitioners with guidance and support to inform their design process which is pedagogically effective and makes appropriate use of technologies. It is seen as a more encompassing term than Instructional Design, which operates primarily at the level of multimedia; in contrast Learning Design provides a holistic approach to the design process.” (see e.g., Conole, 2015).