OpenGL 入门第一课 视窗以及三角形

最新推荐文章于 2021-03-03 17:04:52 发布
最新推荐文章于 2021-03-03 17:04:52 发布
阅读量199 收藏
点赞数
文章标签： opengl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiuyuandashen/article/details/107663385
版权

请查看课件教程

下面是我粗劣画的过程图
在这里插入图片描述
下面是课件中的过程图
在这里插入图片描述

在这里插入图片描述

下面是未使用索引缓冲对象（EBO）的

#define GLEW_STATIC // 这个一定要加不然报错 静态链接库
#include<iostream>
#include<GL/glew.h>
#include<GLFW/glfw3.h>
using namespace std;
void processInput(GLFWwindow);
void processInput(GLFWwindow* window) {
	//如果键盘输入esc 则触发 退出
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) {
		// 设置 要求退出
		glfwSetWindowShouldClose(window, true);
	}
}
// 逆时针方向绘制  默认情况下，逆时针的顶点连接顺序被定义为三角形的正
// 逆时针或顺时针都是相对于观察者方向的
float vertices[] = {
	-0.5f, 0.5f, 0.0f,  // 左上角
	0.5f, -0.5f, 0.0f,  // 右下角
	0.5f, 0.5f, 0.0f,   // 右上角
	// 第二个三角形
	0.5f, -0.5f, 0.0f,  // 右下角
	-0.5f, -0.5f, 0.0f, // 左下角
	-0.5f, 0.5f, 0.0f   // 左上角
};

const char* vertexShaderSource =
"#version 330 core                                      \n"
"layout (location = 0) in vec3 aPos;                    \n"
"void main()                                            \n"
"{                                                      \n"
"    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);   \n"
"}                                                      \n";
const char* fragmentShaderSource =
"#version 330 core                            \n"
"out vec4 FragColor;                          \n"
"void main()                                  \n"
"{                                            \n"
"    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}                                            \n";

int main() {
	// 初始化GLFW
	glfwInit();
	// 提示 我们使用的版本是3.3
	// 主版本
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	// 次版本
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	// 简介
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
	// 创建一个窗口对象
	GLFWwindow* window = glfwCreateWindow(800, 600, "Test window", NULL, NULL);
	if (window == NULL) {
		cout << "open window failed." << endl;
		// 终止 glfw
		glfwTerminate();
	}
	// 绑定window到上下文对象 创建完窗口我们就可以通知GLFW将我们窗口的上下文设置为当前线程的主上下文了
	glfwMakeContextCurrent(window);

	glewExperimental = true;
	// GLEW_OK 0
	//init GLEW
	if (glewInit() != GLEW_OK) {
		cout << "glew init failed." << endl;
		// 终止 glfw
		glfwTerminate();
		return -1;
	}
	// OpenGL渲染窗口的尺寸大小 
	// glViewport函数前两个参数控制窗口左下角的位置。第三个和第四个参数控制渲染窗口的宽度和高度（像素）
	glViewport(0, 0, 800, 600);

	// 设置剔除 （opegl默认正面背面都显示（不剔除））
	glEnable(GL_CULL_FACE);
	// 剔除背面 GL_BACK 剔除正面 GL_FRONT
	glCullFace(GL_BACK);

	//VAO对象
	unsigned int VAO;
	// 生成一个VAO对象 这个方法可以生成多个 由第一个参数决定
	glGenVertexArrays(1, &VAO);
	// 绑定 VAO
	glBindVertexArray(VAO);

	unsigned int VBO; //如果多个可以用 VBO[]数组 这个方法可以生成多个 由第一个参数决定
	glGenBuffers(1, &VBO);
	//将新创建的缓冲绑定到 GL_ARRAY_BUFFER目标上
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	// glBufferData 是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数
	// GL_STATIC_DRAW 数据不会或几乎不会改变。
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

	// 编译着色器
	unsigned int vertexShader;
	// 创建这个着色器
	vertexShader = glCreateShader(GL_VERTEX_SHADER);
	glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
	// 编译
	glCompileShader(vertexShader);

	// 片段着色器
	unsigned int fragmentShader;
	// 创建这个着色器
	fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
	// 编译
	glCompileShader(fragmentShader);


	// 着色器程序 是将多个着色器合并之后并最终链接完成的版本
	unsigned int shaderProgram;
	// 创建一个着色器程序对象
	shaderProgram = glCreateProgram();
	// 将之前编译的着色器附加到程序对象上
	glAttachShader(shaderProgram, vertexShader);
	glAttachShader(shaderProgram, fragmentShader);
	// 用glLinkProgram链接它们
	glLinkProgram(shaderProgram);

	// glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据（应用到逐个顶点属性上）
	// 从 0位 开始 将数据每三个为一组 单位为float 每次跳3*float字节 偏移为0
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
	// 以顶点属性位置值作为参数，启用顶点属性；顶点属性默认是禁用的
	glEnableVertexAttribArray(0);

	//渲染循环 ，它能在我们让GLFW退出前一直保持运行。下面几行的代码就实现了一个简单的渲染循环：
	//glfwWindowShouldClose 我们每次循环的开始前检查一次GLFW是否被要求退出
	while (!glfwWindowShouldClose(window)) {

		//自定义事件 当键盘触发esc 退出
		processInput(window);

		glClearColor(0.2, 0.3, 0.3, 1.0);
		// GL_COLOR_BUFFER_BIT 颜色，GL_DEPTH_BUFFER_BIT 深度 和 GL_STENCIL_BUFFER_BIT 模板
		// 清除前面的那一帧的颜色
		glClear(GL_COLOR_BUFFER_BIT);
		// 绑定 VAO 
		glBindVertexArray(VAO);
		glUseProgram(shaderProgram);
		// 画三角形 从0开始 绘制三个顶点  和VBO的顶点数据（通过VAO间接绑定）来绘制图元
		glDrawArrays(GL_TRIANGLES, 0, 6);
		//解绑VAO
		glBindVertexArray(0);


		glfwSwapBuffers(window);
		glfwPollEvents();
	}
	// 最后终止 glfw
	glfwTerminate();
	return 0;
}

