[ Prev | Index | Next ]
Japanese English
Now Loading...
Download
Please download on PC (not smartphone) and extract the ZIP file. Then double-click VCSSL.bat (batch file) to execute for Microsoft® Windows®, or execute VCSSL.jar (JAR file) on the command line for Linux® and other OSes.
For details, see How to Use.
You are free to use and modify this program and material, even for educational or commercial use. » Details

Vertex Array-Based Model Deformation Animation

This program is a VCSSL sample that animates the deformation of a model using a vertex array.

It is an advanced version of the following program:

- Table of Contents -

Sponsored Link


How to Use

Download and Extract

At first, click the "Download" button at the above of the title of this page by your PC (not smartphone). A ZIP file will be downloaded.

If you are using Windows, right-click the ZIP file and choose "Properties" from the menu, and enable "Unblock" checkbox at the right-bottom (in the line of "Security") of the properties-window. Otherwise, when you extract the ZIP file or when you execute the software, security warning messages may pop up and the extraction/execution may fail.

Then, please extract the ZIP file. On general environment (Windows®, major Linux distributions, etc.), you can extract the ZIP file by selecting "Extract All" and so on from right-clicking menu.

» If the extraction of the downloaded ZIP file is stopped with security warning messages...

Execute this Program

Next, open the extracted folder and execute this VCSSL program.

For Windows

Double-click the following batch file to execute:

VCSSL__Double_Click_This_to_Execute.bat

For Linux, etc.

Execute "VCSSL.jar" on the command-line terminal as follows:

cd <extracted_folder>
java -jar VCSSL.jar

» If the error message about non-availability of "java" command is output...

Operations After Launch

When the program starts, a display window opens and a 3D surface begins to animate.

You can control the view with the following mouse operations:

  • Left drag: Rotate the viewpoint
  • Right drag: Move the viewpoint
  • Mouse wheel scroll: Zoom in/out

Topic Overview

Modifying the Shape of a Model After Creation

This program builds on the one linked below. Since some of the explanations from that program are omitted here, please refer to it as needed:

In that previous program, we created and mounted a model from a vertex array. For static shapes, that's sufficient. However, in many cases you may want to modify the model's shape afterward.

In such cases, you can update the shape by assigning a new vertex array to the model. For example, in an animation, if you gradually update the vertex array at each frame and reassign it to the model, you can continuously deform its shape.

About the Vertex Array Format

The vertex array used for deformation must be in the same format as the one used to originally create the model.

In this program, we are using a model created with the Quadrangle Grid Mesh (QUADRANGLE_GRID) format, so we also use vertex arrays in the same format for deformation.

The Quadrangle Grid Mesh format represents a grid of quadrangles using a coordinate array indexed in both vertical and horizontal directions. For more details, refer to the earlier program linked above.

Coordinate Array Format in the Quadrangle Grid Mesh
Coordinate Array Format in the Quadrangle Grid Mesh

Black lines represent the edges of the quadrangles, and the blue dots are the grid points.

This kind of surface structure can be described entirely using the coordinates of the grid points. The coordinate array that does this is called the Quadrangle Grid Mesh (QUADRANGLE_GRID) format.

Assuming the grid lies in the X-Y plane (though it can also be in Y-Z or Z-X), the coordinates of each grid point are stored in a 3D float array structured as:

[ Y Grid Index ][ X Grid Index ][ X/Y/Z (0/1/2) ]

The first two indices represent the vertical and horizontal grid point positions (see the diagram), and the third index selects the X, Y, or Z coordinate of that grid point in space. The actual coordinate values are stored in this array.

Code

Full Code

Here is the complete code for this program:

In the following sections, we'll explain each part of the code in detail.

Header Section

At the top of the program, we import the standard libraries for mathematical functions (Math), 3D graphics (Graphics3D), and the 3DCG framework (graphics3d.Graphics3DFramework):

Declaring Global Variables

Next, we declare some global variables:

First, we declare the number of divisions (grid points) in the X and Y directions.

Then we declare the vertex array in a format compatible with the quadrangle grid mesh. We also declare a variable to store the model ID, as well as variables used to control the animation.

Implementing the onStart() Function

Now we implement the onStart() function. This function is automatically called once by the framework when the program starts.

In this function, we create a model using the QUADRANGLE_GRID format from the vertex array, then set its color to blue and mount it on the renderer (graphics engine).

For more detailed explanations of these steps, please refer to the earlier article:

Implementing the onUpdate() Function

Finally, we implement the core of this program: the onUpdate() function. This function is also called automatically by the framework -- but not just once. It is called repeatedly on every screen refresh (typically 30 times per second).

By setting slightly different vertex arrays on each call, we gradually deform the model, creating the illusion of animation -- much like a flipbook.

To reassign a vertex array to a model, we use the setModelVertex(...) function from the Graphics3D library. Here's how it's written in the program:

First, we increment the time variable "time" by a small amount (timeStep).

