imagination XD

realizing dream


2 Comments

Take 360 Photo and Upload to Facebook with Unity

It’s actually not new thing, but since many people ask me how to do it, then yeah I decided to make some writing about this.

1-nakane-eri-almost-done-for-the-environment-finally-can-get-back-google-chrome_2016-11-03_01-02-22-336-png-picasa-photo-viewer

What you need :

So here’s how you do it

  1. Download the 360 Panorama Capture asset and import it to Unity
  2. vrunity_1
  3. Select your main camera or camera to be rendered, and put Capture Panorama. Leave the settings default.
  4. REMEMBER to set the IMAGE FORMAT to JPEG. If you use PNG, you’ll have to convert that again to JPG.
  5. Press play if you see it’s good enough.
  6. In play mode, press [P] to capture the panorama, the screen would fade to black, don’t do anything while screen is black.
  7. Then you’d hear a sound effect and screen fade off. That’s mean the rendering is done.
  8. vrunity_2
  9. Now go to your root folder, folder where Unity put stuff like Assets, Library and stuff.
  10. Now bring those file to where you put the exiftool.exe
  11. vrunity_3
  12. You might need to rename your exiftool to just exiftool.exe
  13. Then press Shift + Right Click on the explorer and choose Open command window here.
  14. vrunity_4
  15. Copy this code to command window
  16. exiftool -ProjectionType=”equirectangular” photo.jpg
  17. That photo.jpg is your 360 photo file name.
  18. Then press [Enter]
  19. And yeah ! You will get the JPG once it done, now it’s ready to upload to Facebook as 360 photo !

Also, I have uploaded few assets on my Asset Store, be sure to check it out.

imgvertex-asset-store-google-chrome


1 Comment

[Unity] Realtime Lipsync


Back on my manual lipsync using Tagarela. This one is faster to do and also easier, but of course, you’ll get only Anime lipsync (Anime lipsync only have 1 open mouth, there’s no O, U, I or any other mouth shape than A).

The method I’m using is just get Audio Source frequency. So basically it’s like music visualisation but for mouth.

What you need

  • Head mesh with 1 mouth blendshape
  • Voice
  • Audio Source

Here’s the script you should attach to head mesh.

using UnityEngine;
using System.Collections;

public class RealtimeLipsync : MonoBehaviour {

//LIPSYNC CORE
 [Header("Lipsync")]
 public AudioSource audioSource;
 public int mouthBlendShape;
 private float[] _samples = new float[64];
 private float clampedLipsync = 0f;

//PRIVATES
 private SkinnedMeshRenderer blendMesh;

void Awake(){
 blendMesh = GetComponent<SkinnedMeshRenderer>();
 }

void LateUpdate(){
 if(audioSource) DoLipsync();
 }

void DoLipsync(){
 if(audioSource.isPlaying){
 audioSource.GetSpectrumData(_samples,0,FFTWindow.BlackmanHarris);

clampedLipsync = Mathf.Clamp(_samples[2]*3000,0,100);

blendMesh.SetBlendShapeWeight(mouthBlendShape,clampedLipsync);
 }
 }
}

And here’s how to do it

  1. Attach this script to your head mesh.
  2. Also don’t forget to add audio source and assign audio source in this script. You can put Audio Source in whereever you want, but remember to assign audio source variable on this script.
  3. To play sound, use like audioSource.clip = <your clip name>; then audioSource.Play();
  4. Assembly-CSharp - VertexScriptCOREPlayerCORE.cs - MonoDevelop-Unity
  5. Here’s my example to use this. I put it on my player script. It’ll automatically works whenever you have audioSrc.clip = clipName; audioSrc.Play();
  6. That’s it, your mouth will move whenever the audio src playing sounds.

 


Leave a comment

[3D] Upload Fake Cel Shade Outline on Sketchfab

