Introduction
Getting StartedAccount & RegistrationDashboardTeam Collaboration
Editor BasicsDesign ModeAnimation & TimelineVideo ElementsMusic & Audio
How to Animate an SVG in the Browser (No Code)How to Make a Logo Reveal AnimationHow to Turn Product Screenshots into a Demo AnimationHow to Export a Transparent PNG (and What to Do When You Need Transparent Video)How to Make an Animated Gradient Background for VideoHow to Import and Animate a 3D Model (GLB/GLTF)Free Local Tools: Clean Up, Background Remover and Film Emulator
KinoViz AI Assistant3D SystemMaterials & Visual EffectsPhysics & EffectsComponents
KinoVizKinoViz
Advanced

3D System

How KinoViz's browser-based 3D system works — importing GLB/GLTF models, camera and materials, lighting and HDRI, SVG-to-3D extrusion, and 3D animation.

Overview

KinoViz includes a full 3D scene system that runs entirely in the browser using WebGL. You can import GLB/GLTF models, control materials, adjust lighting, and animate the camera — all without leaving the editor.

The 3D editor is available on all plans including Free. Some advanced features require Pro:

FeatureRequired plan
3D editor (basic GLB/GLTF import, camera, materials)All plans
SVG → 3D extrusionPro+
3D animation & camera motion keyframesPro+
Premium 3D asset libraryPro+
Advanced materials (metallic/clearcoat/transmission presets)Pro+
Advanced environments (custom HDRI, ground plane)Pro+
Advanced effects (Liquid Metal shader, GLSL layer)Pro+

Importing GLB / GLTF Models

From the Toolbar

  1. Click Add → 3D Model in the left toolbar.
  2. In the dialog, click Upload GLB and select a .glb or .gltf file from your computer.
  3. The model is uploaded to your project and placed on the canvas.

From the Asset Library

The built-in Asset Library includes a curated collection of GLB models. Click Add → 3D Model → Browse Library to search and import a model directly. The premium 3D library requires Pro+.

File Size Limits

File size limits follow the per-import limit for your plan:

PlanMax import file size
Free10 MB
Pro100 MB
Studio1 GB

3D Canvas and Viewport

When a 3D model is selected, the canvas switches to a 3D viewport with its own controls separate from the 2D canvas.

Viewport Controls

ActionControl
Orbit (rotate view)Left-click drag
PanRight-click drag or Shift + left-click drag
ZoomScroll wheel
Reset viewPress F (focus on model)
Reset to default cameraClick Reset Camera in properties

These controls move the camera only — they do not move the model itself.

Camera Properties

Camera settings are in Properties → Camera. All camera properties are keyframeable (Pro+).

PropertyRangeDescription
cameraDistance1 – 20Distance from the camera to the model
cameraOrbitX–90° to 90°Vertical orbit angle
cameraOrbitY–360° to 360° (multi-revolution)Horizontal orbit angle
cameraZoom0.5 – 3Zoom multiplier
cameraFocalLength24 – 200 mmLens focal length (lower = wider angle)

Camera Presets

Use the View dropdown in the 3D toolbar to quickly switch to preset camera angles:

  • Front, Back, Left, Right, Top, Bottom, Isometric

Materials and Textures

Select a 3D model and open the Materials section in the right properties panel.

Material Properties

PropertyRange / Description
Base colorFlat color or texture map (albedo)
Metalness0 = dielectric, 1 = fully metallic
Roughness0 = mirror-smooth, 1 = fully matte
Clearcoat0 – 1, lacquer/varnish layer (Pro+)
TransmissionGlass/refraction (Pro+)
envMapIntensity0 – 5, environment reflection strength
Normal mapSurface detail texture
Emissive colorSelf-illumination
OpacityOverall transparency

Advanced material presets (metallic, clearcoat, transmission) require Pro+.

Per-Mesh Materials

GLB models may contain multiple materials (one per mesh). Select individual meshes from the Mesh dropdown in the Materials section to edit each material independently.

Uploading Textures

Click the texture slot (e.g., Base Color → Upload) and select a PNG or JPG file. Supported maps: albedo, normal, roughness, metallic.

Lighting and Environments

Every 3D scene includes a default light setup. Customize it from Properties → Lighting.

Light Types

TypeDescription
AmbientFlat fill light, no shadows, no direction
DirectionalParallel rays (like the sun)
PointRadiates from a single point in all directions
SpotCone-shaped beam

Environment (HDRI)

Select an Environment from the dropdown to use an HDRI image as a 360° light source and background. KinoViz includes built-in HDRI presets. Custom HDRI upload and ground plane controls require Pro+.

SVG to 3D Extrusion

KinoViz can extrude any SVG path or shape into a 3D object. Requires Pro+.

  1. Select a shape, path, or text element in Design Mode.
  2. Right-click → Extrude to 3D.
  3. In the properties panel, set Extrusion depth (in scene units).
  4. Adjust the Bevel settings for chamfered edges.

The extruded 3D object supports all standard material and lighting controls.

3D Model Animation

3D models can be animated in the timeline. Camera motion and 3D animation keyframes require Pro+.

Animatable Camera Properties

See the Camera Properties table above — all camera properties can be keyframed to animate the camera over time.

Built-in Model Animations (GLTF)

If your GLB file contains embedded animations (exported from Blender or similar tools), they appear in the Animation Clips dropdown in the properties panel. Select a clip and use the Play/Pause/Stop controls to preview it, or keyframe the playback state for timeline control.

Liquid Metal and GLSL Effects

The Liquid Metal material FX preset applies a real-time shader to a 3D model. It is part of the Advanced Effects feature gate and requires Pro+.

The GLSL Effect element type (a shader container) also requires Pro+ for advanced presets.

Performance Tips

  • Keep polygon counts under 200k for smooth preview performance. Higher polygon counts are supported but may reduce viewport frame rate.
  • Use compressed textures (JPG for diffuse, PNG only when transparency is needed).
  • Limit the scene to a few lights for real-time performance.
  • Use Orthographic camera for flat, isometric-style renders.

Next Steps

  • Design Mode — Work with 2D elements alongside 3D
  • Animation & Timeline — Keyframe 3D model properties
  • Asset Library — Browse 3D models
  • Export & Publishing — Render your 3D animation

KinoViz AI Assistant

Design complete motion graphics by chatting with KinoViz AI — generate scenes, edit elements, add animations, recreate reference images, and keep everything fully editable.

Materials & Visual Effects

A guide to KinoViz materials and visual effects — Liquid Glass, Reeded Glass and Frosted Glass, Liquid Metal for 3D, Glow and Bloom, image and video filters with tone presets, ASCII art, Gooey Group and Cell Group, and blend modes.

On this page

Overview
Importing GLB / GLTF Models
From the Toolbar
From the Asset Library
File Size Limits
3D Canvas and Viewport
Viewport Controls
Camera Properties
Camera Presets
Materials and Textures
Material Properties
Per-Mesh Materials
Uploading Textures
Lighting and Environments
Light Types
Environment (HDRI)
SVG to 3D Extrusion
3D Model Animation
Animatable Camera Properties
Built-in Model Animations (GLTF)
Liquid Metal and GLSL Effects
Performance Tips
Next Steps