WebGL之点上添加图片(using texture on point)

var VSHADER_SOURCE =[
        "attribute vec4 a_Position;",
        "uniform mat4 u_ProjMatrix;",
        "uniform float u_PointSize;",
        "void main() {",
            "    gl_PointSize = u_PointSize;",
            "    gl_Position = u_ProjMatrix * a_Position;",
        "}"

    ].join("\n")
var FSHADER_SOURCE =
[
        "precision mediump float;",
        "uniform sampler2D u_Sampler;",
        "void main() {",          "  gl_FragColor = texture2D(u_Sampler,vec2(gl_PointCoord.x,1.0 - gl_PointCoord.y));",
        "}"

    ].join("\n")

function main() {
    var canvas = document.getElementById(‘webgl‘);
    var gl = getWebGLContext(canvas);
    if (!gl) {
            console.log(‘Failed to get the rendering context for WebGL‘);
            return;
    }
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.log(‘Failed to intialize shaders.‘);
        return;
    }
    var projMatrix4=new Matrix4();
    projMatrix4.setOrtho(-1,1,-1,1,0.0,1.0);
    var u_projMatrix=gl.getUniformLocation(gl.program,‘u_ProjMatrix‘);
    gl.uniformMatrix4fv(u_projMatrix,false,projMatrix4.elements);    var position=gl.getAttribLocation(gl.program,‘a_Position‘);
    gl.vertexAttrib3f(position,0.0,0.0,0.0);

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    loadImg(gl);

}
function loadImg(gl){
    var image=new Image();
    image.onload=function(){
        drawPic(gl,image)
    }
    image.src="pic.png";
}

function drawPic(gl,image){
    var width=image.width;
    var height=image.height; 

    var pointSize=gl.getUniformLocation(gl.program,"u_PointSize");
    gl.uniform1f(pointSize,Math.max(width,height));

    var texture=gl.createTexture();
    //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D,texture);

    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);

    gl.uniform1i(gl.getUniformLocation(gl.program,"u_Sampler"),0);
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS,0,1);

    gl.bindTexture(gl.TEXTURE_2D, null);
}
时间: 2024-10-07 13:52:37

WebGL之点上添加图片(using texture on point)的相关文章

Android控件上添加图片

项目中有一个点赞功能,点赞的小图标添加在点赞列表旁边,在xml里可以进行设置,也可以在代码中进行绘图. 下面是两种方法的设置: 1.xml里:一些控件:button.textView等等里面有个属性是android:drawableLeft 就可以将pic设置到text的左边.good.... 2.代码中: TextView txtlikedList = new TextView(this.getContext()); Drawable drawable= getResources().getD

在动画视图上添加图片实现 "跳动的心"

#import "UIViewAnimationController.h" @interface UIViewAnimationController (){    UIView *animationView;    } @end @implementation UIViewAnimationController - (void)viewDidLoad {    [super viewDidLoad];        self.view.backgroundColor = [UIColo

tableView 上添加图片 修改任意位置

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { color: #703daa } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { p.p1 { margin:

4.关于QT中的QFile文件操作,QBuffer,Label上添加QPixmap,QByteArray和QString之间的区别,QTextStream和QDataStream的区别,QT内存映射(

 新建项目13IO 13IO.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets network CONFIG += C++11 MyWidget.h #ifndef MYWIDGET_H #define MYWIDGET_H   #include <QWidget>   class MyWidget : public QWidget {     Q_OBJECT public:     expli

python 图片上添加文字

1 import PIL 2 from PIL import ImageFont 3 from PIL import Image 4 from PIL import ImageDraw 5 6 #设置字体,如果没有,也可以不设置 7 font = ImageFont.truetype("/usr/share/fonts/truetype/ttf-dejavu/DejaVuSans.ttf",13) 8 9 #打开底版图片 10 imageFile = "base.png&qu

在Button上、下、左、右位置添加图片和文字

转载请注明出处:http://blog.csdn.net/droyon/article/details/37564419 很多人有如标题所述的需求,而且大多数人采用了自定义组件解决了需求,其实还可以有更"懒"的方法. 1.先附效果图: 2.方案. 首先,Activity.java public class MainActivityTest extends Activity{ @Override protected void onCreate(Bundle savedInstanceSt

iOS 给github上面的readme.md 添加图片

很多github上面的代码都带有用于说明的图片或者截图,下面说一下给readme.md 添加图片的方法 这是我的githhub上面添加的图片. 首先呢 将图片放在要上传的仓库里面,最后 push 到 github 上. 然后就能获得这个图片的地址 然后在编辑readme ![image]{(https://github.com/ButBueatiful/dotvim/raw/master/screenshots/vim-screenshot.jpg)} 将大括号里面替换为你的图片地址,就可以给r

MFC对话框上添加PNG格式的图片的方法

使用CImage类 1.在stdafx.h中加入#include <atlimage.h> 2.在xxxdlg.h中添加CImage m_Img 3.在OnInitDialog中添加m_Img.Load(_T("res\\1.png")); 4.在OnPaint()添加显示png的代码: m_Img.Draw(GetDC()->m_hDC, 0,0); MFC对话框上添加PNG格式的图片的方法

opencv在图片上添加文字

/****************************************** func:cvText desc:put text on an image @param img The image pointer which we want to put text on @param text the text pointer @param x the x coordinate @param y the y coordinate @return null ****************