House Move Disrupts Tutorial Production

I am moving house, I am trying to keep creating but it is difficult. Once things have settled down, production should be back to normal.

Very Important Technology Alert – Node.js, npm and Webpack

I thought a 3D Internet would be a game changer but add to that access to nearly all new software and the possibilities are mind blowing!

Node.js provides an environment for application development.

Node. js Package Manager (npm) gives you access to nearly all new software written for the Internet. The software is modularised so that it can be used as building blocks to make new apps.

Webpack is a tool that copies the modules and combines them with your code to create a ‘bundle’ JavaScript file.

You may need to develop new skills but with such important technology, these skills will be very valuable.

Click here for the tutorials page.

Blender Courses

The courses consist of structured sets of tutorials with support materials. The modelling, animation and game design courses all have ten sessions, they could take ten weeks, but with online courses you can do them at a speed you like.

The modelling course has two main targets, a chess set and a dining table scene, completing these will give you a good introduction to modelling techniques. There are lots of other models to try e.g. cars and characters. Click here for course overview.

The animation course shows how to use a wide range of techniques. Techniques that include key framing, follow path, physics, 2D  and character animation (including motion capture). Could you make a short movie with sound effects and music? Click here for course overview.

The aim of the game design course is to look at many different types of games. Making the different games develops a wide range of techniques and game design thinking. Click here for the new game design course overview.

date modelling animation game design
Session 1 Pawn and bishop chess pieces Jet take off, victory roll Simple ball game
Session 2 Wine glass and spoon Jet, car, train all following a path Ten pin bowling
Session 3 metals, colors and chess board particles, explosions, hair controlling a character
Session 4 knight, rook, king & queen jet crash landing, domino run walk around collecting
Session 5 Chair, knife and fork very simple rig, walk cycle drive around collecting
Session 6 globe, Coke can and cactus moon orbiting, nla editor car racing game
Session 7 bat logo, racing track, egg 2D bouncing balls, animating an image shoot ’em up
Session 8 Cycles gems, metals, barrel monkey robot & stick man pong
Session 9 stick man, mask motion capture add bricks
Session10 chess set, dining table scene make a short movie odds & ends

New Tutorial Series – How to Use Sliders to Interact With a 3D Scene

The latest tutorial uses a slider to control the speed of an animation. What’s new is the type of animation, JavaScript is used for ‘procedural animation’.

The tutorial has a brief discussion about ‘event driven programming’ techniques used with slider objects.

To unleash the power of 3D on the Internet, you need to have at least basic JavaScript skills (or have someone in your team who has).

Even if you hate programming, everyone can reach a certain level (with effort most people can pass a mathematics exam). There are lots of resources on the Internet for learning JavaScript, W3schools for instance.

Blend4web does provide logic nodes for creating interactivity without code, but real men and real women use JavaScript.

Keep Blending but also learn JavaScript!

Click here for the page.

New Tutorial Series – Making a Simple 3D Bat and Ball Game That Plays in a Web Browser

The bat may only be a flattened cube but these tutorials show that it is relatively easy to make 3D bat and ball games that can be played on a range of devices.

In these tutorials the game is designed to work on a computer with a mouse but it could be adapted to work on a touchscreen smartphone/tablet or a virtual reality headset.

The tutorials show how to create the 3D scene using Blender. They explain the JavaScript Blend4web code that controls the game. The result is a 3D game that plays in a web browser.

The first tutorial shows a way of making a 3D object (the bat) follow the mouse pointer.

The second tutorial shows how to create duplicate balls for the bat to hit. It also adds enough game logic to make a playable game.

The third tutorial uses the same 3D scene but with more complicated game logic. It also shows how to add sound effects. In the second tutorial, new balls are made at regular intervals, in the third tutorial the interval becomes less and less making the game harder.

Click here for the tutorials page.

Click here to play the finished game.


New Tutorials – Web Based, Interactive Train Simulation/Game

Tutorials that shows how to make an interactive toy train simulation. The technique does not use the physics engine. A train can appear to travel along a track using curve animation. The train follows a curved line path, the same curve is used to shape the track.

Exporting curve animation to a web browser is currently not supported, so the curve animation has to be converted (baked) to a set of keyframes. The keyframes store the location and rotation of the train.

The set of keyframes form an ‘action’ that can be controlled by JavaScript code.

