DEV Community: Manoj Ponugoti

Fidisys-Task-2(Manoj)

Manoj Ponugoti — Thu, 17 Dec 2020 20:18:32 +0000

Blender is a popular program because it’s free but also robust, making its 3D modeling tools accessible to anyone who wants to learn.

The key steps to create 3d model are:
1) Conceptualizing and creating the storyboard.
2) Making the 3d models.
3) Texturing, rigging and animation.
4) Lighting and setting up the cameras.
5) Rendering.
6)Compositing and applying special effects.

Part A: Preparing Your Drawing

                     FRONT

STEP 1
Start with a 2D drawing of your character before you open Blender or use Blender’s Grease Pencil tool to draw your initial sketch right in the program. It doesn’t have to be elaborate, but it does need outlines for its major features like the head, body, and facial features that protrude, like the nose. Make sure you have at least a front view and a side view.

STEP 2
Use the Toggle Quad View option to split the screen into four parts and center the cube so that its sides, top, and bottom are where you want your character model to sit in the X-, Y-, and Z-planes.

STEP 3
After that, load your 2D drawing file into Blender and use it to set each background picture of the cube as one of your character outlines. It’s just like attaching a file to an email or uploading a file on an online job application website. The drawing will pop onto the 3D planes, and you can now set it on the 3D axes so that it rests on the planes like it would in real life.

                    Part B: Inserting Simple Shapes

STEP 1
Go into edit mode, and extrude the cube to make a basic shape that fits your background image. This lets you segment your character’s parts to refine individually, which is especially helpful when you get to details that are tucked into other areas, like teeth inside a mouth. You can segment these into new layers to blow up the details, work with them, and then layer them back under their original area.

STEP 2
If you don’t want to deal with that level of segmentation, you can always treat those types of features as part of larger areas like the head. Just remember that you won’t be able to go into as much detail as you would if they were treated as their own segments.

STEP 3
Once you’ve segmented the background picture of your character as you like, sub-divide the cubes into shapes until they best fit the outline of your drawing. Use the quad view to see how this creates a mesh in the shape of your character outline and set each background picture as one of your character outlines. (This is where it’s handy to use the mirror modifier. It fills the opposite view symmetrically at the same time, so you do half the work.)

This is the base of your 3D character model in Blender 2.8, with which you can deviate as much as you want from your drawing or original plan. Once you reach a certain level of comfort with character modeling in Blender 2.8, you’ll be able to skip right to this step without needing outside guidance on build and proportion to get you started.

                Part C: Using Layers

STEP 1
Copy the layer of the specific area you want to cover, such as the legs and waist for pants, skirts, or boots, using the UV sphere tool. This lets you wrap a 2D image around a 3D model. So, for instance, to make a layer where the legs of a 3D character are a different color to represent pants, using the UV sphere tool will wrap that color around the leg area you want, which you can adjust separately from the actual leg layer underneath it.

STEP 2
Then, using the same line adjustment tool you used to outline your original shape, tweak the new layer’s shape into whatever you want the covering to look like.

STEP 3
Save the new layers on top of the body layers, and voila! Your character model now has a costume that fits perfectly with no extra effort or knowledge needed on your part.

                     Part D: Texturing Your Model

STEP 1
To make your 3D character model all one smooth color within Blender 2.8, add a subsurf modifier in the modifiers heading. You can custom-smooth beyond the initial result using the smooth shading option in the edit panel of the tool shelf.

STEP 2
If you want to add a more complex texture to your 3D character model, you’ll first have to unwrap it so that the 3D surface becomes one flat shape. Do this by selecting the edges you want to be seamed, press control + E, and then mark the seam. Finally, select the whole mesh, and press “unwrap” to get the full shape you want to texture.

STEP 3
An easy way to add the texture is to use the texture paint tool. Set up the shading type texture, add a new paint slot in the tool shelf, and then add a new texture in the texture panel. This can be any pattern (or solid color) you choose as the texture for your character model. Choose a brush, paint your texture, and save it.

STEP 4
Finally, add a material to your object by going to the material heading and adding a new material. Then, go to the texture heading to choose your new texture and set the viewpoint shading to texture. This will make the texture show up on your model.

       Part E: Rigging Your Model for Animation (Bonus)

STEP 1
To begin, create a skeleton of your model by adding bones through the armature tool and extruding them in edit mode. You’ll have to connect the skeleton piece-by-piece, but don’t worry, you don’t have to replicate the actual bone structure of your model. Just do enough to prop up its body. Plus, you can mirror limbs for both symmetry and better sync, just like with the body outline itself.

STEP 2
Next, bring together your mesh and rigging in object mode. Select your model, then your skeleton, and press control + P, choosing automatic weights. This command lets Blender automatically calculate how your 3D model sits on the rigging you’ve built for it.

STEP 3

If you want to animate your 3D model, a simple way to do so is in “pose” mode. For each frame of animation, move parts of your model to create the appropriate pose and keyframe it. Do this as many times as it takes to create the full movement you want.

              Part F: Rendering Your Character