Next, we update the contents of the vertex array to reflect the coordinates at that time. We use sine functions to create a wave-like shape, and incorporate the time variable into the sine arguments to make the shape move over time.

Finally, we call setModelVertex(...) to reassign the updated vertex array to the model. This is the point where the shape of the model actually changes.

License

This VCSSL/Vnano code (files with the ".vcssl" or ".vnano" extensions) is released under the CC0 license, effectively placing it in the public domain. If any sample code in C, C++, or Java is included in this article, it is also released under the same terms. You are free to use, modify, or repurpose it as you wish.

* The distribution folder also includes the VCSSL runtime environment, so you can run the program immediately after downloading. The license for the runtime is included in the gLicenseh folder.
(In short, it can be used freely for both commercial and non-commercial purposes, but the developers take no responsibility for any consequences arising from its use.) For details on the files and licenses included in the distribution folder, please refer to "ReadMe.txt".

* The Vnano runtime environment is also available as open-source, so you can embed it in other software if needed. For more information, see here.



Sponsored Link



Japanese English
[ Prev | Index | Next ]
Simple Tool for Viewing and Converting Between RGB Values and Color Codes

Display and Convert RGB Values and Color Codes on a GUI Tool
A Simple Tool for Making Specific Colors Transparent (Batch Processing Version)

Batch-Convert a Specific Color to Transparency in All PNG Files in a Folder
A Simple Tool for Making Specific Colors Transparent

Convert a Specific Color to Transparency in PNG Image Files
Simple Tool for Animating Sequential Images

A lightweight tool developed with VCSSL that allows you to play back sequential image files as an animation without converting them into a video file.
Vertex Array-Based Model Deformation Animation

How to Deform 3D Surface Models Using a Grid-Based Vertex Array
Creating a Model from a Vertex Array (Quadrangle Grid Mesh Format)

How to Create 3D Surface Models from a Grid-Based Vertex Array
Index
[ Prev | Index | Next ]
Simple Tool for Viewing and Converting Between RGB Values and Color Codes

Display and Convert RGB Values and Color Codes on a GUI Tool
A Simple Tool for Making Specific Colors Transparent (Batch Processing Version)

Batch-Convert a Specific Color to Transparency in All PNG Files in a Folder
A Simple Tool for Making Specific Colors Transparent

Convert a Specific Color to Transparency in PNG Image Files
Simple Tool for Animating Sequential Images

A lightweight tool developed with VCSSL that allows you to play back sequential image files as an animation without converting them into a video file.
Vertex Array-Based Model Deformation Animation

How to Deform 3D Surface Models Using a Grid-Based Vertex Array
Creating a Model from a Vertex Array (Quadrangle Grid Mesh Format)

How to Create 3D Surface Models from a Grid-Based Vertex Array
News From RINEARN
* VCSSL is developed by RINEARN.

Released: Latest Version of VCSSL with Fixes for Behavioral Changes on Java 24
2025-04-22 - VCSSL 3.4.50 released with a fix for a subtle behavioral change in absolute path resolution on network drives, introduced in Java 24. Details inside.

Released the Latest Versions of RINEARN Graph and VCSSL - Now Supporting Customizable Tick Positions and Labels!
2024-11-24 - Starting with this update, a new "MANUAL" tick mode is now supported, allowing users to freely specify the positions and labels of ticks on the graph. We'll explain the details and how to use it.

Released Exevalator 2.2: Now Compatible with TypeScript and Usable in Web Browsers
2024-10-22 - The open-source expression evaluation library, Exevalator, has been updated to version 2.2. It now supports TypeScript and can be used for evaluating expressions directly in web browsers. Explains the details.

Behind the Scenes of Creating an Assistant AI (Part 1: Fundamental Knowledge)
2024-10-07 - The first part of a series on how to create an Assistant AI. In this article, we introduce the essential knowledge you need to grasp before building an Assistant AI. What exactly is an LLM-based AI? What is RAG? And more.

Launching an Assistant AI to Support Software Usage!
2024-09-20 - We've launched an Assistant AI that answers questions about how to use RINEARN software and helps with certain tasks. Anyone with a ChatGPT account can use it for free. We'll explain how to use it.

Software Updates: Command Expansion in RINEARN Graph, and English Support in VCSSL
2024-02-05 - We updated our apps. This updates include "Enhancing the Command-Line Features of RINEARN Graph" and "Adding English Support to VCSSL." Dives into each of them!

Inside the Repetitive Execution Speedup Impremented in Vnano Ver.1.1
2024-01-17 - Delves into the update in Vnano 1.1 from a developer's viewpoint, providing detailed insights into the specific improvements made to the internal structure of the script engine.

Scripting Engine Vnano Ver.1.1 Released: Dramatic Speed Improvement for Repetitive Executions of the Same Content
2023-12-22 - Released the Vnano script engine Ver.1.1. In this version, we've made significant enhancements in processing speed by reducing the overhead of handling requests. Explains the details.