Using this technique, the user can control a train travelling around a large,complicated track with branches, signals, tunnels, bridges etc.

Click here for the train tutorials page.

Click here for the uploaded scene, clicking on the ground starts the train.

New Tutorials – Making Paintballing Games That Run in a Web Browser

At last I have made a game that I enjoy playing!

The purpose of the my games is to demonstrate techniques. Making a game that is fun to play is not the point, that is for you to do.

The latest paintball target practise game, I think, is quite challenging. You have to plan the order you are going to hit the targets otherwise you run out of time. You have to hit them in order without any misses. It is quite satisfying when you do it.

See if you can hit them all – click here for the game, you need to be using Chrome, Safari or Firefox web browser and you need reasonable 3D graphics hardware.

Blend4web provide a ‘ray test’ demonstration app that allows you click the mouse pointer on moving targets, adding a paintball graphic where you hit.

Click here for the paintball tutorials page.

New Tutorial – Interactively Change a Character’s Skin and a Skybox Image

There are two new tutorials that look at the ‘change image’ example code snippet provided by blend4web.

The first tutorial demonstrates changing an image dynamically by creating a simple slide show.

The second tutorial shows how to interactively change a character’s skin and a skybox image.

More web gaming tutorials to follow soon.

Click here for the page.

New Car Web Game Tutorials

In this tutorial series, a simple car game that was made for the Blender game engine is converted so that it will run in a web browser (using Blend4web).

The original game consisted of a car driving into spinning gemstones to score points, avoiding obstacles that reduce health.

In the first tutorial the render is changed from Blender game to Blend4web, then it shows how to get the car to work.

The second tutorial shows how to set physics properties for ramps, platforms and obstacles.

The third tutorial shows how to ‘collect’ the gemstones by colliding with them. Up to this point we have not used code, but now we need to use JavaScript. The first time you see the code it is pretty scary.

Click here for the car game page.

Tutorials – Developing a Ten Pin Bowling Internet Game

Developing a game is like growing a garden, there are always changes and improvements you can make.

The first tutorial shows how to make the alley, the ball and how to add a ready-made skittle, into a 3D scene. It shows how to set up the ‘physics’ for the objects and how to duplicate the skittle to make ten pins.

The second tutorial shows how to set up keyboard sensors so that the ball is started by pressing the space bar or the enter key.  This tutorial has a detailed description of the code, if you not interested in the detail you may want to skip onto the next tutorial.

The third tutorial shows how to move the ball to the left and right to aim before shooting. The tutorial explains key points in the code. The tutorial highlights the code that turns the ball’s physics off so that it can be moved.

The fourth tutorial shows a method of detecting if the pins/skittles are knocked over and how to display the score.

The fifth tutorial shows a method of giving the player a second ball.

Click here for the page.

New Internet blend4web Scripting Tutorial – Web Console

If you want to make 3D games that will run in a web browser using free software (Blender and blend4web) then you need to do some coding. Although the code looks complicated, most of it can be copied and pasted with only a few changes necessary.

When writing code, programs rarely work properly the first time they are run. A programmer has to remove errors/bugs, the process is called debugging. The web console built into most web browsers is a useful tool to help with debugging.

The web console displays messages sent from the blend4web API as it attempts to use WebGL to render a 3D scene. The messages include warnings and errors.

A programmer can trace through a program by placing output statements at key points, to see what is going on. With JavaScript the output statements can be sent to the web console.

Click here for the blend4web introduction to scripting tutorials page.

New Character Control Tutorial – Collecting Objects In A Web Scene

This tutorial follows on from a tutorial that showed how to add cage to stick man character rig. This tutorial shows how to add code so that a character can collect objects in a web scene.

The focus of my tutorials recently has been on making web based, interactive 3D scenes using a Blender extension called blend4web.

In this tutorial JavaScript code is used to detect a collision between the character and an object. When the collision is detected the object is removed from the scene (collected) and the score is increased.

Click here for the page.

New Tutorial – 3D Animation Of A DNA Molecule Coiling & Uncoiling, An Example Of Baked Vertex Animation

This tutorial shows how to make an animation of a DNA molecule coiling and uncoiling (making a double helix).

The tutorial also shows how to use blend4web’s vertex animation tool to convert the animation so that it can be played in a web browser.

Click here for the web animation tutorials page where you can download files used in the tutorial.