Go to the Render menu in the Main Info menu at the top of the screen.
Select “Render Image” if you’re completing a static character model and “Render Animation” if you’re creating a moving one.
The rendering will come up in a separate window, which will show the rendering process and final product.
To save, go to the Image menu in the Render window, and select a save option (save as, save a copy, etc.). Name your file, make sure it’s saving to the place you want, and there you go – your character model is complete!

Now by going through above tips now i hope you will get an idea about the things what we are dealing with.
for more check the link below.

Netlify:
fidisys-task-2.netlify.app

By
MANOJ PONUGOTI

Dice Project using Threejs & Blender

Manoj Ponugoti — Mon, 07 Dec 2020 18:15:07 +0000

Resources to start learning
I started learning by checking out documentation, blog posts, video tutorials etc. There are many resources out there, so I'll just write the ones that worked really well for me and you might want to check them out (with the disclaimer that they might not work as well for you):

I really enjoyed going through the Getting started section of ThreeJS.
If you're more into video tutorials, then CJGammon has an Introductory series on youtube.
For explanations on 3D concepts, I mostly go to the Real-Time Rendering book.
I wanted to understand how shaders work and write my first shader (be it a dead easy one). It's quite hard to find resources on this topic for beginners... However, I really liked:
Surma's Supercharged episode about WebGL shaders for image processing

The repo with resources is public on Github.

When actually starting the project, the best resources turned out to be the ThreeJS official documentation and their example apps.

Before starting please visit the Threejs official one and make sure that installation gets done.

you need to clear about the things which I marked below before starting.

A by copy and pasting the sample code given on the webpage you will se some cube like structure which is animated and you can control it by your own tip of fingers as u see below...

<!DOCTYPE html>

My first three.js app
<br> body { margin: 0; }<br>

<br> const scene = new THREE.Scene();<br> const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );</p> <div class="highlight"><pre class="highlight plaintext"><code> const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; const animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </code></pre></div> <p></html></p> <div class="highlight"><pre class="highlight plaintext"><code> CREATING THE SCENE </code></pre></div> <p>To actually be able to display anything with three.js, we need three things: scene, camera, and renderer, so that we can render the scene with the camera.</p> <p>And when I started doing this dice project my aim is to create the animated dice with a piece of code and I started creating by using my own code...</p> <p><!DOCTYPE html><br> <html><br> <head><br> <meta charset="utf-8"><br> <title>3d project1</title><br> <style><br> body {margin:0;}<br> canvas{width:100%; height:100%;}<br> h1{text-align:center;<br> color:Red;}<br> </style><br> <script src="js/three.js">

</head>
<body>
    <header>
        <h1>Dice Project(Responisve with controls)</h1>
    </header>
     <script type="text/javascript">
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //to make responsive//
        window.addEventListener('resize', function() 
        {
            var width = window.innerWidth;
            var height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        } )
        //controls//
        controls = new THREE.OrbitControls(camera, renderer.domElement);


        //shape//

        const geometry = new THREE.BoxGeometry(5, 5, 5);
        const material = new THREE.MeshBasicMaterial( { color: 0xCCCCFF , wireframe:false } );
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 15;

        const geometry2 = new THREE.BoxGeometry(5, 5, 5);
        const material2= new THREE.MeshNormalMaterial( { color: 0xCCCCFF , wireframe:false } );
        const cube2 = new THREE.Mesh(geometry2, material2);
        scene.add(cube2);
        cube2.position.x =14;

        const geometry3 = new THREE.BoxGeometry(5, 5, 5);
        const material3= new THREE.MeshNormalMaterial( { color: 0xCCCCFF , wireframe:false } );
        const cube3 = new THREE.Mesh(geometry3, material3);
        scene.add(cube3);
        cube3.position.x=-14;





        //animation//

        var update = function(){
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.005;

            cube2.rotation.x += 0.01;
            cube2.rotation.y += 0.005;

            cube3.rotation.x += 0.01;
            cube3.rotation.y += 0.005;

        };

        //draw scene//

        var render = function(){
            renderer.render(scene, camera);
        };

        var GameLoop = function(){
        requestAnimationFrame(GameLoop);

        update();
        render();
    }

    GameLoop();



    </script>
</body>

After this output, I realized that things will not get completed with only the code and I started working on the Threejs Editor or Blender.

Blender: Blender is popular software which is used to create 3d structures according to our requirement.

And after started using blender now here I am...

And finally, you can see my Rendered 3d basic model on my screen

link: https://mpportfolio.000webhostapp.com/semifinal/real.html

source code:

<!DOCTYPE html>

<model-viewer> example

<link rel="stylesheet" href="demo-styles.css">

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->

<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->

<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/focus-visible@5.0.2/dist/focus-visible.js" defer></script>

ios-src="https://cdn.glitch.com/3354cc1b-c76f-4b36-bd7e-d0ea7fd2f98e%2Funtitled.usdc?v=1607617855695"
poster="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b%2Fposter-astronaut.png?v=1599079951717"
alt="A 3D model of an astronaut"
shadow-intensity="1"
camera-controls
auto-rotate ar>

Dice Project(Responsive)

Manoj Ponugoti

</section>

To get the files:
https://github.com/sgost/Dice-project/tree/Threejs

To support in the modern browser make sure the file format must be in (gltf)...