background preloader

Displaying 3D Models in Web Pages using Webgl

Displaying 3D Models in Web Pages using Webgl
Standards for hardware accelerated 3D on the Internet are starting to become established. This is the first step towards immersive virtual worlds accessible through a browser window and for now, a nice way to display your models. The following tutorial (in four parts) shows how to embed Blender models in web pages using software from x3dom.org, the video tutorial runs through a Blender tutorial from their site. Here are the files created in the tutorial – greenMonkey.zip (not needed, easy to make your own). Here are the files created in the final part of the tutorial, models with textures – nes.zip Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part1 This part of the tutorial shows how to embed x3d code in a web page e.g. greenMonkey2.html (sky colour modified). Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part 2 Animation in the x3d Format Files used in tutorial – animationExamples.zip Related Links Related:  multi-touch rotate zoom

rotoscoping in blender A tutorial for Rotoscoping techniques in Blender 3D by Christopher Barrett showing a step by step process to get rotoscoping done using Blender for people who may not have other programs such as After Effects or Nuke. Rotoscoping in Blender (Part 1) from Christopher Barrett on Vimeo. “This is the first part of a tutorial series for rotoscoping with Blender. I’ll show you how to set everything up, step by step, so you can rotoscope even if you don’t have access to expensive programs like AE or Nuke.” Rotoscoping in Blender (Part 2) from Christopher Barrett on Vimeo. “This is the second part of a tutorial series for rotoscoping with Blender.

Model a sperm whale in Blender 2.5 Beginning with a simple cube and gradually refining its form, you will learn how to add detail to the model while maintaining a low poly count as you progress through the tutorial. The modern 3D industry, particularly games and film work, requires digital models that are ready to use for animation. The efficiency of animation depends upon the construction of the model. If the model is heavy on polygons, it tends to slow down the machine and interferes with the process of smooth animation. On the other hand, if the model has a very low poly count, it can lose detail, and therefore visual appeal. The task of the artist is to strike an appropriate balance between the two. Before we begin, let’s run through some of the keyboard shortcuts used in this tutorial. Let’s begin. Before you begin modelling, it is advisable to have an image to use for reference. Now, press the [Tab] key on the keyboard to take the default cube into Edit mode.