Again, this is not related to game dev, but it might be useful for who want to upload cel shade on sketchfab. I’ll be using Cinema 4D, and I think it’ll compatible with all 3D Software out there. Let’s jump to the point:

  1. Get your models sketchfab ready, make sure that you don’t have any bones / skin. You can just bake the skin. Then Combine / Merge all of your model into one mesh.sketchfabx0
  2. Now make a new black material, just ignore that Display tag I add, but adding display tag would make it easier to see. In Cinema 4D, right click your outline model and choose Cinema 4D Tags > Display then turn on Backface Culling.sketchfabx1
  3. Go to Polygon / face mode, and select all, and then extrude it a little.
    sketchfabx2
  4. This is not really necessary, but this could lighten up your model. After extruding, reverse selection your polygon selection and then delete it. In Cinema 4D, press U+I
    sketchfabx3
  5. Now select all again and then reverse normal, in Cinema 4D, press U+R
    sketchfabx4
  6. Now you finally get fake cel outline, let’s export to FBX and upload to sketchfab.
    sketchfabx5
  7. Choose black outline material that you created and set Face Rendering to Single Sided. And you just need to setup your model. If you want to get Cel shade, then use Emitter on all your model without any diffuse or something.
    sketchfabx6
  8. Take a look at my fake cel outline

https://sketchfab.com/models/31ea843181114fda84d8895b7610e936/embed

Akemi Homura
by IMGVERTEX
on Sketchfab


2 Comments

[Tutorial] IES Light on Unity

Without IES Light

Without IES Light

IES Light on Unity

IES Light on Unity

Back then, I thought IES light was useless, but when I’m making an interior scene for my Animation I notice a weirdness on ceiling lights. It was circle!!! There’s no circle shaped ceiling lights (except lightbulb)!

You’ll gonna need

    • IESviewer 2.9
    • Prtscr (Optional, if you don’t want to use MSPaint)
    • And IES / LDT light of course!

And this is how

  1. iesUnity2
  2. Go to IES Viewer and right click on your IES or LDR light and then click Render, or simply just press CTRL+R. Sometimes, the Render window just wont show, just delete .ini file and reopen IESViewer.
  3. iesUnity3
  4. Adjust brightness, Zoom, and Distance until you pleased with the result then press Prt Scn / Print Screen on your keyboard. If you don’t have PrtScr, then you’ll need to open MSPaint (Press Winkey + R and type MSPaint). If you have PrtScr, hold CTRL and left click the render window and it’ll automatically crop it.
  5. iesUnity4
  6. Paste (CTRL+V) on MSPaint and then crop the pasted clipboard like this. Save it as JPG or PNG.
  7. IESsssThis is my IES Light
  8. IESUnity5Now go to Unity and import your IES light. Set texture type as Cookie, Light type as Point, Mapping : Mirrored Ball, Glossy Reflection, Fixup Edge Seams, Alpha from Grayscale (IMPORTANT!), and filter mode to Trilinear.
  9. IESUnity6Go to Game Object > Light > Point Light, and assign your IES file to Cookie texture.
  10. IESUnity7
  11. Now look! IES Light on Unity! Although it’s not important, but it’ll make scene looks more realistic than a nonsense circle light.


1 Comment

[Unity] Taking In-Game Screenshot

Hello, everyone, Sorry I didn’t post something here in long time. I’m very busy, leveling up my CG skills. I also post some random unity things.

So, basically, taking screenshot in Unity is very easy. Copy this script below, and attach it in Main Camera

var folderName : String = "DCIM";
var captureSound : AudioClip;
var quality : float; //Set screenshot resolutions, default is 1. 1 equals your monitor size.
private var screenshotFader : GameObject;

function LateUpdate(){
 if(screenshotFader){ //Flashing effect
 screenshotFader.guiTexture.color.a -= Time.deltaTime;
 if(screenshotFader.guiTexture.color.a < 0){
 Destroy(screenshotFader);
 screenshotFader = null;
 }
 }
 
 if(Input.GetKeyDown("C") && !screenshotFader){
 if (!System.IO.Directory.Exists(folderName)) System.IO.Directory.CreateDirectory(folderName);
 
 screenshotFilename = folderName+"/DSC_"+System.DateTime.Now.Day.ToString()+"_"+System.DateTime.Now.Hour.ToString()+System.DateTime.Now.Minute.ToString()+System.DateTime.Now.Second.ToString()+".png";
 if(!System.IO.File.Exists(screenshotFilename)){
 Application.CaptureScreenshot(screenshotFilename,quality);
 AudioSource.PlayClipAtPoint(captureSound,transform.position);
 DrawWhiteItem();
 }
 }
}

