After you define shapes to be drawn with OpenGL, you probably want to draw them. Drawing shapes with the OpenGL ES 2.0 takes a bit more code than you might imagine, because the API provides a great deal of control over the graphics rendering pipeline.http://blog.csdn.net/sergeycao
This lesson explains how to draw the shapes you defined in the previous lesson using the OpenGL ES 2.0 API.
Initialize Shapes
Before you do any drawing, you must initialize and load the shapes you plan to draw. Unless the structure (the original coordinates) of the shapes you use in your program change during the course of execution, you should initialize them in theonSurfaceCreated()
method of your renderer for memory and processing efficiency.
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
...
// initialize a triangle
mTriangle = new Triangle();
// initialize a square
mSquare = new Square();
}
Draw a Shape
Drawing a defined shape using OpenGL ES 2.0 requires a significant amount of code, because you must provide a lot of details to the graphics rendering pipeline. Specifically, you must define the following:
-
Vertex Shader - OpenGL ES graphics code for rendering the vertices of a shape.
-
Fragment Shader - OpenGL ES code for rendering the face of a shape with colors or textures.
-
Program - An OpenGL ES object that contains the shaders you want to use for drawing one or more shapes.
You need at least one vertex shader to draw a shape and one fragment shader to color that shape. These shaders must be complied and then added to an OpenGL ES program, which is then used to draw the shape. Here is an example of how to define basic shaders
you can use to draw a shape:
private final String vertexShaderCode =
"attribute vec4 vPosition;" +
"void main() {" +
" gl_Position = vPosition;" +
"}";
private final String fragmentShaderCode =
"precision mediump float;" +
"uniform vec4 vColor;" +
"void main() {" +
" gl_FragColor = vColor;" +
"}";
Shaders contain OpenGL Shading Language (GLSL) code that must be compiled prior to using it in the OpenGL ES environment. To compile this code, create a utility method in your renderer class:
public static int loadShader(int type, String shaderCode){
// create a vertex shader type (GLES20.GL_VERTEX_SHADER)
// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
int shader = GLES20.glCreateShader(type);
// add the source code to the shader and compile it
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}
In order to draw your shape, you must compile the shader code, add them to a OpenGL ES program object and then link the program. Do this in your drawn object’s constructor, so it is only done once.
Note: Compiling OpenGL ES shaders and linking programs is expensive in terms of CPU cycles and processing time, so you should avoid doing this more than once. If you do not know the content of your shaders at runtime, you should
build your code such that they only get created once and then cached for later use.
public Triangle() {
...
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);
mProgram = GLES20.glCreateProgram(); // create empty OpenGL ES Program
GLES20.glAttachShader(mProgram, vertexShader); // add the vertex shader to program
GLES20.glAttachShader(mProgram, fragmentShader); // add the fragment shader to program
GLES20.glLinkProgram(mProgram); // creates OpenGL ES program executables
}
At this point, you are ready to add the actual calls that draw your shape. Drawing shapes with OpenGL ES requires that you specify several parameters to tell the rendering pipeline what you want to draw and how to draw it. Since drawing options can vary
by shape, it's a good idea to have your shape classes contain their own drawing logic.
Create a draw()
method for drawing the shape. This code sets the position and color values to the shape’s vertex shader and fragment shader, and then executes the drawing function.
public void draw() {
// Add program to OpenGL ES environment
GLES20.glUseProgram(mProgram);
// get handle to vertex shader's vPosition member
mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
// Enable a handle to the triangle vertices
GLES20.glEnableVertexAttribArray(mPositionHandle);
// Prepare the triangle coordinate data
GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
GLES20.GL_FLOAT, false,
vertexStride, vertexBuffer);
// get handle to fragment shader's vColor member
mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
// Set color for drawing the triangle
GLES20.glUniform4fv(mColorHandle, 1, color, 0);
// Draw the triangle
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
// Disable vertex array
GLES20.glDisableVertexAttribArray(mPositionHandle);
}
Once you have all this code in place, drawing this object just requires a call to thedraw()
method from within your renderer’s
onDrawFrame()
method. When you run the application, it should look something like this:
Figure 1. Triangle drawn without a projection or camera view.
There are a few problems with this code example. First of all, it is not going to impress your friends. Secondly, the triangle is a bit squashed and changes shape when you change the screen orientation of the device. The reason the shape is skewed is due
to the fact that the object’s vertices have not been corrected for the proportions of the screen area where theGLSurfaceView
is displayed. You can fix that problem using a projection and camera view in the next lesson.
Lastly, the triangle is stationary, which is a bit boring. In the Adding Motion lesson, you make this shape rotate and make more interesting use of the OpenGL ES graphics pipeline.
分享到:
相关推荐
Serge Belongie大作, Matching Shapes,形状上下文论文
Shapes FX Pack 形状 FX 包第 2 卷Unity游戏特效动画插件资源unitypackage 版本1.55 支持Unity版本2019.2.9或更高 形状 FX 包 一个大型的形状 FX 包来供你的科幻游戏使用(环境、游戏玩法、UI 等) 功能: - 着色器...
Shapes 是一款实时向量图库,带有高质量的线条画和无限分辨率的图形,并以高级的抗锯齿技术渲染 功能特色 高质量的线条画,带有随机厚度以及高级抗锯齿 • 可指定厚度单位为米、像素或节点 • 2D 形状,比如多段线、...
Shapes is a real-time vector graphics library with high-quality line drawing and infinite resolution shapes, rendered with advanced anti-aliasing techniques
Unity插件Shapes最新版 4.2.1
您要打印的形状的名称(正方形,三角形,圆形,点) 紧随其后的是打印位置的X和Y坐标(三角形10 10或圆圈5 16) 特别案例: Square接受x和y坐标,但还需要第三个大小的输入变量。 例如:(平方0 0 24) 点还...
绘图形状帕森斯设计学院,2014年SpringNode.js Web应用程序Drawing Shapes是一个Web应用程序,用于模拟和建立机械连接。 该项目的目的是作为有关运动,工程学和机械学的学习工具。 另一个重点是建立自己的工具来帮助...
Shapes2
Shapes1
论文 基于机器视觉的茄科类作物与杂草的识别研究相关
drawShapes 从选择标签中选择要绘制的形状,它会出现在画布上
Mega Shapes - 神奇的卡通场景与模型制作工具,注意这是一款Unity3d 插件,非模型 制作一个赛车游戏?完全没有问题。 为道路画一条线,画一个截面,就能制作出道路。 添加障碍或扭曲他们,可任意发挥你的想象力!...
在Unity3D中绘制2D物理形状 本教程项目提供了一个示例,说明如何在Unity中使用光标绘制形状,类似于或 。 该项目的核心逻辑使用从光标坐标指定的顶点来动态生成和配置网格,轮廓和2D对撞器。 ,详细了解其工作原理...
形状在p5.js中创建的音乐游戏,通过绘制形状来创建旋律。 播放: : 指示确保您的声音打开。 Shapes在台式机和移动设备上的浏览器中运行。 单击任意位置以绘制节点。 绘制多个节点以形成形状。 通过单击形状中的第一...
版本:0.9.0测试版文件:canvasShapes.js主类:PolyArea.jscanvas形状 它是一个用于绘制与事件相关的几何图形的库。 它显示了几何计算(面积,周长等),并支持自由绘制模式“徒手绘制” ; 它还具有带按钮栏的图形...
教程《Blender图解教程:使用Orient bone shapes插件轻松解决设置骨骼自定义形状(Bone Custom Shapes)时的各种痛点》地址:https://orzgame.blog.csdn.net/article/details/109734778
Shapes FX Pack Vol.2 形状 FX 包第 2 卷Unity游戏特效动画插件资源unitypackage 版本1.1 支持Unity版本2020.3.11或更高 SHAPES FX Pack Vol.2 是一个令人惊叹的 VFX 动画形状合集,非常适合为您的游戏环境和游戏玩...
Bevy +里昂= :red_heart: bevy_prototype_lyon使用户可以绘制2D形状和路径,例如三角形,圆形,矩形,直线,圆弧和贝塞尔曲线。它是如何工作的? 目前,Bevy不支持以简单的方式绘制自定义形状。 此板条箱使用Bevy的...
jquery.roundabout-shapes 5.js
Shapes 是一款实时向量图库,带有高质量的线条画和无限分辨率的图形,并以高级的抗锯齿技术渲染