Create Innovative Effects with Pipelines in 3D Development

#webdev #programming #javascript #beginners

In 3D scenes, pipelines are an extremely common and important element. They can be used to present transport systems in industrial environments such as factories, power plants, and underground facilities, as well as to simulate the flow or processing of data.

In HT for Web (abbreviated as HT), ht.Polyline is a powerful Class that can be used to represent pipelines in 3D scenes. In addition to supporting textures, it also supports displaying the direction of data flow by adjusting texture properties such as UV offset. Furthermore, during usage, we found that ht.Polyline is not limited to simple pipeline representation; it can also be used to implement functions such as flow and roaming.

Pipeline flow

Pipeline flow animation is achieved by adjusting the UV offset property of the texture during the animation process. Therefore, this form of animation is also known as UV offset animation. By continuously updating the UV offset property, the texture creates a flowing effect on the node surface.

The property that controls texture offset in pipelines is shape3d.uv.offset. By continuously increasing/decreasing this property value in the code, a flowing effect can be achieved.

The specific code is as follows:

var config = {
    duration: 1000,
    easing: t => t,
    action: (v, t) => {
        polyline.s('shape3d.uv.offset', [v, 0]);
    },
    finishFunc: () => {
        ht.Default.startAnim(config);
    }
}
ht.Default.startAnim(config);

The final effect of the pipe flow animation is as follows:

The UV offset animation of pipelines is commonly used to represent the direction of material flow. The image below is a typical example, which expressively presents the flowing effect.

Fish Passage Effect
In addition to ordinary pipeline flow animations, developers can also use this to unleash their creativity and achieve more innovative visual effects.

For example, using pipeline flow to simulate a fish passage effect. By drawing multiple swimming paths for fish, applying fish textures on the pipeline, and then displaying realistic scenes of fish swimming in water through animation. This method is not only vivid and expressive, but also adds dynamic interest to the visual presentation.

UV Clipping
Besides the flow animation effect, we can also combine the pipe with the cropping property to create richer and diverse visual effects. For example, pipe growth animation, pipe display transition effect.

Pipe cropping includes two main properties:

■ Clipping direction: 3d.clip.direction

■ Clipping ratio: 3d.clip.percentage

Clipping can be categorized into normal clipping and special clipping in terms of the clipping direction attribute.

For normal clipping, the pipe can be clipped from six directions:

■Clipping from right to left: Set the property value to left.

■Clipping from left to right: Set the property value to right.

■Clipping from top to bottom: set the property value to top.

■Clipping from bottom to top: sets the property value to bottom.

■Clipping from front to back: sets the property value to back.

■Clipping from back to front: sets the property value to front.

In addition to the six regular crop directions mentioned above, HT also provides the uv.right or uv.left crop direction in order to crop the pipe along the UV direction. To use these two cropping directions, the scene needs to enable UV cropping: g3d.setUvClipEnabled(true).

The implementation code is as follows:

g3d.setUvClipEnabled(true);
polyline.s('3d.clip.direction', 'uv.right')

ht.Default.startAnim({
    duration: 1000,
    easing: t => t,
    action: (v, t) => {
        polyline.s('3d.clip.percentage', v);
    },
    finishFunc: () => {}
});

Pipeline roaming

HT provides APIs to get the length of the pipe, g3d.getLineLength(), and the position of the pipe according to the percentage, g3d.getLineOffset(). With these two APIs, we can realize roaming animation and other effects.

Scene roaming

In HT, developers can control the viewpoint by using the eye and center properties. So roaming is achieved by constantly adjusting the eye and center. Thus, we can use the API mentioned above to make the scene’s viewpoint change along the pipeline. That is, the effect of scene roaming.

Specific realization of the code can be referred to as follows:

const length = g3d.getLineLength(polyline);
const roamConfig = {
    duration: 20e3,
    easing: t => t,
    action: (v, t) => {
        const offset = g3d.getLineOffset(polyline, length * v),
            point = offset.point,
            px = point.x,
            py = point.y,
            pz = point.z,
            tangent = offset.tangent,
            tx = tangent.x,
            ty = tangent.y,
            tz = tangent.z;
        g3d.setEye([px, py, pz]);
        g3d.setCenter([px + tx, py + ty, pz + tz]);
    },
    finishFunc: () => {}
};
roamAnim = ht.Default.startAnim(roamConfig);

Model roaming animation
Through the above example, we know that we can use g3d.getLineOffset() to get the position of a specified percentage on the pipe. If this function is used to change the coordinates of the model, then an animation effect can be realized where the model is displaced along the preset pipe path. This is also known as the model roaming effect.

The implementation code is as follows:

const params = {
    duration: 60000,
    easing: function (t) {
        return t;
    },
    action: function (v, t) {
        const lineLength = g3d.getLineLength(polyline);
        const offset = g3d.getLineOffset(polyline, lineLength * v),
            point = offset.point,
            px = point.x,
            py = point.y,
            pz = point.z,
            tangent = offset.tangent,
            tx = tangent.x,
            ty = tangent.y,
            tz = tangent.z;
        plane.p3(px, py, pz);
        plane.lookAt([px + tx, py + ty, pz + tz], 'front');
    },
    finishFunc: function () {}
};
animation = ht.Default.startAnim(params);

Summary

As an important Class in HT for Web, ht.Polyline is not only used for the static display of the model, but also plays a key role in the dynamic representation. In the industrial field, it is widely used to display complex pipeline control and transportation systems; at the same time, developers can also give full play to their creativity to realize rich and diverse animation effects with the help of pipelines.

If you have more ideas on the use of pipelines or creative realization, or have encountered related problems, please feel free to contact us, and we look forward to working with you to explore more possibilities of pipelines in 3D scenes~!

Appendix

“HT for Web” allows you to create and showcase high-performance interactive 3D visualization solutions in web browsers. It enables users to create, edit, render, and export 3D models. It is suitable for various industrial internet fields. HT utilizes web technologies such as HTML5, WebGL, and JavaScript, eliminating the need for installing any plugins or additional software, and can run on various web browsers. It also provides a rich set of features and tools, including model loading, material editing, animation creation, lighting rendering, collision detection, and more, to meet the requirements of complex 3D visualization applications.