Click here for the chemistry tutorials page, for the tutorials that show how to make the DNA molecule.

New Tutorial – Experimenting With Positional & Directional Sound, Useful For 3D Animation, Games & Virtual Reality

This tutorial looks at positional and directional sound that can be simulated using a speaker object in Blender. The tutorial shows how to make two animations that demonstrate these effects.

Positional Sound

When you are near a sound source, for instance a speaker, the sound energy is strong, the volume is high. As the distance from the speaker increases the volume decreases.

Attenuation is how strongly distance affects volume, a value of zero means distance has no effect, turning positional sound off.

Directional Sound

A real world speaker has a cone. The cone acts as a waveguide, channeling the sound energy forwards from the speaker. Standing in front of a speaker the volume is high. As you walk around the speaker the volume decreases to a low behind the speaker.

Real world speakers will have many factors that affect the volume around them. Blender uses a two cone system to simulate directional sound. The two cone system creates three regions –

  • Inside the inner cone – full volume (in front of the speaker)
  • Between inner and outer cones – sound is interpolated between full and low volume (to the side of the speaker)
  • Outside the outer cone – low volume (behind speaker)

Click here for the web animation tutorials page.

New Tutorial – Converting A Train Animation To Work In A Web Browser With Sound Effects

This tutorial shows how to convert curve animation (an object following a path) so that it can viewed on the Internet.

The tutorial is the first of mine to look at sound for the 3D web. In this tutorial the sound is simply set as a background effect. The interesting thing about this tutorial is the way that Blender can be used as a sound file editor.

In the next tutorial I will show how to set up an example of positional sound, where the sound source moves in 3D space.

This current series of animation tutorials will be useful to anyone who is interested in using Blender’s NLA (Non-Linear Animation) Editor. The NLA Editor is a powerful tool for animators and is useful regardless of the target output medium.

The target output medium is usually video, video files can be uploaded to the Internet (for example to YouTube). An alternative is now available, a free extension to Blender called blend4web. Using blend4web it is relatively easy to upload 3D animation to the Internet as 3D, not flattened to 2D video.

Click here for the web animation tutorials page.

Click here for the animation gallery page.

3D Web Animation – What Is It? What Would I Do With It?

Imagine exploring a 3D computer generated world (wearing a virtual reality headset) and stumbling upon an open air theatre where there is a performance of ‘Romeo & Juliet’.

Imagine going to a virtual rock festival and watching a computer generated rock legend performing at their peak.

Ok to make the above may be a bit tricky, so imagine looking up and seeing a jet doing a display of stunt flying.  I have made a tutorial that shows how to make a flying display using Blender’s NLA Editor. Very few additional steps are required to export the scene in a web format.

Click here for the web animation tutorials page.

Materials For The Internet – New Tutorials

The latest tutorial shows how to use a texture image as a bump map. Like normal maps, bump maps add 3D surface detail to a model.

The previous tutorials showed how to –

  • append a ‘material core’ from a material library file
  • use ‘matcaps’ to produce a range of materials, easy to set up and quick to render
  • make an embossed logo and textured matte/gloss materials. The tutorial shows how to use normal maps to add 3D surface detail to a model
  • use materials from the blend4web material library, the examples looked at were chrome and glass, the tutorial also looked at the blend4web settings for shadows and reflections

Click here for the blend4web materials for the Internet tutorials page where you can access the files used in the tutorials

click here for the Web Gallery where you can see examples uploaded to the Internet

New blend4web Game Tutorial – First Person Character Controls

The default camera controls are easy to use but the controls used in first person shooter games have several advantages.

The camera becomes your eyes as you walk around a 3D scene. You interact with the scene, gravity puts you on the ground and you cannot walk through static objects.

You can walk up and down slopes and stairs, and you can fall off platforms. You can bump into objects and push them out of the way.

Fly mode removes gravity from you so that you can move in any direction and so ‘fly’ over objects.

The tutorial is quick and easy, no programming is required.

click here for the blend4web game tutorials page

New blend4web Tutorial – Making The Camera Follow A Car Using The ‘Move Camera’ Logic Node

that follows on from –

It is surprisingly easy and quick to make a car simultion using blend4web.

Click here for the blend4web car tutorials page where you can download the files.

Click here for the finished scene uploaded to the Internet.

Click here for an example with ramps and obstacles.