未剔除背面

在这里插入图片描述

剔除背面

在这里插入图片描述
使用EBO的

#define GLEW_STATIC // 这个一定要加不然报错 静态链接库
#include<iostream>
#include<GL/glew.h>
#include<GLFW/glfw3.h>
using namespace std;
void processInput(GLFWwindow);
void processInput(GLFWwindow* window) {
	//如果键盘输入esc 则触发 退出
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) {
		// 设置 要求退出
		glfwSetWindowShouldClose(window, true);
	}
}
// 逆时针方向绘制  默认情况下，逆时针的顶点连接顺序被定义为三角形的正
// 逆时针或顺时针都是相对于观察者方向的
float vertices[] {
	-0.5f, 0.5f, 0.0f,  // 左上角 0 
	0.5f, -0.5f, 0.0f,  // 右下角 1
	0.5f, 0.5f, 0.0f,   // 右上角 2
	// 第二个三角形
	//0.5f, -0.5f, 0.0f,  // 右下角
	-0.5f, -0.5f, 0.0f // 左下角  3
	//-0.5f, 0.5f, 0.0f   // 左上角
};
// 使用索引来减小画点的开销 (未用索引缓冲对象时,每个点都需要画一次(即使重复了))
unsigned int indices[] {
	0,1,2, //第一个三角形的索引
	1,3,0 //第二个三角形的索引
};
const char* vertexShaderSource =
"#version 330 core                                      \n"
"layout (location = 0) in vec3 aPos;                    \n"
"void main()                                            \n"
"{                                                      \n"
"    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);   \n"
"}                                                      \n";
const char* fragmentShaderSource =
"#version 330 core                            \n"
"out vec4 FragColor;                          \n"
"void main()                                  \n"
"{                                            \n"
"    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}                                            \n";