function DrawWhiteItem(){
 yield new WaitForSeconds(0.5); //wait for a few frames so the application can capture before the white flash comes out.
 screenshotFader = DrawFader();
}

static function DrawFader() : GameObject{
 var fdt = new Texture2D(1,1);
 fdt.SetPixel(0,0,Color.white);
 fdt.Apply();
 
 var fadex = new GameObject("CSader");
 fadex.AddComponent(GUITexture);
 fadex.transform.position = Vector3(.5,.5,1000);
 fadex.guiTexture.texture = fdt;
 
 return fadex;
}

now it’ll save the screenshot on your game root folder / DCIM (you can change the folder name).


2 Comments

[Tutorial] Realtime Render Animation With Unity3D

Seiten Taisei's MV Intro | ‎Wednesday, ‎February ‎27, ‎2013, ‏‎6:26:49 PM

Seiten Taisei’s MV Intro | ‎Wednesday, ‎February ‎27, ‎2013, ‏‎6:26:49 PM

That’s my first ever Realtime Render Animation. Back then I used FRAPS to record the animation in Unity, but now, I use better Sequenced PNG renderer. I found this script on Unity3D Wiki named ScreenshotMovie. But in this tutorial, let’s just use my version of ScreenshotMovie (It’s running on background, so you can play psxfin while Unity rendering). It works both on Indie and Pro. But Indie wont get an epic effect. If you use Indie but you want to get an epic effect, use After Effect.

You’ll need this

  • Unity3D
  • VirtualDub
  • Xvid Codec (Optional)
  • A knowledge on Animation (At least Level 3(You’ll need to know what is Flat, Spline, Constant, Keying, Free Smooth and something like that))
  • And Not TLDR Personality (Too long, didn’t read. :D)

Create a new Javascript, named it whatever you wanted, then attach this on MainCamera, and then REMEMBER to disable it (So you wont got lag when previewing the animation).

var folder = "ScreenshotFolder";
var frameRate = 25;

private var realFolder = "";

function Start () {
	Screen.showCursor = false;
	Application.runInBackground = true;

    // Set the playback framerate!
    // (real time doesn't influence time anymore)
    Time.captureFramerate = frameRate;

    // Find a folder that doesn't exist yet by appending numbers!
    realFolder = folder;
    count = 1;
    while (System.IO.Directory.Exists(realFolder)) {
        realFolder = folder + count;
        count++;
    }
    // Create the folder
    System.IO.Directory.CreateDirectory(realFolder);
}

function Update () {
    // name is "realFolder/0005 shot.png"
    var name = String.Format("{0}/{1:D04}.png", realFolder, Time.frameCount );

    // Capture the screenshot
    Application.CaptureScreenshot (name); // Use Application.CaptureScreenshot(name,2) if you want 1080HD
}

