<!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. [codechef July Challenge 2017] Calculator

    CALC: 计算器题目描述大厨有一个计算器,计算器上有两个屏幕和两个按钮.初始时每个屏幕上显示的都是 0.每按一次第一个按钮,就会让第一个屏幕上显示的数字加 1,同时消耗 1 单位的能量.每按一次第二 ...

  2. Vue + webpack 项目配置化、接口请求统一管理

    准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug ...

  3. Python3组播通信编程实现教程（发送者+接收者）

    一.说明 1.1 标准组播解释 通信分为单播.多播(即组播).广播三种方式 单播指发送者发送之后,IP数据包被路由器发往目的IP指定的唯一一台设备的通信形式,比如你现在与web服务器通信就是单播形式 ...

  4. SpringBoot启动器

    pom.xml文件1.父项目 <parent> <groupId>org.springframework.boot</groupId> <artifactId ...

  5. linux下如何添加一个用户并且让用户获得root权限 备用

    (2010-12-02 09:58:30) 转载▼ 标签: 帐号 权限 杂谈 分类: Linux 测试环境:CentOS 5.5 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: # ...

  6. tomcat启动超时_tomcat was unable to start within

    参考: http://jingyan.baidu.com/article/64d05a025c9969de55f73b23.html 首先,你得确认下你的数据库连接,尤其是在多个服务器之间转换或者服务 ...

  7. iconfont.cn批量加入

    iconfont.cn还没有一个批量加入的功能 以下是最新的图标批量加入购物车功能代码. var icons = document.querySelectorAll('.icon-gouwuche1' ...

  8. word-wrap与break-word属性的区别

    共同点 word-wrap:break-word与word-break:break-all都能把长单词强行断句 不同点 word-wrap:break-word会首先起一个新行来放置长单词,新的行还是 ...

  9. FIFO的使用总结

    使用FIFO积累 FIFO是在FPGA设计中使用的非常频繁,也是影响FPGA设计代码稳定性以及效率等得关键因素.我总结一下我在使用FIFO过程中的一些心得,与大家分享.         我本人是做有线 ...

  10. kubernetes 环境搭建(ubuntu16.04)

    通过kubeadm安装kubernetes的教程:1: 首先在每台机器上安装: docker(1.12), kubeadm(1.6), kubectl, kubelet, kubernetes-cni ...