C/C++教程
Cesium 中的Shader解析2
本文主要是介绍Cesium 中的Shader解析2，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一、简介
采用纯WebGL实现纹理贴图，并修改shader，对比Cesium中的实现，从而感受Cesium对WebGL的封装，以及用法上的异同点。
可以对比Shader解析1中用Cesium实现相同功能代码。https://www.cnblogs.com/dog2016/p/16222406.html
二、代码
<!--
纹理映射的过程需要顶点着色器和片元着色器二者的配合：首先在顶点着色器中为每个顶点指定纹理坐标，
然后在片元着色器中根据每个片元的纹理坐标从纹理图像中抽取纹素颜色。
程序主要包括五个部分，已经在代码中用数字标记了出来。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
</head>
<body onl oad="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script>
var VSHADER_SOURCE = /* glsl */ `
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
void main(){
gl_Position=a_Position;
v_TexCoord=a_TexCoord;
}
`;
var FSHADER_SOURCE = /* glsl */ `
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_Sampler;
uniform float color2;
varying vec2 v_TexCoord;
void main(){
vec4 color =texture2D(u_Sampler,v_TexCoord);
vec2 center=vec2(0.5,0.5);
vec2 pos=vec2(gl_FragCoord.x/400.0,gl_FragCoord.y/400.0);
float dis=distance(center,pos);
if(dis>0.25){
color=vec4(vec3(0),1.0);
}
if(dis<0.1){
color=vec4(vec3(0),1.0);
}
gl_FragColor=color;
}
`;
// 内置变量gl_FragCoord表示WebGL在canvas画布上渲染的所有片元或者说像素的坐标，
// 坐标原点是canvas画布的左上角，x轴水平向右，y竖直向下，
// gl_FragCoord坐标的单位是像素，gl_FragCoord的值是vec2(x,y),
// 通过gl_FragCoord.x、gl_FragCoord.y方式可以分别访问片元坐标的纵横坐标。
function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if (!gl) {
return;
}
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
return;
}
var n = initVertexBuffers(gl);
if (n < 0) {
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Set texture
if (!initTextures(gl, n)) {
console.log('Failed to intialize the texture.');
return;
}
}
// 设置纹理坐标
/*
将纹理坐标传入顶点着色器。我们可以将纹理坐标和顶点坐标写在同一个缓冲区中,成对记录每个顶点的顶点坐标和纹理坐标。
*/
function initVertexBuffers(gl) {
var verticesTexCoords = new Float32Array([
//vertex coord,texture coord
-0.5, 0.5, 0.0, 1.0, //webgl坐标系顶点坐标——左上角
-0.5, -0.5, 0.0, 0.0, //webgl坐标系顶点坐标——左下角
0.5, 0.5, 1.0, 1.0, //webgl坐标系顶点坐标——右上角
0.5, -0.5, 1.0, 0.0, //webgl坐标系顶点坐标——右下角
]);
var n = 4; //the number of vertices
//create the buffer object
var vertexTexCoordBuffer = gl.createBuffer();
if (!vertexTexCoordBuffer) {
return -1;
}
//Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
//Get the storage location of a_Position,assign and enable buffer
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
return -1;
}
// undefined vertexAttribPointer(GLuint index, GLint size, GLenum type,
// GLboolean normalized, GLsizei stride, GLintptr offset);
// index：第几个属性，从0开始取，0，1，2，顺序自己定义，例如顶点位置，纹理，法线
// size：一个顶点所有数据的个数，这里每个顶点有两个浮点数属性值，所以是2
// type：顶点描述数据的类型，这里position数组中的数据全部为float，所以是GL_FLOAT
// normalized：是否需要显卡帮忙把数据归一化到-1到+1区间，这里不需要，所以设置GL_FALSE
// stride：一个顶点占有的总的字节数，这里为两个float，所以是FSIZE * 4
// offset：当前指针指向的vertex内部的偏离字节数，可以唯一的标识顶点某个属性的偏移量
// 这里是指向第一个属性，顶点坐标，偏移量为0
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
gl.enableVertexAttribArray(a_Position); //Enable the assignment of the buffer object
//Get the Storge location of a_TexCoord
var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
if (a_TexCoord < 0) {
return -1;
}
//Assign the buffer object to a_TexCoord variable
gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
gl.enableVertexAttribArray(a_TexCoord);
gll = gl;
return n;
}
function initTextures(gl, n) {
var texture = gl.createTexture(); //Create a texture object
if (!texture) {
return false
}
//Get the storge location of u_Sampler
var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
if (!u_Sampler) {
return;
}
var image = new Image(); //Create the image object
if (!image) {
return;
}
//Register the event handler to be called on loading an image
image.onload = () => {
loadTexture(gl, n, texture, u_Sampler, image);
}
image.src = '../resources/sky.JPG';
return true;
}
function loadTexture(gl, n, texture, u_Sampler, image) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); //Flip the image's y axis
//Enable texture unit0
gl.activeTexture(gl.TEXTURE0);
//Bind the texture object to the target
gl.bindTexture(gl.TEXTURE_2D, texture);
//Set the texture parameters
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
//Set the texture image
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
//Set the texture unit 0 to the sampler
gl.uniform1i(u_Sampler, 0);
gl.clear(gl.COLOR_BUFFER_BIT); //Clear canvas
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); //Draw the rectangle
}
</script>
</body>
</html>
三、效果
这篇关于Cesium 中的Shader解析2的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
怎么实现ansible playbook 备份代码中命名包含时间戳功能？-icode9专业技术文章分享11-22
-
ansible 的archive 参数是什么意思？-icode9专业技术文章分享11-22
-
ansible 中怎么只用archive 排除某个目录？-icode9专业技术文章分享11-22
-
exclude_path参数是什么作用？-icode9专业技术文章分享11-22
-
微信开放平台第三方平台什么时候调用数据预拉取和数据周期性更新接口？-icode9专业技术文章分享11-22
-
uniapp 实现聊天消息会话的列表功能怎么实现？-icode9专业技术文章分享11-22
-
在Mac系统上将图片中的文字提取出来有哪些方法？-icode9专业技术文章分享11-22
-
excel 表格中怎么固定一行显示不滚动？-icode9专业技术文章分享11-22
-
怎么将 -rwxr-xr-x 修改为 drwxr-xr-x？-icode9专业技术文章分享11-22
-
在Excel中怎么将小数向上取整到最接近的整数？-icode9专业技术文章分享11-22
-
Excel中常见的取整函数有哪些？-icode9专业技术文章分享11-22
-
错误信息：does not match the actual quantity supplied 提示是什么意思？-icode9专业技术文章分享11-22
-
WebSocket学习：初学者的简单指南11-21
-
获取apk的md5值有哪些方法？-icode9专业技术文章分享11-20
-
xml报文没有传 IdentCode ，为什么正常解析没报错呢？-icode9专业技术文章分享11-20
栏目导航