function OnDisable(){ enabled = true; }
  1. RT-1You have to animate the scene first, create a new Game Object, then child all objects that you want to animate. Character and NPC also able to animate using this (with NavMeshAgent), but it’s kinda very difficult. I created a special script to animate the movement of the AI using NavMeshAgent and Animator. In this tutorial, I’ll only teach you how to make a simple realtime camera animation.
  2. RT-2Select ‘Actor’ GameObject then click Record on Animation Tab (Press CTRL+6 if you don’t have an Animation Tab).
  3. RT-3You can animate everything you want (turning off gameObject, turning off a certain script, adjusting script value, everything). To animate the Camera, just change any value that you wanted. The animator will automatically key it.
  4. So, if you are saying that you want change camera, you just simply key the first position, then select camera key > Right Click  > Right Tangent > Constant, and then go for 1 frame , and then change the camera position again > Select The camera key > Right Click > Left Tangent > Constant. Repeat this step everytime you wanted to change camera position.
  5. Camera moves crazily ? Check your Position or Rotation Curves, or just set Select The Camera Key > Right Click > Flat.
  6. NOTE : Your animation clip will automatically Loop, to disable this, go to the folder where you save this animation clip and then uncheck Loop.
  7. RT-4After you finish with animating, Click Record Button to stop recording, and then Add that script to Main Camera. You need to adjust the Folder name (It’ll save to your Unity Project’s folder), and the frame rate (I usually use 24). Press Play and LET IT RENDER!
  8. RT-5The renderer will running in background, so you can do anything while Unity Render this (I play psxfin while rendering, haha yeah). Go back and check your Unity, if you believe your animation already finished render, press play again (that button above).
  9. RT-6Check your Unity Project folder, you’ll found a folder that you’ve named on Unity. That’s a large amount of PNG Sequences!
  10. RT-7Go launch VirtualDub, click File > Open Video File
  11. RT-8Open your Unity Project Folder, and then Select the First Image (Usually it’s 0002.png), then Open.
  12. RT-9Now let’s adjust the frame rate, so it wont look very lag (Default frame rate was 10)
  13. RT-10Remember to change the Frame Rate as the rate that you set in Unity (I set 24FPS)
  14. RT-11This is an optional step. You don’t want a huge video file, do you ? Skipping this step will give you 2GB Video for 40 seconds. So you’ll need to compress it using Xvid.
  15. RT-12Alright this is the final step. Click File > Save as AVI. “Hey! Wait! What about the resolution?” Ahaha, yeah. I’m sorry, I was forgot about that. The Resolution will be same as how large you render it on Unity. I use 16:9 Aspect on Unity while rendering. If you are using Free Aspect, you’ll gonna have a large letter box. “My monitor just 1360px, can I render 1920?” Sure you can! Just read back my script comment. Also, you’ll gotta be very patient when rendering 1080.

That’s just a simple camera animation. I’m tired writing very long text with slow internet, so I’ll post about Full Character Animation later. But here, I’ll give you an example of using Full Character Animation.

I don't have Motion Capture, So I have to animate non Walking motion.

I don’t have Motion Capture, So I have to animate non Walking motion.

Here's a sample to play sound. All animation event controlled by ANIMATOR CORE.

Here’s a sample to play sound. All animation event controlled by ANIMATOR CORE.

This is how my Camera Position looks like

This is how my Camera Position looks like

Also make a new Scene everytime you want to shot other location. It makes animating easier, and faster. Since NavMeshAgent only can do walk motion, you’ll need to duplicate the character (1 NavMeshAgent, and 1 just animator). I also made new Animator Controller on the character. I’ll explain what are those (Animator Core)

  • Actors[] : All walkable actors in this scene.
  • ActorsHead[] : All actors that have facial animation.
  • ActorAnimatorValue[] : Unused. Should be set like “Speed”, or “Direction”
  • ActorAnimatorValue[] : Unused. Should be like 1.0, or 0.2
  • NPCDestination[] : an empty game object tells NavMeshAgent where to go.
  • SoundBank[] : All AudioSource that available on this scene.

And this is the final product.


3 Comments

[Research] Unity Underwater Caustic Effect

I can't see the caustic effect clearly. That's why this is still just a research.

I can’t see the caustic effect clearly. That’s why this is still just a research.

Hello everybody, yeah I’m a bit late. I was promised that I’ll give Underwater Caustic Effect on this thread. So yeah, it was simple enough to create this Caustic Effect. It only use Directional Light’s cookie or Projector. For the water, I use Reflective>Bumped Specular. You can create double-sided by adding ” Cull Off ” on Reflective>Bumped Specular shader, but if you are lazy to add it, you can duplicate the water mesh and mirror it (Original(Quad) : 90,0,0, doubleSided : -90,0,0).

