<!DOCTYPE html>

<html lang="en">

	<head>

		<title>three.js webgl - buffer geometry custom attributes - particles</title>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<style>

			body {

				color: #ffffff;

				background-color: #000000;

				margin: 0px;

				overflow: hidden;

			}

			#info {

				position: absolute;

				top: 0px;

				width: 100%;

				padding: 5px;

				font-family: Monospace;

				font-size: 13px;

				text-align: center;

				font-weight: bold;

			}

			a {

				color: #fff;

			}

		</style>

	</head>

	<body>

		<div id="container"></div>

		<script src="../build/three.js"></script>

		<script src="js/Detector.js"></script>

		<script type="x-shader/x-vertex" id="vertexshader">

			attribute float size;

			attribute vec3 customColor;

			varying vec3 vColor;

			void main() {

				vColor = customColor;

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

				gl_PointSize = size * ( 300.0 / mvPosition.x );

				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform sampler2D texture;

			varying vec3 vColor;

			void main() {

				gl_FragColor = vec4( vColor, 1.0 );

				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

			}

		</script>

		<script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

		var renderer, scene, camera, stats;

		var particleSystem, uniforms, geometry;

		var particles = 200;

		var WIDTH = window.innerWidth;

		var HEIGHT = window.innerHeight;

		init();

		animate();

		function init() {

			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );

			camera.position.z = 500;

			scene = new THREE.Scene();

			uniforms = {

				texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }

			};

			var shaderMaterial = new THREE.ShaderMaterial( {

				uniforms:       uniforms,

				vertexShader:   document.getElementById( 'vertexshader' ).textContent,

				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

				transparent:    true

			});

			var radius = 400;

			var geometry = new THREE.BufferGeometry();

			var positions = new Float32Array( particles * 3 );

			var colors = new Float32Array( particles * 3 );

			var sizes = new Float32Array( particles );

			for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) {

				positions[ i3 + 0 ] = ( Math.random() * 2 - 1 ) * radius;

				positions[ i3 + 1 ] = ( Math.random() * 2 - 1 ) * radius;

				positions[ i3 + 2 ] = 0;

				colors[ i3 + 0 ] = 1;

				colors[ i3 + 1 ] = 1;

				colors[ i3 + 2 ] = 1;

				sizes[ i ] = 10;

			}

			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );

			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );

			particleSystem = new THREE.Points( geometry, shaderMaterial );

			scene.add( particleSystem );

			renderer = new THREE.WebGLRenderer();

			renderer.setPixelRatio( window.devicePixelRatio );

			renderer.setSize( WIDTH, HEIGHT );

			var container = document.getElementById( 'container' );

			container.appendChild( renderer.domElement );

			window.addEventListener( 'resize', onWindowResize, false );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;

			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function animate() {

			requestAnimationFrame( animate );

			renderer.render( scene, camera );

		}

	</script>

</body>

</html>

　　

Threejs着色器基本使用样例改造的更多相关文章

  1. DirectX11 With Windows SDK--02 顶点/像素着色器的创建、顶点缓冲区

    前言 由于在Direct3D 11中取消了固定管线,要想绘制图形必须要了解可编程渲染管线的流程,一个能绘制出图形的渲染管线最少需要有这两个可编程着色器:顶点着色器和像素着色器. 本章会直接跳过渲染管线 ...

  2. Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器）

    Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器) 本篇博客介绍Cocos2d-x 为我们提供的一个类--AssetsManager在Lua中的使用样例,效果 ...

  3. TreeSet排序，存储自己定义对象，自己定义比較器演示样例

    Set:无序.不能够反复元素. |--HashSet:数据结构是哈希表.线程是非同步的. 保证元素唯一性的原理:推断元素的hashCode值是否同样. 假设同样,还会继续推断元素的equals方法.是 ...

  4. 最简单的基于FFmpeg的移动端样例附件：Android 自带播放器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  5. 最简单的基于FFmpeg的移动端样例：IOS 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  6. 最简单的基于FFmpeg的移动端样例：IOS 推流器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  7. 最简单的基于FFmpeg的移动端样例：Android 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  8. ThreeJS 物理材质shader源码分析(顶点着色器)

    再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib ...

  9. Qt 鼠标样式特效探索样例（一）——利用时间器调用QWidget.move()函数

    Qt 鼠标样式特效探索样例(一)       心血来潮,突然想在Qt里玩一把鼠标样式,想到在浏览网页时,经常看到漂亮的鼠标动画,于是今天摸索着乱写个粗糙的demo,来满足自己的好奇心. 效果图 方案要 ...

随机推荐

  1. C# 3.0 / C# 3.5 扩展方法

    概述 扩展方法是一种特殊的静态方法,可以像扩展类型上的实例方法一样进行调用,能向现有类型“添加”方法,而无须创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法的定义实现: public s ...

  2. [luogu P2319] [HNOI2006]超级英雄

    [luogu P2319] [HNOI2006]超级英雄 题目描述 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金. ...

  3. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  4. MySQL安装教程（mysql5.6_bundle）

    1.下载软件包 下载链接:https://dev.mysql.com/downloads/mysql/5.6.html#downloads centos6--MySQL-5.6.35-1.el6.x8 ...

  5. [转]java nio解决半包 粘包问题

    java nio解决半包 粘包问题 NIO socket是非阻塞的通讯模式,与IO阻塞式的通讯不同点在于NIO的数据要通过channel放到一个缓存池ByteBuffer中,然后再从这个缓存池中读出数 ...

  6. 小程序证书申请FAQ

    1. 帮别人开发小程序, 先把你的微信号加到成员里, 并给予开发者权限,体验者权限,登录,数据分析,开发管理,开发设置 2. 需要https, 不能用windows2003,必须2008以上,用IIS ...

  7. Oracle中如何停止正在执行SQL语句

    oracle的用P/SQL客户端中,如何停止正在执行的SQL语句? 我们使用oracle语句查询某个表时,如果查询的表数据太多,如何停止正在执行操作 如查询的表数据超过上万条时,如何停止查询操作

  8. error: http://ppa.launchpad.net lucid Release: The following signatures couldn't be verified because

    ubuntu 命令行sudo apt-get update W: GPG error: http://ppa.launchpad.net lucid Release: The following si ...

  9. BIOS、BootLoader、uboot对比

    BIOS BIOS是英文"Basic Input Output System"的缩略语,直译过来后中文名称就是"基本输入输出系统".其实,它是一组固化到计算机内 ...

  10. add()方法和Put()方法的差别

    add()和put()方法都是集合框架中的添加元素的方法. 但是put()方法应用于map集合中,add()方法应用于collection集合中. 二者的主要区别是:返回值类型不一样. add()放回 ...