int main() {
	// 初始化GLFW
	glfwInit();
	// 提示 我们使用的版本是3.3
	// 主版本
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	// 次版本
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	// 简介
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
	// 创建一个窗口对象
	GLFWwindow* window = glfwCreateWindow(800, 600, "Test window", NULL, NULL);
	if (window == NULL) {
		cout << "open window failed." << endl;
		// 终止 glfw
		glfwTerminate();
	}
	// 绑定window到上下文对象 创建完窗口我们就可以通知GLFW将我们窗口的上下文设置为当前线程的主上下文了
	glfwMakeContextCurrent(window);

	glewExperimental = true;
	// GLEW_OK 0
	//init GLEW
	if (glewInit() != GLEW_OK) {
		cout << "glew init failed." << endl;
		// 终止 glfw
		glfwTerminate();
		return -1;
	}
	// OpenGL渲染窗口的尺寸大小 
	// glViewport函数前两个参数控制窗口左下角的位置。第三个和第四个参数控制渲染窗口的宽度和高度（像素）
	glViewport(0, 0, 800, 600);

	// 设置剔除 （opegl默认正面背面都显示（不剔除））
	glEnable(GL_CULL_FACE);
	// 剔除背面 GL_BACK 剔除正面 GL_FRONT
	glCullFace(GL_BACK);

	//VAO对象
	unsigned int VAO;
	// 生成一个VAO对象 这个方法可以生成多个 由第一个参数决定
	glGenVertexArrays(1, &VAO);
	// 绑定 VAO
	glBindVertexArray(VAO);

	unsigned int VBO; //如果多个可以用 VBO[]数组 这个方法可以生成多个 由第一个参数决定
	glGenBuffers(1, &VBO);
	//将新创建的缓冲绑定到 GL_ARRAY_BUFFER目标上
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	// glBufferData 是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数
	// GL_STATIC_DRAW 数据不会或几乎不会改变。
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

	unsigned int EBO;
	glGenBuffers(1, &EBO);
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

	// 编译着色器
	unsigned int vertexShader;
	// 创建这个着色器
	vertexShader = glCreateShader(GL_VERTEX_SHADER);
	glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
	// 编译
	glCompileShader(vertexShader);

	// 片段着色器
	unsigned int fragmentShader;
	// 创建这个着色器
	fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
	// 编译
	glCompileShader(fragmentShader);


	// 着色器程序 是将多个着色器合并之后并最终链接完成的版本
	unsigned int shaderProgram;
	// 创建一个着色器程序对象
	shaderProgram = glCreateProgram();
	// 将之前编译的着色器附加到程序对象上
	glAttachShader(shaderProgram, vertexShader);
	glAttachShader(shaderProgram, fragmentShader);
	// 用glLinkProgram链接它们
	glLinkProgram(shaderProgram);

	// glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据（应用到逐个顶点属性上）
	// 从 0位 开始 将数据每三个为一组 单位为float 每次跳3*float字节 偏移为0
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
	// 以顶点属性位置值作为参数，启用顶点属性；顶点属性默认是禁用的
	glEnableVertexAttribArray(0);

	//渲染循环 ，它能在我们让GLFW退出前一直保持运行。下面几行的代码就实现了一个简单的渲染循环：
	//glfwWindowShouldClose 我们每次循环的开始前检查一次GLFW是否被要求退出
	while (!glfwWindowShouldClose(window)) {

		//自定义事件 当键盘触发esc 退出
		processInput(window);

		glClearColor(0.2, 0.3, 0.3, 1.0);
		// GL_COLOR_BUFFER_BIT 颜色，GL_DEPTH_BUFFER_BIT 深度 和 GL_STENCIL_BUFFER_BIT 模板
		// 清除前面的那一帧的颜色
		glClear(GL_COLOR_BUFFER_BIT);
		// 绑定 VAO 
		glBindVertexArray(VAO);
		glUseProgram(shaderProgram);
		// 画三角形 从0开始 绘制三个顶点  和VBO的顶点数据（通过VAO间接绑定）来绘制图元
		//glDrawArrays(GL_TRIANGLES, 0, 6); 这个是不用索引画的
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);//可以不需要这个 绑定VAO的同时也会自动绑定EBO
		//glDrawElements函数从当前绑定到GL_ELEMENT_ARRAY_BUFFER目标的EBO中获取索引
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
		
		//解绑VAO
		glBindVertexArray(0);


		glfwSwapBuffers(window);
		glfwPollEvents();
	}
	// 最后终止 glfw
	glfwTerminate();
	return 0;
}

使用线框模式

加上下面那行代码就变成线框模式了

	glViewport(0, 0, 800, 600);

	// 设置剔除 （opegl默认正面背面都显示（不剔除））
	glEnable(GL_CULL_FACE);
	// 剔除背面 GL_BACK 剔除正面 GL_FRONT
	glCullFace(GL_BACK);
	// 线框模式 
	//第一个参数表示我们打算将其应用到所有的三角形的正面和背面，第二个参数告诉我们用线来绘制
	glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

效果
在这里插入图片描述
在这里插入图片描述

判断正背面

处理背面剔除有两个需要参考的依据，一个是正背面判断，一个是观察者位置