mplex model example INFO: Time for setup and init of GL element no. 0: 233 ms. INFO: System ready. INFO: activate NavigationInfoBindable null/ INFO: activate first X3DNavigationInfoNode for X3DNavigationInfoNode-stack INFO: activate EnvironmentBindable null/defaultX3DEnvironmentNode INFO: register EnvironmentBindable null/defaultX3DEnvironmentNode INFO: create new Environment for X3DEnvironmentNode-stack INFO: register ViewpointBindable Camera/Camera WARNING: Fallback to inefficient multi-index mode since creaseAngle=0. INFO: register BackgroundBindable World0/ INFO: register NavigationInfoBindable null/ INFO: NavType: examine INFO: addEventListener for X3D.onDOMNodeInserted INFO: addEventListener for X3D.onDOMNodeRemoved INFO: Initializing X3DObject for [x3dom-someUniqueId-object] INFO: Creating FlashObject for (X)3D element... INFO: Fallback to Flash Renderer ERROR: No 3D context found... WARNING: [Exception... INFO: Initializing X3DCanvas for [x3dom-someUniqueId-canvas] INFO: Creating canvas for (X)3D element...

FinalMesh - WebGL Technical information FinalMesh saves data as html, javascript and data files. Data files are scene tree, geometry, textures and optional shaders. HTML is for sample only, you may insert required parts from it to your own page. Integration Of course you may upload html file as is and everything will work, no changes are required. Internals We use AJAX for loading all data files, so all data downloaded in background and screen is updated when data is ready. After initializing, script loads objects tree and materials definitions. Data Format Geometry is saved in our own format. Scene tree is saved as text-json file. Data size and Geometry Quality Produced data files are quite compact. Binary encoding with lossy compression is right choice for most cases. Generated data files with precomputed per vertex normals are: about 3-6 times smaller than binary .STL files about 2.5-4 times smaller than .3DS about 3-5 times smaller than .OBJ Including HTML, CSS and Javscript. Customization Coming soon

Introduction to Blender Python API - imagine.create.express.share.enjoy. Introduction Blender is a powerful 3D application for creating 3D images and animations and bring your creativity to life. The strength of Blender is its philosophy to provide a smooth and seamless work flow and tools for the artist. Apart from creating objects using devices, Python also enables you to create objects and other things using a scripting interface. Blender uses the awesome and user-friendly Python scripting language It provides extensive programming interface to match almost all the functionality of the application (hence called Blender Python API or BPY API). Now, If you are absolutely new to Programming, please go through the excellent and free online e-book Learning With Python. Accessing Blender's Built-in Python Console By pressing SHIFT+F4 in any Blender Window (3D View, Timeline etc.,) you can change it to a Console Note: Python is a case-sensitive language, so make sure you type the commands as shown in this tutorial (using the same case) Exercise: Basic BPY API Modules

Lighting in Blender Internal Part I : Basics I. Basics print version | .blend files Hello, I'm Marek Skrajnowski (some might know me as Kroni/Kronos from forums) and I've been using blender as a hobby for about 3 years now. I've divided this tutorial into 5 parts I'd like to cover: 1. This part of the tutorial will cover basic info about lighting in blender, light types and their properties and usage, Ambient Occlusion, compositing with nodes to speed up the setup. Point Light: hard shadows, soft 2, soft 4 Lamp - point/sphere light Nothing to add really, can be used for all kinds of light bulb based sources. Attributes: falloff - how distance affects the energy (inverse squere is the "physically accurate" one) samples - if 1, light acts as a simple point light, if above 1 it will be a sphere light soft size - radius of the sphere Hints: The custom curve falloff can prove useful if you need a small light source (such as christmas tree lamps) to light objects relatively far away without overexposure of close objects. Sun light Hints: Sun

J3D: taming WebGL - Everyday 3D I started to work with WebGL a few months ago. WebGL (in case you never heard about it) is a new emerging standard for rendering GPU accelerated graphics in the browser, without any plugins. Not all browsers support it yet, but the latest Chrome and Firefox do and others are about to follow (Safari, Opera, sadly not IE for the moment). Whatever happens, WebGL seems to be here for good and it is definitely worth learning or at least looking at. WebGL is a Javascript API. Based on OpenGL ES, WebGL is a collection of functions to communicate with the graphics card. Resources and WebGL demos appear almost everyday, so be sure look around the web for interesting stuff. What better way to learn a 3D API than to build an engine? That’s how J3D was born. Although J3D is pretty small and has limited functionality, it works and building it allowed me to learn and understand WebGL pretty well.

Setup a Local Web Server on Windows, Mac, and Linux When developing a website, a web designer needs to be able to see his webpages the same way the end user would. Sometimes simply clicking on and viewing your HTML files in the web browser is enough, but if you want to test dynamic content, you will need to set up a local web server. Doing this is quite simple and can easily be accomplished on Windows, Mac, and Linux. There are many types of web servers available, but we will be using Apache as it is the most common server around, very easy to set up, and compatible with all major operating systems. Apache was designed for Unix-like operating systems. Linux falls under this category, and installation and configuration of Apache webserver can be done in one step. For graphical walkthrough, you can follow this tutorial. Most popular distributions allow you to install Apache without compiling it from source using one simple command. For Debian, Ubuntu, and Ubuntu-based distro: sudo apt-get install apache2 For Red Hat and CentOS

Extensions:Py/Scripts From BlenderWiki A script is a program that is written in the Python language which runs within Blender, and calls on Blender routines to create new functionality. Because Python is a popular interpreted programming language, it can be used to extend the functionality of Blender in a wide array of ways. Users all over the world have written hundreds of scripts, and this section of the Blender wiki attempts to catalog and document those scripts. It also provides information on how to use and write scripts easier and more effectively. Blender 2.6 has some big changes compared to 2.4. Information for Artists Scripts Catalog - An overview of the scripts that are available, including their documentation. Information for Script Writers Blender Python Manual - Central wiki page for writing scripts in Blender. Blender 2.49b uses Python 2.6 series.

Create a Shattered Glass Title Animation Using Blender | Blender Compositing In this tutorial you will discover how to: Use the explode modifier correctly to break apart your meshSlow down time by tweaking particle settingsUse force fields to give your particles an extra ‘kick’Create thousands of shards of glass in one fell swoopColor grade your work ‘hollywood style’ If you’ve spent anytime watching television, you’ve probably seen at least one commercial or trailer showing slow motion shattered glass. And if you’re like me you’ve probably obsessed over this effect and let it play in your head on repeat until the wee hours of the morning instead of sleeping. It’s an effect that’s always been on my ‘to-do’ list, but never reached my ‘actually doing’ list until now. Finished Result Download the Starter .blend fileDownload the Finished .blend At a Glance Screenshots from the video: Chapter marks Bored? 2:50 – Part 1: Text and Particles18:07 – Part 2: Lighting19:45 – Part 3: Materials21:33 – Part 4: Compositing I hope you enjoyed this tutorial!

drojdjou/J3D - GitHub Webmasters! 3 Ways to 3D Web | Blend4Web This article explains how to place Blend4Web content on websites. Method #1 (Simplest): Self-Contained HTML File The possibility to export scenes from Blender to a single HTML file is one the most exciting features of Blend4Web. Such a file is an all-sufficient web page that can be opened with any standard browser and shared through any means (via email, USB drive/memory card, cloud storage, etc). You can, of course, share it online too. The main advantage of this method is its simplicity. 1. Of course, you can use HTML files as standalone web pages without any embedding too. Method #2 (More Optimized): Web Player + JSON The second method is an alternative to the first and the result seemingly looks the same: 3D content with control elements is embedded in a web page. Nevertheless, this method of embedding is different: instead of a single HTML file, a combination of the Web Player and a separate JSON file is used. Where do you get the Web Player? Note Then the .json file is loaded: That's it!

Related: