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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
怎么切换 Git 项目的远程仓库地址？-icode9专业技术文章分享12-24
-
怎么更改 Git 远程仓库的名称？-icode9专业技术文章分享12-24
-
更改 Git 本地分支关联的远程分支是什么命令？-icode9专业技术文章分享12-24
-
uniapp 连接之后会被立马断开是什么原因？-icode9专业技术文章分享12-24
-
cdn 路径可以指定规则映射吗？-icode9专业技术文章分享12-24
-
CAP：Serverless?+AI?让应用开发更简单12-24
-
新能源车企如何通过CRM工具优化客户关系管理，增强客户忠诚度与品牌影响力12-23
-
原创tauri2.1+vite6.0+rust+arco客户端os平台系统|tauri2+rust桌面os管理12-23
-
DevExpress 怎么实现右键菜单（Context Menu）显示中文？-icode9专业技术文章分享12-23
-
怎么通过控制台去看我的页面渲染的内容在哪个文件中呢-icode9专业技术文章分享12-22
-
el-tabs 组件只被引用了一次，但有时会渲染两次是什么原因？-icode9专业技术文章分享12-22
-
wordpress有哪些好的安全插件？-icode9专业技术文章分享12-22
-
wordpress如何查看系统有哪些cron任务？-icode9专业技术文章分享12-22
-
Svg Sprite Icon教程：轻松入门与应用指南12-21
-
Excel数据导出实战：新手必学的简单教程12-20
栏目导航