正背面判断：在OpenGL中默认是逆时针打点的为正面，顺时针为侧面。

锋君
关注
c++ opengl 绘制地面_铝合金门窗设计之绘制节点图
weixin_33230532的博客
12-19 1133
铝合金门窗设计之绘制节点图过程讲解上节在我们绘制好门窗方案大样图之后，接下来就可以进行门窗节点图的绘制了。首先我们先来认识一下铝合金门窗节点图。铝型材厂家的宣传图都配有节点图，以方便使用者选料。对于初学者怎么看门窗的节点图呢？现在就简单介绍下。一、 门窗节点图的构成节点图,又叫结构图或构造图,是显示各门窗型材结构关系的,图中有门窗分格图、型材品种、玻璃、胶条等,这里主要还是讲各型材品种之间的关系,...
OpenGl学习笔记-（一）绘制三角形
Shaobo_Yi的博客
03-28 640
OpenGl学习笔记-入门 这学期有计算机图形学这门课，opengl的学习过程感觉比较困难，写一些博客分享，也作备忘。 学习环境 OpenGL 3.3+ GLEW+GLFW+ImGUI（imgui的环境配置很坑） 学习网站：https://learnopengl-cn.readthedocs.io/zh/latest/ OpenGL的hello world—绘制三角形 三角形是最...
opengl中视窗设置函数
qqqren的博客
12-13 553
设置3D视窗 gluPerspective // 设置透视图 (45.0f, // 俯仰角设置为 45 度 (GLfloat)width / (GLfloat)height, // 窗口的宽与高比 1.0f, // 视野透视深度:近点1.0f 3000.0f // 视野透视深度:始点0.1f远点1000.0f ); gluLookAt(0, 0.0,
【菜鸟也能玩转OpenGL】最简单的OpenGL窗口
【莫问】的专栏
05-27 4915
笔记一中我们介绍了如何用代码创建空的win32窗口，然而创建空的win32窗口只完成了一半的工作，接下来要做的工作是设置Direct3D，从而可以在屏幕上渲染图形。
三角形顶点绘制和背面剔除-opengl系列实践入门（2）
qq_35453136的博客
10-21 185
三角形顶点绘制-opengl系列实践入门（2） 在上一篇中我们绘制顶点使用了如下坐标， GLfloat vVerts[] = { -0.5f, 0.0, 0.0f, 0.5f, 0.0, 0.0, 0.0, 0.5, 0.0 }; triangleBatch.Begin(GL_TRIANGLES, 3); 绘制三角形的顶点可以使用逆时针和顺时针2种顶点顺序，在默认设置下，逆时针是正面，顺时针是背面。如下图所示 可以使用glFrontFace(GL_CW)设置顺时针是正面 也可以使用gl
opengl 教程(3) 在窗口画三角形
any
10-22 797
http://www.cnblogs.com/mikewolf2002/archive/2013/01/08/2851803.html 原文地址：http://ogldev.atspace.co.uk/www/tutorial03/tutorial03.html       本教程是一个很短的教程，主要内容是在教程2基础上渲染一个三角形。    在前面一个教程中
e语言-易语言OpenGL教程第39课物理模拟
08-23
易语言，又称E语言，是一种中国本土开发的、以简单易学为特点的编程语言，旨在降低编程入门难度。OpenGL则是一个跨语言、跨平台的图形库，广泛用于创建2D和3D图形。 首先，我们要理解物理模拟的基本概念。物理模拟...
C# Nehe OpenGL第二课 绘制多边形
06-12
在Nehe的这个第二课中，你将学习如何创建一个简单的OpenGL上下文，初始化必要的OpenGL状态，然后绘制一个多边形。首先，你需要设置视口、投影和模型视图矩阵。接着，定义多边形的顶点，然后调用`glBegin()`和`glEnd...
SCARA——OpenGL入门学习一、二
Peter-H
05-14 2499
最近开始一个机械手臂的安装调试，然后找资料学习一下OpenGL。 OpenGL（全写Open Graphics Library）是个定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。 OpenGL帮助程序员实现在 PC、工作站、超级计算机等硬件设备上的高性能、极具冲击力的高视觉表现力图形处理软件的开发。虽
从0开始的OpenGL学习（一）-创建OpenGL窗口
pengrui18的专栏
03-03 1126
为啥学习openGL,因为在开发QT 3D场景时,看见官方有个boxes的demo,想学习一下. 本文主要解决两个问题： OpenGL到底是什么鬼？ 如何创建一个使用OpenGL的窗口？ 1、OpenGL到底是什么鬼？ 笔者也算是一个入门的C++程序员了，一下决心要学习OpenGL之后就直接上谷歌搜了OpenGL的官网（当然这是要翻越万里长城的），想下一个API就上手。然而在官网上溜了一大圈，楞是没找到一个下载API的地方，倒是在各种显卡厂商的官网上都转了一圈，灰头土脸。 在网上找了很多资料之后，终于.
[OpenGL]创建一个窗口
Younix凌乱的草稿本
11-03 1728
代码#include <stdio.h> #include <stdlib.h>//GLEW 的库 #include <GL/glew.h> //GLFW 的库，处理窗口和键盘的消息 #include <glfw3.h> GLFWwindow* window;////三维数学的库 #include <glm/glm.hpp> using namespace glm;int main(
OpenGL建立显示窗口
sinat_41479651的博客
10-12 528
OpenGL新建一个显示窗口 只是一个显示窗口，窗口上画了一条线 知道OpenGL建立窗口所必要的内容 #include <iostream> #include<gl\glut.h> void init(void)//初始化相关的，只设置一次的放在init里 { //将显示窗口的背景颜色设置为白色，前三个参数分别为RGB， //第四个参数是alpha值，作为调和参数，alpha值用来为两个重叠对象确定结果颜色 //alpha=0.0表示完全透明的对象；=1.0表示不透明对象
OpenGL中的窗口与视口
秦黎明的博客
04-26 6526
// 目标：测试OpenGL窗口视口坐标 // 结果：glutInitWindowSize(640, 480); 指定的是windows概念中窗口(看得见，可移动，最大化，最小化等操作)大小，以像素为单位 // OpenGL中的窗口和视口是逻辑上的概念，其中窗口范围是画图时指定顶点坐标使用的坐标，而视口范围是将windows中概念中实际 // 窗口映射成的范围 #defi
用glew，glfw，FreeImage实现opengl学习笔记6坐标变换
兔兔里个花兔的博客
09-11 2042
这个代码参考教程点击打开链接  这个教程很详细，代码是实现坐标的转换，教程带源码，我仿照源码在自己本地的实现，这里给大家参考使用加载图片是用的FreeImage是一个开源的加载图片的，网上的资料也挺多的。这个程序的源码在这点击打开链接  点击里面的shader3文件夹里面有两个着色器程序和一个read文件，使用shader.h和transfromation.cpp 程序运行后是个旋转的效果，
openGL——视图
lingedeng的专栏
02-28 7699
glViewport(GLint x, GLint y, GLsizei width, GLsizei height); 在窗口中定义一个像素矩形，最终的图像会映射到这个矩形中。（x，y）指定了的视口的左下角，width和height指定了这个视口矩形的宽度和高度。在默认情况下，视口的初始值为（0, 0, winWidth, winHeight)，其中winWidth和winHeight指定了窗
[OpenGL]配置GLFW（超详细）
dengshouzi7943的博客
06-03 1630
注：本文可转载，转载请著名出处：http://www.cnblogs.com/collectionne/p/6937644.html。本文还会修改，如果不在博客园（cnblogs）发现本文，建议访问上面的链接访问最新文章。 部分资料来自LearnOpenGL。 学OpenGL的都会知道，OpenGL只提供了绘图功能，创建窗口是需要自己完成的。这就需要学习相应操作系统的创建...
GLFW初步接触
鸣桐小记
09-30 6082
计算机系的同学帮忙写的程序用的是freeglut。这是一个完全兼容于原来的glut库的开源库，不过我之前也没接触过glut，只知道是一个能用来创建窗口（后来大概知道还有些诸如“上下文”的专业名词）的库。但是这个库在实际使用当中有个非常严重的问题：没办法把窗口的边框和标题栏去掉。当时写的一个程序需要申请一个超过了32位系统允许的最大内存的空间，只能用64位程序实现，于是网上下了一个64位的源代码编译
OpenGL入门教程：NeHe经典指南
接下来的教程内容逐步深入，例如“你的第一个多边形”部分，介绍了多边形的基本构成，特别是三角形和四边形，这两个图形是3D渲染中的基本元素，所有复杂形状都会被分解成这些基本形式。通过这一课，学生可以学会如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值