New blend4web Tutorials

New scritping tutorials looking at Project Manager’s text editor and the JS Callback logic node –

click here for the blend4web scripting tutorials page

New blend4web game tutorial, how to make a very simple game that has a score and a timer –

click here for the blend4web game tutorials page

New blend4web Tutorial – Anchor Annotations, Creating Labels for 3D Objects

This blend4web tutorial looks at anchors that attach annotations to 3D objects in web pages. Annotations are useful for labelling objects in galleries and educational applications.

The solar system project that comes with blend4web is a good example of the use of anchors, they label the planets and give extra information when the labels are clicked.

Click here for the blend4web tutorials page.

Note: Before doing the tutorial you need to download and install the blend4web CE SDK from – https://www.blend4web.com/en/

New Python Scripting Tutorial – Bmesh Example Scripts Explained & Assigning Different Colors To Faces

This tutorial takes a first look at scripting with the bmesh module.

There is more than one way of representing 3D data. There are different mathematical models and different implementations. A representation has strengths and limitations.

Bmesh offers an alternative representation to the original Blender representation. It was designed to overcome some of the limitations of the Blender representation.

Click here for the Introduction to Scripting page.

New blend4web Scripting Tutorial – Understanding a Code Snippet and Making a Pyramid

To access the full power of blend4web,  WebGL and a 3D Internet you have use programming, blend4web provide example code ‘snippets’ that demonstrate the functionality of their API. The snippet looked at demonstrates how to duplicate objects using script.

The tutorial naturally fell into two parts –

  • setting up the snippet so it could be edited and run locally
  • an explanation of what the snippets JavaScript code does

Both parts are availible at the following link.

Click here for the blend4web scripting page.

Note: Before doing the tutorial you need to download and install the blend4web CE SDK from – https://www.blend4web.com/en/

New Python Scripting Tutorial – Creating New Materials, Creating a Property & Using It to Change Colors

This tutorial shows how to use script to make a set of standard colors. A drop down list in a panel, allows a user to select a standard color and apply it to the active object.

Click here for the Introduction to Scripting page.

New Tutorial – Import and Edit a Spherical Fullerene and a Nanotube

The tutorial shows how to import and edit, two amazing and beautiful structures, both are large carbon molecules.

Click here for the chemistry page.

New blend4web Tutorial – Hyperlinking Between Web Based 3D Scenes

With blend4web you can easily make 3D scenes for the Internet. One of the great things about web pages is hyperlinks, the new tutorial show how to turn an object in a 3D scene into a hyperlink.

click here for a demo of some 3d scenes with hyperlinks.

The tutorial uses Blender and blend4web, click here for the page.

Note: Before doing the tutorial you need to download and install the blend4web CE SDK from – https://www.blend4web.com/en/

New Python Scripting Tutorial – Adding New Properties to Objects & Linking Them to Update Functions

A Python API scripting tutorial looking at adding properties to objects and linking them to update functions. Another area for building a skill set necessary to be a Blender scripter.

Click here for the Introduction to Scripting page.

Make an Online 3D Gallery for Your Models

Set up your own modelling e-portfolio, what is the point of making great models if no one can see them?

click here for a demo gallery, click on the can and mask.

The tutorial uses Blender and blend4web, click here for the page.

Note: Before doing the tutorial you need to download and install the blend4web CE SDK from – https://www.blend4web.com/en/

New Python Scripting Tutorial – Create a New Mesh Object From Scratch, Using Python Code

The new tutorial that shows how to develop one of the template scripts to create new mesh object using code. The example mesh object created is in the shape of a house brick, so the tutorial is also part of the ‘add bricks’ theme.

Click here for the Introduction to Scripting page.

New Game Engine Scripting Tutorial – Input, Process & Output, Entering Text At Run Time, Messaging

Looking at using the Blender game engine and Python scripting to write basic programs.

The tutorial shows how to write a simple program that inputs a number, processes it and outputs a result. The example used is entering a distance in miles, calculating and outputting the distance in km.

The concepts covered are entering text at run-time and using messaging to pass data between objects.

Click here for the Input, Process and Output page.

New blend4web Tutorial

How to move a 3D object up and down in a web page, click the up/down arrow (cone) to make the monkey go up or down –

Click here for web page (will open in new tab)

Click here for the blend4web tutorials page.


Leave a Reply