1. Go make a new JavaScript and then attach it to your water mesh. Your player also need to be tagged as “Player”. You’ll need this

#pragma strict

var scrollSpeed = 0.25;
var waterCausticSpeed = 2;
var isWater = true; // Just set it true.

var cubeMap : Cubemap;
var causticTextures : Texture;
var causticSize = 10.0;

private var entered = false;
private var awakeFogCol : Color;
private var awakeFogDense : float;
private var defSky : Material;
private var lungColor = Color.green;
private var causticator : GameObject;

function Awake () {
    if(isWater){ 

        awakeFogCol = RenderSettings.fogColor;
        awakeFogDense = RenderSettings.fogDensity;
        defSky = RenderSettings.skybox;

        renderer.material.SetTexture("_Cube",cubeMap);

    }
}

function FixedUpdate(){
    var offset = Time.time * scrollSpeed;
    renderer.material.mainTextureOffset = Vector2(0,-offset);
    renderer.material.SetTextureOffset("_BumpMap", Vector2(0,-offset));

    if(isWater && entered){
        /*lungCapacity -= 0.5;
        if(lungCapacity < 125) lungColor = Color.yellow;
        if(lungCapacity < 50) lungColor = Color.red;
        if(lungCapacity <= 0)player.ApplyDamage(1);*/

        if(causticator){
            causticator.transform.Rotate(Vector3(0,waterCausticSpeed*Time.deltaTime,0),Space.World);
        }
    }
}

function OnTriggerEnter(col : Collider){    
    if(col.gameObject.tag == "Player" && isWater){
        entered = true;
        RenderSettings.fogColor = Color(0,0.4,0.7,0.6);
        RenderSettings.fogDensity = 0.1;

        CreateCaustic();
    }
}    

function OnTriggerExit(col : Collider){
    if(col.gameObject.tag == "Player" && isWater){
        entered = false;
        RenderSettings.fogColor = awakeFogCol;
        RenderSettings.fogDensity = awakeFogDense;

        Destroy(causticator);
    }
}

function CreateCaustic(){
    causticator = new GameObject("Causticator");
    causticator.AddComponent(Light);
    causticator.light.type = LightType.Directional;
    causticator.light.intensity = 0.5;
    causticator.light.color = Color(0.5,0.5,0.5);
    causticator.light.cookie = causticTextures;
    causticator.light.cookieSize = causticSize;
    causticator.transform.rotation.eulerAngles = Vector3(90,0,0);
}

2. After that, You’ll need Loopable Caustic Texture, you can find it on Google.

3. And then import that texture to Unity, remember to enable Alpha from Grayscale.

4. Also, remember to add Triggered BoxCollider on water mesh. Make sure that Box Collider Size covered all ground, but you also need to adjust the center of Y Axis because You don’t want an obvious transition, do you ?

As you can see, the Box Collider was offset-ed from water mesh. So it'll give you a nice transition.

As you can see, the Box Collider was offset-ed from water mesh. So it’ll give you a nice transition.

5. Finally, you just have to adjust all those thing until you fully satisfied.

6. So, you want to use Projection Method ? Well… Create empty Game Object, Add Projector to it, set it to Orthographic projection, set the rotation to 90,0,0. After that adjust the size until you happy. But you’ll need a Light Projection Shader (You can obtain it on Assets > Import Package > Projector). Create new material with Light Projection Shader, insert Caustic Texture to Cookie and Falloff Texture to Falloff. Use the script to rotate it.

So what’s the best ? What should i choose ?
Here’s the comparison between Directional Light Method and Projector Method

Directional Light

  • Quick, fast, and easy to use.
  • All area included.
  • Sometimes causes Obvious Transition.
  • My eyes! Too bright! The intensity must be high, if low, you wouldn’t be able to see the caustic.

Projector

  • OK transition (No screen brightening)
  • You don’t need to adjust the intensity, you’ll always be able to see the caustic.
  • Difficult, Requires High patience, and High Accuracy.
  • You have to adjust the projection area.