Study Notes on Cocos 3D functions (1) --- camera and cocos Study Notes

Source: Internet
Author: User

Study Notes on Cocos 3D functions (1) --- camera and cocos Study Notes

Personal Original, welcome to reprint, reprint please note the address, column address


With the improvement of mobile phone hardware and fierce competition in the gaming industry, gamers no longer need to meet the requirements of the Game Image in 2D mode. In the past, 3D Game Development was generally developed and manufactured using the unity3D engine, since last year, cocos engine gradually added 3D Function Support, familiar with cocos2D-X development partners can be more easily converted to 3D development programmers, about cocos and unity advantages and disadvantages, this is also a topic that programmers often love to discuss. I have always had such a point of view that mainstream technologies are not good or bad, but they are not suitable. I have summarized the advantages and disadvantages of the two, you can choose from the following options:

Unity: advantages: it has sufficient project accumulation, a complete tool chain, and fast development. The development language is relatively simple and the learning speed is relatively fast.

Disadvantage: Not open-source, it is not conducive to programmers to learn openGL and underlying code in depth, and is not conducive to engine-based Secondary Development (due to accumulation, secondary development may not be so necessary)

Cocos: Advantages: Open Source, conducive to learning and secondary development; familiar with the api, is conducive to cocos2D-X programmers to 3D programs

Disadvantages: it takes time to accumulate. in 3D, the tool chain is more mature than 2D.

Because I learned 3D for the purpose of learning the underlying code, and there is no need for actual development at the moment, I chose to study at the same time and prefer cocos learning, due to the scattered learning of 3D and openGL for a while, I have some knowledge about 3D games, especially when 2D Engineers turn to 3D, the following content needs to be learned:

1) 3D thinking, which is important and difficult for individuals, including understanding of camera lighting and other concepts, and extending their thinking to 3D space.

2) New api learning, in fact, cocos2D-X programmers to 3D is actually more convenient, the overall program construction ideas have not changed

3) in the new language, shader learning is more important in 3D. In addition, the preparation of material files is also a learning of new content.

This series of tutorials will focus on the 3D functions and 3D ideas of the cocos engine. As a learning note for the author to learn about the 3D functions of the cocos engine, if any errors occur, please note, in addition, learning openGL series from the cocos2D-X will continue to update, used to learn the underlying code and openGL principle, etc., due to the tight release of the project before the impact of the update speed, in addition, the author will return to school to serve as a graduate student in May, and the update of the technical blog may also be affected. However, I will try my best to ensure the update speed of this series of articles.


This article first introduces the camera. In fact, the cocos engine has the camera concept in 2D, and each node has a camera class. At that time, the use instance of the camera class was to realize the scaling and rotation of the Node object, because the nodes themselves provide these functions, there are not many camera applications, I used setEyeXYZ and Other interfaces only when I tried to achieve a positive-looking forward effect in order to make the scene have a "fake" 3D effect, but in 3D, camera is a very important concept, because if the coordinates of the standard geometric model are directly displayed on the device, nothing can be seen on the screen, because the range of the model coordinates may not correspond to the coordinate range of the device, the display itself is a fixed two-dimensional rectangular area, showing a three-dimensional model requires corresponding projection and changes.

It should be noted that in the era of cocos2D-X 2.0, the camera class inherits from, and now the camera class is a subclass of the Node class, can be attached to any Node as a sub-Node

OpenGL supports two types of cameras, namely, the fluoroscopy camera (which has the effect of almost big and small) and the orthogonal camera (generally used for architectural design drawings and so on ).

The Perspective camera is similar to the camera image we use everyday. It has a cone concept, which has two planes, one near plane and the other far plane, the two planes correspond to the four sides of the cone, which constitute a flattened vertebral body, and objects within the range of the vertebral body will be drawn, if an element falls on the four planes of the composite vertebral body, it will not be drawn. If an object passes through a plane, then openGL will cut the object (clip), draw the intersection of the object and the plane, and generate a new ry after calculation.

To create a fluoroscopy camera, call the following function:

Camera * cameraExample = Camera: createPerspective (30, (GLfloat) s. width/s. height, 10,200 );

The first parameter is the visual angle (angle, usually between 40-60 degrees) of the perspective camera. Its size determines the horizontal width of the angle.

The second parameter is the aspect ratio of the camera (the width of the window is usually divided by the height of the window), which is generally the aspect ratio of the screen.

The third and fourth parameters are respectively the distance from the top point of the cone to the near cross section and the far cross section.

After creating the image, you can use getNearPlane and getFarPlane to obtain the distance from the top point of the cone to the near-cross section and the far-cross section.

Compared with the projection camera, the orthogonal camera is much simpler. Its main function is to maintain the real size and angle between objects after the projection.

To create an orthogonal camera, call the following function:

Camera * cameraExample = Camera: createOrthographic (100,100, 10,200 );

The first parameter is the zooming factor of the orthogonal projection on the X axis (the width of the orthogonal projection ).

The second parameter is the scale factor of the orthogonal projection along the Y axis (the height of the orthogonal projection ).

The third and fourth parameters are the distance from the top point of the cone to the near cross section and the far cross section, respectively.

After creating the camera, you can set the camera position. The Code is as follows:

CameraExample-> setPosition3D (Vec3 (-100,100,-50 ));

CameraExample-> lookAt (Vec3 (-100, 0,-50), Vec3 (, 0 ));

First, set the camera position, and then call the lookAt function to set the observation target position and the camera's upward position. The camera position and the observation target position jointly determine the observation direction vector, the plane perpendicular to this line determines the observation plane. The camera's upward direction is generally set to the Y axis direction. If the parameter is not set, the default value is Vec3: UNIT_Y (Y axis)

Next, set the camera identifier:

CameraExample-> setCameraFlag (CameraFlag: USER1 );

This identifier is used to guide the object to observe using different cameras. CameraFlag contains a default camera and eight Custom cameras. The default camera is created by the scene, the default camera ID of the node is the same as that of the default camera. Therefore, the default camera ID of the node is the default camera automatically created in the scenario. The Node performs the same operation on its own and camera ID, if the result is greater than zero, the camera is responsible for displaying the node;

The default camera is used to draw the ui, which is finally drawn. Generally, another camera is needed to draw 3d objects instead of the default camera. When the depth test is not enabled, you can adjust the camera's Rendering sequence; the Rendering sequence of all cameras is to draw 2d and opaque 3d objects first, and then draw transparent 3d objects.

You can call setDepth to set the camera's painting sequence. The higher the depth, the higher the camera is drawn. Therefore, the default camera value is 0, and the default value is 1 for other cameras.

The unit of an object must undergo model transformation, and the view transformation and projection transformation can be converted to the information required by opengl. The camera class can obtain the matrix of these three stages by calling some functions.

This article focuses on concepts. After the introduction of the 3D genie, we will provide an example.


Insufficient capacity and limited level. If you have any mistakes, please note.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.