Skip to content

Commit a4e7ce7

Browse files
CharonChuiCharonChui
committed
update notes
1 parent 7032443 commit a4e7ce7

File tree

7 files changed

+609
-695
lines changed

7 files changed

+609
-695
lines changed

‎VideoDevelopment/OpenGL/1.OpenGL简介.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ OpenGL的前身是硅谷图形功能(SGI)公司为其图形工作站开发的IRI
1111
网上已经有很多文章，这里为什么还要写？主要是因为最近在学的时候发现那些文章看完后还是雨里雾里的不明白。方法不明白，不知道为什么要那样用，而且版本不同，最开始看的3.0版本，后面我就都用3.0的来写，结果网上的例子都是2.0的，GLSL的语法不一样，搞的死活出不来效果，耽误时间，所以干脆我系统学一遍，顺便记录下来，写一个简单的，能从入门开始一步步学习的，文章里面有一些是从下面写的参考链接中拷贝过来的，也有一些是自己从书上看的。本书所有的例子都是用OpenGL ES3.0版本、GLSL ES 300版本来写。
1212

1313

14+
15+
[后面文章所有的源码都在Github上](https://github.com/CharonChui/OpenGLES3.0StudyDemo)
16+
17+
1418
### OpenGL ES
1519

1620
[OpenGL ES 官网](https://www.khronos.org/opengles/)
@@ -140,7 +144,7 @@ OpenGL ES 3.0实现了具有可编程着色功能的图形管线，有两个规
140144

141145
- 坐标系
142146

143-
OpenGL ES采用虚拟坐标系
147+
OpenGL ES是一个3D的世界，由x、y、z坐标组成顶点坐标。采用虚拟的右手坐标。
144148

145149
![](https://raw.githubusercontent.com/CharonChui/Pictures/master/opengl_es_xy.png)
146150

‎VideoDevelopment/OpenGL/10.GLSurfaceView+MediaPlayer播放视频.md‎

Lines changed: 60 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
## 10.GLSurfaceView+MediaPlayer播放视频
22

3-
### 相机预览
3+
### 视频播放
4+
5+
平时的视频播放都是使用mediaplayer+textureview或者mediaplayer+surfaceview，但是如果我们要对视频进行一些OpenGL的操作，打个比方说我要在视频播放的时候添加一个滤镜，这个时候就需要用都SurfaceTexture了。
6+
7+
大体步骤如下:
8+
9+
GLSurfaceView -> setRender -> onSurfaceCreated回调方法中构造一个SurfaceTexture对象，然后设置到Camera预览或者MediaPlayer中 -> SurfaceTexture中的回调方法onFrameAvailable来得知一帧的数据真好完成 -> requestRender通知Render来绘制数据 -> 在Render的回调方法onDrawFrame中调用SurfaceTexture的updateTexImage方法来获取一帧数据，然后开始使用GL进行绘制预览。
10+
11+
​ 具体步骤:
412

513
1. 在GLSurfaceView.Render中创建一个纹理，再使用该纹理创建一个SurfaceTexture。
614
2. 使用该SurfaceTexture创建一个Surface传给相机，相机预览数据就会输出到这个纹理上了。
@@ -11,116 +19,84 @@
1119

1220
```xml
1321
#version 300 es
22+
in vec4 vPosition;
23+
in vec2 vCoordPosition;
24+
out vec2 aCoordPosition;
1425

15-
layout (location = 0) in vec4 a_Position;
16-
layout (location = 1) in vec2 a_texCoord;
17-
18-
out vec2 v_texCoord;
19-
20-
void main()
21-
{
22-
gl_Position = a_Position;
23-
v_texCoord = a_texCoord;
26+
void main() {
27+
gl_Position = vPosition;
28+
aCoordPosition = vCoordPosition;
2429
}
2530
```
26-
31+
2732
- 片段着色器
2833

29-
这里需要注意一下，就是做相机预览的话，纹理的类型需要使用samplerExternalOES，而不是之前渲染图片的sampler2D。
34+
这里需要注意一下，就是做相机预览和视频播放的话，纹理的类型需要使用samplerExternalOES，而不是之前渲染图片的sampler2D。这是因为相机和视频的数据是YUV的，而OpenGL ES是RGB的，samplerExternalOES内部会进行处理。#extension用于启用和设置扩展的行为。格式为#extension all : behavior。behavior的可选值有: require、enable、warn、disable。
3035

3136
```xml
3237
#version 300 es
3338
#extension GL_OES_EGL_image_external_essl3 : require
3439
precision mediump float;
35-
36-
in vec2 v_texCoord;
37-
out vec4 outColor;
38-
uniform samplerExternalOES s_texture;
39-
40-
void main(){
41-
outColor = texture(s_texture, v_texCoord);
40+
in vec2 aCoordPosition;
41+
uniform samplerExternalOES uSamplerTexture;
42+
out vec4 vFragColor;
43+
void main() {
44+
vFragColor = texture(uSamplerTexture, aCoordPosition);
4245
}
4346
```
4447

4548

4649

47-
48-
49-
50-
51-
52-
53-
### 视频播放
54-
55-
平时的视频播放都是使用mediaplayer+textureview或者mediaplayer+surfaceview，但是如果我们要对视频进行一些OpenGL的操作，打个比方说我要在视频播放的时候添加一个滤镜，这个时候就需要用都SurfaceTexture了。
56-
57-
大体步骤如下:
58-
59-
GLSurfaceView -> setRender -> onSurfaceCreated回调方法中构造一个SurfaceTexture对象，然后设置到Camera预览或者MediaPlayer中 -> SurfaceTexture中的回调方法onFrameAvailable来得知一帧的数据真好完成 -> requestRender通知Render来绘制数据 -> 在Render的回调方法onDrawFrame中调用SurfaceTexture的updateTexImage方法来获取一帧数据，然后开始使用GL进行绘制预览。
60-
61-
62-
63-
### TextureView+MediaPlayer播放视频
50+
### GLSurfaceView+MediaPlayer播放视频
6451

6552
```java
66-
public class VideoActivity extends Activity {
67-
private static final String VIDEO_PATH = "http://60.28.125.129/video19.ifeng.com/video06/2012/04/11/629da9ec-60d4-4814-a940-997e6487804a.mp4";
53+
public class VideoPlayerActivity extends Activity {
54+
private GLSurfaceView mGLSurfaceView;
6855
private Surface mSurface;
69-
private TextureView mTextureView;
7056
private MediaPlayer mMediaPlayer;
7157

7258
@Override
7359
protected void onCreate(@Nullable Bundle savedInstanceState) {
7460
super.onCreate(savedInstanceState);
75-
setContentView(R.layout.activity_video);
76-
mTextureView = findViewById(R.id.textureview);
77-
mTextureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() {
61+
mGLSurfaceView = new GLSurfaceView(this);
62+
Display display = getWindowManager().getDefaultDisplay();
63+
int width = display.getWidth();
64+
int height = (int) ((width) * (9 / 16f));
65+
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(width, height);
66+
mGLSurfaceView.setLayoutParams(layoutParams);
67+
setContentView(mGLSurfaceView);
68+
mGLSurfaceView.setEGLContextClientVersion(3);
69+
VideoPlayerRender videoPlayerRender = new VideoPlayerRender(mGLSurfaceView);
70+
videoPlayerRender.setIVideoTextureRenderListener(new VideoPlayerRender.IVideoTextureRenderListener() {
7871
@Override
79-
public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
80-
// 创建surface对象，让其从surfacetexture中获取数据
81-
mSurface = new Surface(surface);
72+
public void onCreate(SurfaceTexture surfaceTexture) {
73+
mSurface = new Surface(surfaceTexture);
8274
startPlay();
8375
}
84-
85-
@Override
86-
public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
87-
88-
}
89-
90-
@Override
91-
public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
92-
mSurface = null;
93-
if (mMediaPlayer != null) {
94-
mMediaPlayer.stop();
95-
mMediaPlayer.release();
96-
mMediaPlayer = null;
97-
}
98-
return true;
99-
}
100-
101-
@Override
102-
public void onSurfaceTextureUpdated(SurfaceTexture surface) {
103-
104-
}
10576
});
77+
mGLSurfaceView.setRenderer(videoPlayerRender);
10678
}
10779

10880
@Override
10981
protected void onResume() {
11082
super.onResume();
111-
if (mTextureView.isAvailable()) {
83+
if (mSurface != null && mSurface.isValid()) {
11284
startPlay();
11385
}
86+
if (mGLSurfaceView != null) {
87+
mGLSurfaceView.onResume();
88+
}
11489
}
11590

11691
private void startPlay() {
117-
if (mMediaPlayer != null) {
92+
if (mMediaPlayer != null && mSurface != null && mSurface.isValid()) {
93+
mMediaPlayer.setSurface(mSurface);
94+
mMediaPlayer.start();
11895
return;
11996
}
12097
mMediaPlayer = new MediaPlayer();
12198
try {
122-
mMediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
123-
mMediaPlayer.setDataSource(this, Uri.parse(VIDEO_PATH));
99+
mMediaPlayer = MediaPlayer.create(this, R.raw.beauty);
124100
mMediaPlayer.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
125101
@Override
126102
public void onPrepared(MediaPlayer mp) {
@@ -137,6 +113,7 @@ public class VideoActivity extends Activity {
137113
});
138114
// 将surface设置给mediaplayer
139115
mMediaPlayer.setSurface(mSurface);
116+
mSurface.release();
140117
mMediaPlayer.setScreenOnWhilePlaying(true);
141118
mMediaPlayer.setLooping(true);
142119
mMediaPlayer.prepareAsync();
@@ -148,6 +125,17 @@ public class VideoActivity extends Activity {
148125
@Override
149126
protected void onPause() {
150127
super.onPause();
128+
if (mGLSurfaceView != null) {
129+
mGLSurfaceView.onPause();
130+
}
131+
if (mMediaPlayer != null && mMediaPlayer.isPlaying()) {
132+
mMediaPlayer.pause();
133+
}
134+
}
135+
136+
@Override
137+
protected void onDestroy() {
138+
super.onDestroy();
151139
if (mMediaPlayer != null) {
152140
mMediaPlayer.reset();
153141
mMediaPlayer.release();
@@ -157,9 +145,9 @@ public class VideoActivity extends Activity {
157145
}
158146
```
159147

148+
视频是能播起来了，但是变形了
160149

161-
162-
### 增加OpenGL ES
150+
### 修复变形
163151

164152

165153

0 commit comments

Comments
 (0)