<!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. [luogu P1438] 无聊的数列

    [luogu P1438] 无聊的数列 题目背景 无聊的YYB总喜欢搞出一些正常人无法搞出的东西.有一天,无聊的YYB想出了一道无聊的题:无聊的数列...(K峰:这题不是傻X题吗) 题目描述 维护一个 ...

  2. [CodeForces - 447C] C - DZY Loves Sequences

    C - DZY Loves Sequences DZY has a sequence a, consisting of n integers. We'll call a sequence ai, ai ...

  3. 八、持久层框架（MyBatis）

    一.基于MyBatis的CRUD 1.首先是配置文件Category.xml修改 一次性修改配置文件Category.xml,提供CRUD对应的sql语句. <?xml version=&quo ...

  4. ActiveMQ broker 集群, 静态发现和动态发现

    下载 activemq 压缩包解压后,conf 目录下有各种示例配置文件,红线标出的是静态发现和动态发现的配置. 1. 静态配置 启动3个 broker,端口分别为61616,61618,61620, ...

  5. 针对unicode对象---检测字符串是否只由数字组成

  6. Vue.js 引入外部js方法

    1.外部文件config.js 第一种写法 //常量的定义 const config = { baseurl:'http://172.16.114.5:8088/MGT2' } //函数的定义 fun ...

  7. 机器学习---笔记----Python基础

    一. python简介 1. python 具有丰富强大的库,常被称为胶水语言,能够把用其他语言制作的各种模块很轻松地联结在一起 2. python强制使用空白符(white space)作为语句缩进 ...

  8. 认识微软Visual Studio Tools for AI

    认识微软Visual Studio Tools for AI   微软已经发布了其 Visual Studio Tools for AI 的测试版本,这是微软 Visual Studio 2017 I ...

  9. PC/FORTH 循环

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  10. awk使用教程

    gawk - pattern scanning and processing language 基本用法:gawk [options] 'program' FILE ... program:PATTE ...